AnimationTing

完整代码：

AnimationTing.js:

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  Animated,
  Image,
  Easing
} from 'react-native';

const IMG_URI = 'https://s3.amazonaws.com/media-p.slid.es/uploads/alexanderfarennikov/images/1198519/reactjs.png';

export default class AnimationTing extends Component {
  constructor(props) {
    super(props);
    //使用 ** Animated.Value** 声明了一个 spinValue 变量，并传了一个 0 作为初始值
     this.spinValue = new Animated.Value(0);
  }
  spin () {
       this.spinValue.setValue(0);//this.spinValue 重置成 0
       Animated.timing(
              this.spinValue,
         {
             toValue: 1,//终值
             duration: 4000,//一次动画的持续时间
             easing: Easing.linear,//缓存函数
             delay: 0 //延迟执行的时间
         }
      ).start(() => this.spin());
      //调用 start()，并将 this.spin 作为回调传递给 start，它将在(一次)动画完成之后调用，这也是创建无穷动画的一种基本方式
  }
  componentDidMount() {
       this.spin();                         // 开始执行动画
  }
  render () {
               //inputRange 和 outputRange 参数给interpolate 方法，并分别赋值为 [0,1] 和 &[‘0deg’, ‘360deg’] 例 将数值 01 映射到了 0deg360deg
         const spin = this.spinValue.interpolate({
                inputRange: [0, 1],
                outputRange: ['0deg', '360deg'] });
        return (
            <View style={styles.container}>
                  <Animated.Image
                        style={{
                            width: 227,
                            height: 200,
                            transform: [{rotate: spin}] }}
                            source={{uri: IMG_URI}}/>
                  <View></View>         
             </View>
         )
    }
}

const styles = StyleSheet.create({
  container: {
    marginTop: 200,            
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    alignSelf : 'center',
  }
});

使用：

import React from 'react';
import {
   AppRegistry,
   View,
   Text,
   StyleSheet,
   Animated,
} from 'react-native';
import AnimationTing from './AnimationTing';

class MyFirstProject extends React.Component{

    render() {
        return (
             <View>
                 <AnimationTing></AnimationTing>
             </View>
        );
    }
}

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

效果图：