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);

效果图：