AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

React Native动画Animated详解

2017-05-28 9528
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介：

在移动开发中，动画是提高用户体验不可缺少的一个元素。在React Native中，动画API提供了一些现成的组件：Animated.View，Animated.Text和Animated.Image默认支持动画。动画API会调用iOS或者Android的本地代码来完成这些组件的位移、大小等动画。

在React Native中，Animated创建过程如下：

  1. 创建Animated.Value，设置初始值，比如一个视图的opacity属性，最开始设置Animated.Value(0),来表示动画的开始时候，视图是全透明的。
  2. AnimatedValue绑定到Style的可动画属性，比如透明度，{opacity: this.state.fadeAnim}
  3. 使用Animated.timing来创建自动的动画,或者使用Animated.event来根据手势，触摸，Scroll的动态更新动画的状态（本文会侧重讲解Animated.timing）
  4. 调用Animated.timeing.start()开始动画

Animated简介

大多数情况下，在 React Native 中创建动画是推荐使用 Animated API 的，其提供了三个主要的方法用于创建动画：

  1. Animated.timing() -- 推动一个值按照一个过渡曲线而随时间变化。Easing 模块定义了很多缓冲曲线函数。
  2. Animated.decay() -- 推动一个值以一个初始的速度和一个衰减系数逐渐变为0。
  3. Animated.spring() -- 产生一个基于 Rebound 和 Origami 实现的Spring动画。它会在
    toValue 值更新的同时跟踪当前的速度状态，以确保动画连贯。

除了这三个创建动画的方法，对于每个独立的方法都有三种调用该动画的方式：

  1. Animated.parallel() --同时开始一个动画数组里的全部动画。默认情况下，如果有任何一个动画停止了，其余的也会被停止。你可以通过stopTogether 选项来改变这个效果。
  2. Animated.sequence() --按顺序执行一个动画数组里的动画，等待一个完成后再执行下一个。如果当前的动画被中止，后面的动画则不会继续执行。
  3. Animated.stagger() -- 一个动画数组，里面的动画有可能会同时执行（重叠），不过会以指定的延迟来开始。

Animated.timing()

使用 Animated.timing 创建的旋转动画。Animated.timing()的基本使用方法如下：

Animated.timing(
  someValue,
  {
    toValue: number,
    duration: number,
    easing: easingFunction,
    delay: number
  }
)

Easing 也是用React Native创建动画的载体，它允许我们使用已经定义好的各种缓冲函数，例如：linear, ease, quad, cubic, sin, elastic, bounce, back, bezier, in, out, inout 。由于有直线运动，我们将使用 linear。
接下来，需要在构造函数中初始化一个带动画属性的值用于旋转动画的初始值：

constructor () {
  super()
  this.spinValue = new Animated.Value(0)
}

我们使用 Animated.Value声明了一个 spinValue 变量，并传了一个 0 作为初始值。然后创建了一个名为 spin 的方法，并在 componentDidMount 中调用它，目的是在 app 加载之后运行动画。

componentDidMount () {
  this.spin()
}
spin () {
  this.spinValue.setValue(0)
  Animated.timing(
    this.spinValue,
    {
      toValue: 1,
      duration: 4000,
      easing: Easing.linear
    }
  ).start(() => this.spin())
}

现在方法已经创建好了，接下来就是在UI中渲染动画了。

render () {
  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: 'https://s3.amazonaws.com/media-p.slid.es/uploads/alexanderfarennikov/images/1198519/reactjs.png'}}
      />
    </View>
  )
}

实现效果：
这里写图片描述

完整代码：

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

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


class AnimationRotateScene extends Component {

    constructor(props) {
        super(props);
        this.spinValue = new Animated.Value(0)
    }

    componentDidMount () {
        this.spin()
    }

    spin () {
        this.spinValue.setValue(0)
        Animated.timing(
            this.spinValue,
            {
                toValue: 1,
                duration: 4000,
                easing: Easing.linear
            }
        ).start(() => this.spin())
    }


