How to create a simple animation effect

Question

Is there a code sample available that illustrates how to use a 2D transform (such as rotate and scale) with a JPG in a react-native application, perhaps with the code in the tutorial as a starting point?

If possible, it would be helpful to see code for two scenarios: 1) automatically apply a transform when the app is launched 2) apply a transform after different types of user gestures

At some point in the future it would be interesting to see how to create 3D transforms and animation effects.

Answer 1

Update: You can see the entire example in my sample app here: https://github.com/grgur/react-native-memory-game

Animation is now AnimationExperimental so we'll need to modify zvona's solution.

First, make sure RCTAnimationExperimental is a linked library

If not, then follow these steps:

1. Navigate to node_modules/react-native/Libraries/Animation/
2. Drag and drop RCTAnimationExperimental.xcodeproj to Libraries (should look like the image above)
3. Click on your project name (in the example above, my project name is Memory)
4. Switch to the Build Phases tab
5. Expand Libraries/RCTAnimationExperimental.xcodeproj/Products
6. Drag libRctAnimationExperimental.a to Link Binary With Libraries

Ok, the hardest part is now over. Head over to your JavaScript file. Animation is no longer part of the react-native package so we have to include it explicitly.

var React = require('react-native');
var AnimationExperimental = require('AnimationExperimental');

Alright, champ, you're ready to animate. Make sure you know what you're animating. The view you will be animating is referred to as node.

AnimationExperimental.startAnimation({
  node: this.refs.image,
  duration: 400,
  easing: 'easeInQuad',
  property: 'opacity',
  toValue: 0.1,
});

And that's it!

At the moment of writing, available properties are: opacity, position, positionX, positionY, rotation, scaleXY

Answer 2

Currently, this is a bit more complex process and I'm planning to write a blog post about that. However, as a brief starter, I write something here.

First problem is that RCTAnimation / RCTAnimationManager is not present at all, if you've created your project with react-native init [ProjectName] (https://github.com/facebook/react-native/issues/226).

You need to add it in XCode from a plus sign in top left corner: "Add Files to [ProjectName]". Then you navigate to node_modules > Libraries > Animation > RCTAnimation.xcodeproj. After it's imported, you need to drag it under Libraries in your project.

Then you need to open tab Build Phases. There you have menu Link Binary With Libraries (x items). Drag from Products under RCTAnimation.xcodeproj file named libRCTAnimation.a to the menu.

Now, you can build your project to support animations. I'm not that familiar with XCode, so there could be a even more simple way of achieving this, but I got it sorted like this.

Second Problem is that not all the available (or planned) functionality is there. At least I ran through the jungle of trials and errors before I got anything on the screen.

Try e.g. this code at first to get fully proofed that animations are working:

var {
  Animation,
  AppRegistry,
  StyleSheet,
  Text,
  View
} = React;

var styles = StyleSheet.create({
  test: {
    width: 400,
    height: 400,
    backgroundColor: 'blue',
    opacity: 0
  }
});

var AnimationTest = React.createClass({
  componentDidMount () {
    Animation.startAnimation(this.refs['this'], 400, 0, 'linear', {opacity: 1});
  },

  render () {
    return (
      <View ref='this' style={styles.test}>
        <Text>Just an animation test</Text>
      </View>
    )
  }
});

AppRegistry.registerComponent('AnimationTest', () => AnimationTest);

This should get you going. If you need any further assistance, please notify me.

If I ever succeed in writing a more complete instructions in a form of a blog article, I'll update it to this answer.

Answer 3

Check out the 2048 demo application for example usage of the RCTAnimation library:

https://github.com/facebook/react-native/tree/master/Examples/2048

It doesn't use any especially complex transforms, but does animate position, opacity, and scaleXY of various elements with code that looks like this:

Animation.startAnimation(this.refs['this'], 300, 0, 'easeInOutQuad', {scaleXY: [1, 1]});