React Native Animated useage demo

ReactNativeAnimatedDemo.js

/*
 * This demo is based on react-native 0.17.
 * Apis can change and this may not work under other version.
 */

var React = require('react-native');
var {
  AppRegistry,
  StyleSheet,
  Text,
  Animated,
  View,
} = React;

var Fuck = Animated.createAnimatedComponent(View);
var AnimationDemo = React.createClass({
  getInitialState:function(){
    return {
      rotate:new Animated.Value(0)
    }
  },
  render: function() {

    setTimeout(() => {
      this.animate()
    },1000)
    return (
      <View style={{flex:1}}>
        <Fuck
        style={{
          transform:[{rotateZ: this.state.rotate.interpolate({
                  inputRange: [0, 1],
                  outputRange: ['0deg', '45deg'],
                })},{translateY:this.state.rotate.interpolate({
                  inputRange: [0,1],
                  outputRange: [0,30]
                })},
                {translateX:this.state.rotate.interpolate({
                  inputRange: [0,1],
                  outputRange: [0,30]
                })}],
          width:30,
          height:30,
          left:50,
          top:50,
          backgroundColor:"#112390"
        }}
        onTouchEnd = { this.animate }
        ></Fuck>
      </View>
    );
  },
  animate:function(){

      alert(1)
      Animated.spring(
            this.state.rotate,
            {
              toValue: 1,       
              duration: 1000,
              friction:1
            },
          ).start(); 
  }
});

var styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

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