    render() {

        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: 'https://s3.amazonaws.com/media-p.slid.es/uploads/alexanderfarennikov/images/1198519/reactjs.png'}}
                />
                <TouchableOpacity onPress={() => this.spin()} style={styles.button}>
                    <Text>启动动画</Text>
                </TouchableOpacity>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        marginTop: 20,
        justifyContent: 'center',
        alignItems: 'center',
    },
    button: {
        marginTop: 20,
        backgroundColor:'#808080',
        height:35,
        width:140,
        borderRadius:5,
        justifyContent: 'center',
        alignItems: 'center',
    },
});

export default AnimationRotateScene;

Animated.spring()

使用 Animated.spring() 方法创建一个放大缩小的动画。
这里写图片描述
Animated.spring() 方法使用：

Animated.spring(
    someValue,
    {
      toValue: number,
      friction: number
    }
)

如上图所示，我们要使用Animated.spring()创建一个放大缩小的动画效果。
在构造函数中，创建一个 springValue 变量，初始化其值为0.3。

constructor () {
  super()
  this.springValue = new Animated.Value(0.3)
}

然后，删除 animated 方法和componentDidMount方法，创建一个新的 spring 方法。

spring () {
  this.springValue.setValue(0.3)
  Animated.spring(
    this.springValue,
    {
      toValue: 1,
      friction: 1
    }
  ).start()
}

然后我们给View的button添加一个点击事件，出发上面的spring动画。

<View style={styles.container}>
  <Text
    style={{marginBottom: 100}}
    onPress={this.spring.bind(this)}>Spring</Text>
    <Animated.Image
      style={{ width: 227, height: 200, transform: [{scale: this.springValue}] }}
      source={{uri: 'https://s3.amazonaws.com/media-p.slid.es/uploads/alexanderfarennikov/images/1198519/reactjs.png'}}/>
</View>

完整代码如下：

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

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


class AnimationRotateScene extends Component {

    constructor(props) {
        super(props);
        this.spinValue = new Animated.Value(0)
    }

    componentDidMount () {
        this.spin()
    }

    spin () {
        this.spinValue.setValue(0)
        Animated.timing(
            this.spinValue,
            {
                toValue: 1,
                duration: 4000,
                easing: Easing.linear
            }
        ).start(() => this.spin())
    }


    render() {

        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: 'https://s3.amazonaws.com/media-p.slid.es/uploads/alexanderfarennikov/images/1198519/reactjs.png'}}
                />
                <TouchableOpacity onPress={() => this.spin()} style={styles.button}>
                    <Text>启动动画</Text>
                </TouchableOpacity>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        marginTop: 20,
        justifyContent: 'center',
        alignItems: 'center',
    },
    button: {
        marginTop: 20,
        backgroundColor:'#808080',
        height:35,
        width:140,
        borderRadius:5,
        justifyContent: 'center',
        alignItems: 'center',
    },
});

export default AnimationRotateScene;

Animated.parallel()

Animated.parallel() 会同时开始一个动画数组里的全部动画。parallel()会接受一个动画数组，首先看一下api：

Animated.parallel(arrayOfAnimations)
// In use:
Animated.parallel([
  Animated.spring(
    animatedValue,
    {
      //config options
    }
  ),
  Animated.timing(
     animatedValue2,
     {
       //config options
     }
  )
])

所以，我们先创建一个动画数组，并初始化。

constructor () {
  super()
  this.animatedValue1 = new Animated.Value(0)
  this.animatedValue2 = new Animated.Value(0)
  this.animatedValue3 = new Animated.Value(0)
}

然后，创建一个 animate 方法并在 componendDidMount() 中调用它。

