AnimationTing

Lu'Blog

于 2017-06-23 16:35:37 发布

阅读量272

点赞数

CC 4.0 BY-SA版权

分类专栏： RN之示例

本文链接：https://blog.youkuaiyun.com/lu1024188315/article/details/73649604

RN之示例专栏收录该内容

9 篇文章

订阅专栏

本文介绍了一个使用React Native实现的简单旋转动画案例。通过定义Animated.Value并结合timing动画方法，实现了一张图片的无限循环旋转效果。文章提供了完整的代码示例及运行效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

完整代码：

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

效果图：