componentDidMount () {
  this.animate()
}
animate () {
  this.animatedValue1.setValue(0)
  this.animatedValue2.setValue(0)
  this.animatedValue3.setValue(0)
  const createAnimation = function (value, duration, easing, delay = 0) {
    return Animated.timing(
      value,
      {
        toValue: 1,
        duration,
        easing,
        delay
      }
    )
  }
  Animated.parallel([
    createAnimation(this.animatedValue1, 2000, Easing.ease),
    createAnimation(this.animatedValue2, 1000, Easing.ease, 1000),
    createAnimation(this.animatedValue3, 1000, Easing.ease, 2000)        
  ]).start()
}

在 animate 方法中，我们将三个动画属性值重置为0。此外，还创建了一个 createAnimation 方法，该方法接受四个参数：value, duration, easing, delay(默认值是0)，返回一个新的动画。

然后，调用 Animated.parallel()，并将三个使用 createAnimation 创建的动画作为参数传递给它。在 render 方法中，我们需要设置插值：

render () {
  const scaleText = this.animatedValue1.interpolate({
    inputRange: [0, 1],
    outputRange: [0.5, 2]
  })
  const spinText = this.animatedValue2.interpolate({
    inputRange: [0, 1],
    outputRange: ['0deg', '720deg']
  })
  const introButton = this.animatedValue3.interpolate({
    inputRange: [0, 1],
    outputRange: [-100, 400]
  })
  ...
}

最后，我们用一个主 View 包裹三个 Animated.Views：

<View style={[styles.container]}>
  <Animated.View 
    style={{ transform: [{scale: scaleText}] }}>
    <Text>Welcome</Text>
  </Animated.View>
  <Animated.View
    style={{ marginTop: 20, transform: [{rotate: spinText}] }}>
    <Text
      style={{fontSize: 20}}>
      to the App!
    </Text>
  </Animated.View>
  <Animated.View
    style={{top: introButton, position: 'absolute'}}>
    <TouchableHighlight
      onPress={this.animate.bind(this)}
      style={styles.button}>
      <Text
        style={{color: 'white', fontSize: 20}}>
        Click Here To Start
      </Text>
   </TouchableHighlight>
  </Animated.View>
</View>

完整的代码如下：

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow 组动画
 */

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


class AnimationGroupScene extends Component {

    constructor() {
        super()
        this.animatedValue1 = new Animated.Value(0)
        this.animatedValue2 = new Animated.Value(0)
        this.animatedValue3 = new Animated.Value(0)
    }

    componentDidMount() {
        this.animate()
    }

    animate() {
        this.animatedValue1.setValue(0)
        this.animatedValue2.setValue(0)
        this.animatedValue3.setValue(0)
        const createAnimation = function (value, duration, easing, delay = 0) {
            return Animated.timing(
                value,
                {
                    toValue: 1,
                    duration,
                    easing,
                    delay
                }
            )
        }
        Animated.parallel([
            createAnimation(this.animatedValue1, 2000, Easing.ease),
            createAnimation(this.animatedValue2, 1000, Easing.ease, 1000),
            createAnimation(this.animatedValue3, 1000, Easing.ease, 2000)
        ]).start()
    }

    startAnimation() {
        this.state.currentAlpha = this.state.currentAlpha == 1.0 ? 0.0 : 1.0;
        Animated.timing(
            this.state.fadeAnim,
            {toValue: this.state.currentAlpha}
        ).start();
    }

    render() {

        const scaleText = this.animatedValue1.interpolate({
            inputRange: [0, 1],
            outputRange: [0.5, 2]
        })
        const spinText = this.animatedValue2.interpolate({
            inputRange: [0, 1],
            outputRange: ['0deg', '720deg']
        })
        const introButton = this.animatedValue3.interpolate({
            inputRange: [0, 1],
            outputRange: [-100, 400]
        })

        return (
            <View style={styles.container}>

                <Animated.View
                    style={{transform: [{scale: scaleText}]}}>
                    <Text>Welcome</Text>
                </Animated.View>
                <Animated.View
                    style={{marginTop: 20, transform: [{rotate: spinText}]}}>
                    <Text
                        style={{fontSize: 20}}>
                        to the App!
                    </Text>
                </Animated.View>
                <Animated.View
                    style={{top: introButton, position: 'absolute'}}>
                    <TouchableHighlight
                        onPress={this.animate.bind(this)}
                        style={styles.button}>
                        <Text>启动组动画</Text>
                    </TouchableHighlight>
                </Animated.View>

            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        marginTop: 20,
        justifyContent: 'center',
        alignItems: 'center',
    },
    button: {
        marginTop: 20,
        backgroundColor: '#808080',
        height: 35,
        width: 140,
        borderRadius: 5,
        justifyContent: 'center',
        alignItems: 'center',
    },
});

export default AnimationGroupScene;

示例使用说明

这里写图片描述
这里写图片描述
如图所示，我对动画的代码做了一个简单的整理，大家在使用的时候直接引入AnimationRoot文件即可。
AnimationRoot文件内容如下：

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, {Component} from 'react';
import { StackNavigator } from 'react-navigation';


import AnimationIndex from './AnimationIndex';
import AnimationSpringScene from './AnimationSpringScene';//缩放动画
import AnimationRotateScene from './AnimationRotateScene';//旋转动画
import AnimationAlphaScene from './AnimationAlphaScene';//Alpha动画
import AnimationGroupScene from './AnimationGroupScene';//组动画
import AnimationFrameScene from './AnimationFrameScene';//帧动画


const anim = StackNavigator({
    AnimationIndex: { screen: AnimationIndex },
    AnimationSpringScene: { screen: AnimationSpringScene },
    AnimationRotateScene: { screen: AnimationRotateScene },
    AnimationAlphaScene: { screen: AnimationAlphaScene },
    AnimationGroupScene: { screen: AnimationGroupScene },
    AnimationFrameScene: { screen: AnimationFrameScene },
});
export default anim;

最后是项目实现的最终结果图，代码地址动画源码

文章标签：
前端开发
Spring
Java
API
容器
关键词：
React Native native
react.js Native
React Native动画
react.js动画
code_xzh
目录
相关文章
天下无贼001
|
7月前
|
开发框架 前端开发 JavaScript
探索前端开发中的跨平台框架React Native
本文将介绍前端开发中一种备受关注的跨平台框架React Native，通过比较原生应用与React Native的优缺点，探讨其在实际项目中的应用以及未来发展趋势。
天下无贼001
107 2
叫个什么名字
|
7月前
|
开发框架 前端开发 JavaScript
从零开始学习React Native开发
React Native是一种基于React框架的移动端开发框架，使用它可以快速地构建出高性能、原生的移动应用。本文将从零开始，介绍React Native的基础知识和开发流程，帮助读者快速入门React Native开发，并实现一个简单的ToDo应用程序。
叫个什么名字
149 2
土木林森
|
7月前
|
开发框架 Dart 前端开发
【Flutter前端技术开发专栏】Flutter与React Native的对比与选择
【4月更文挑战第30天】对比 Flutter（Dart，强类型，Google支持，快速热重载，高性能渲染）与 React Native（JavaScript，庞大生态，热重载，依赖原生渲染），文章讨论了开发语言、生态系统、性能、开发体验、学习曲线、社区支持及项目选择因素。两者各有优势，选择取决于项目需求、团队技能和长期维护考虑。参考文献包括官方文档和性能比较文章。
土木林森
266 0
【Flutter前端技术开发专栏】Flutter与React Native的对比与选择
1941623231718325
|
5月前
|
前端开发 JavaScript Android开发
React Native跨平台开发实战
【7月更文挑战第21天】React Native为跨平台移动应用开发提供了一种高效且强大的解决方案。通过本文的学习，你应该能够掌握React Native的基本概念和实战步骤，并开始在你的项目中使用React Native进行开发。随着你对React Native的深入理解，你将能够利用其强大的功能来构建更加复杂和高效的移动应用。
1941623231718325
90 1
土木林森
|
7月前
|
开发框架 移动开发 前端开发
【Uniapp 专栏】Uniapp 与 React Native 的对比分析
【5月更文挑战第14天】Uniapp和React Native是热门的跨平台移动开发框架。Uniapp以其一套代码多端运行、丰富的组件生态和较低的学习曲线受到青睐，适合快速开发简单应用。React Native基于React，拥有活跃社区和优秀性能，适合复杂应用。React Native在性能上略胜一筹，尤其在需要接近原生体验的场景。Uniapp的官方组件弥补了社区资源不足。选择时需考虑开发效率、性能需求、团队技术栈和社区支持。
土木林森
2054 1
【Uniapp 专栏】Uniapp 与 React Native 的对比分析
Ant.Dream
|
6月前
|
前端开发 自动驾驶 程序员
鸿蒙? 车载？Flutter? React Native? 为什么我劝你三思，说点不一样的
本文探讨了在信息技术快速发展的背景下，开发者如何选择学习路径。作者提倡使用终局思维来规划职业发展，考虑技术的长远影响。终局思维注重长远目标、系统分析、反向规划和动态调整。以车载开发为例，预测未来智能汽车可能由语音助手主导，而非依赖平板界面。此外，作者建议不要过分投入打工状态，应思考创建自己的产品，如App，以实现技能补充和额外收入。选择对未来发展和自主性有益的技术，如Kotlin，比盲目追求热点更为重要。做减法和有标准的选择，能帮助减轻焦虑，实现更高效的成长。关注公众号“AntDream”获取更多相关内容。
Ant.Dream
148 1
游客5fdji2pvmf8888
|
6月前
|
开发框架 前端开发 JavaScript
移动应用开发中的跨平台策略：Flutter与React Native的比较
在移动应用领域，跨平台解决方案已成为开发者追求高效、成本效益和广泛覆盖的关键。本文深入探讨了两种领先的跨平台框架——Flutter和React Native，从技术架构、性能、社区生态及实际应用案例四个维度进行全面对比分析。通过这一比较，旨在为移动应用开发者提供选择合适框架的参考依据，帮助他们根据项目需求做出明智的决策。
游客5fdji2pvmf8888
90 1
天涯学馆
|
6月前
|
前端开发 iOS开发 Android开发
React Native跨平台开发实战：从零到一
学习React Native跨平台开发，首先安装Node.js和React Native CLI，设置Android/iOS环境。使用CLI创建项目，如`npx react-native init MyProject`。运行应用：`npx react-native run-android`或`run-ios`。编写组件，如在App.js中创建Hello World。添加样式，安装第三方库如react-native-vector-icons，使用react-navigation进行路由和导航。
天涯学馆
123 2
1941623231718325
|
7月前
|
前端开发 JavaScript Android开发
使用React Native开发跨平台移动应用的技术详解
【5月更文挑战第22天】本文详述了使用React Native开发跨平台移动应用的技术，该框架由Facebook推出，基于JavaScript，支持iOS和Android。React Native通过JNI/JSI实现JavaScript到原生代码的转换，提供高效性能和原生体验。其优势包括跨平台性、原生体验、开发速度及社区支持。开发流程涉及环境搭建、项目创建、编码、调试与测试，以及构建与发布。注意事项包括性能优化、平台适配、利用第三方库和持续学习。React Native为开发者构建高质量跨平台应用提供了便捷途径，未来潜力无限。
1941623231718325
141 6
jiashufen
|
6月前
|
Dart 前端开发 JavaScript
探索移动应用开发中的跨平台解决方案：Flutter与React Native的比较
在移动应用开发领域，选择合适的跨平台解决方案是关键。本文将深入分析Flutter和React Native这两大主流框架，从性能、开发效率、社区支持等方面进行比较，帮助开发者做出明智的选择。
jiashufen
86 0