ReactNative之结合具体示例来看RN中的的Timing动画-白红宇

ReactNative之结合具体示例来看RN中的的Timing动画

阅读量：7280 次

发布时间：2019-06-30

本文共 6974 字，大约阅读时间需要 23 分钟。

今天继续更新RN相关的博客。上篇博客详细的聊了RN中关于Flex布局的相关东西，具体请参见《》。本篇博客继续更新RN的动画部分，博客中的内容依然是依托于具体的示例来进行的。

下方是官网对RN动画的的一个综述，意思就是说在RN的组件中View、Text、Image 和ScrollView是支持动画的，不过你可以使用Animated.createAnimatedComponent()这个方法来创建一个支持动画的组件稍后会介绍到。这些支持动画的组件在使用动画是都差不多，本篇博客中的示例主要以View为主，也会有Text、Image的部分动画。

Animated exports four animatable component types: View, Text, Image, and ScrollView, but you can also create your own using Animated.createAnimatedComponent().

一、一个简单的Moving动画

第一部分我们先从一个简单的Moving动画来入手。这个Moving动画是非常简单的，就是一个View，然后点击这个View，会从一个地方移动到另一个地方。然后再次点击会回归到原位。下方是效果实现的分析：

首先我们会为View添加一个点击事件，点击View时，从一个位置移到另一个位置。

再次点击时，会回到上次的一个位置。

在移动时我们加了一个Bounce的一个动画效果。

下方代码段是上述动画效果的部分代码。代码比较简单：

首先在State中定义了一个类型为 Animated.Value 的动画值，该值就负责来记录动画路径的值。该值在组件的构造器中进行了初始化，其初始值为零。

然后就是 pressView 方法了，该方法就是上述红色View点击时所执行的方法。为了点击反复移动，我们使用了 toValue来记录下次要运动的重点值。这个toValue值 0 和 1稍后会详细介绍。

然后就是关键了，调用了Animated 的timing 方法，该方法是用来配置一些动画效果的，比如设置动画执行时间的duration（单位为ms）、设置目标值的 toValue属性，以及指定缓动效果的熟悉 easing。关于这个easing下方会有详细的Demo介绍到。

设置完动画所执行的参数后，就调用了start() 方法来执行这个动画了。

上面这段代码是动画设置的相关代码，下方这块代码是动画使用的相关代码片段。下方是对这段代码的解析：

首先是从state中取出了动画值，我们将该值付给了moveValue。

然后我们是根据这个
moveValue 通过差值函数创建了一个 toValue的值，这个值就是我们动画的目标值，也是我们真正要使用的值。

这个
interpolate() 差值函数负责用来指定 toValue的生成规则，该函数可以把这个

完整代码片段：

1 type States = { 2   moveValue: Animated.Value  // 存储动画的值 3 } 4  5 class MoveViewTestComponent extends Component
      
        { 6   toValue = 0 7   constructor (props) { 8     super(props) 9     this.state = {10       moveValue: new Animated.Value(0)11     }12   }13 14   pressView = () => {15     this.toValue = this.toValue === 0 ? 1 : 016     Animated.timing(17       this.state.moveValue,  // 初始化从0开始18       {19         toValue: this.toValue, // 目标值20         duration: 1000,         // 时间间隔21         easing: Easing.bounce // 缓动函数22       }23     ).start()24   }25 26   render () {27     let { moveValue } = this.state28 29     let toValue = moveValue.interpolate({30       inputRange: [0,1],31       outputRange: ['10%', '60%']32     })33     return (34       
       
        35         
        
         43           
         
           Tap Me Move 
         44         
        45       
       46     )47   }48 }

View Code

上面设设置的left属性，我们还可以对上述代码进行修改，使用动画来改变每个角的弧度，具体动画效果如下所示：

代码就比较简单了，就是把动画的值直接赋值给我们的 borderRadius 属性即可。

二、使用Easing函数指定相关的动画效果

在上面的示例中我们指定的移动动画的Bounce效果，下方我们将通过一个示例来看一下Easing中所有的效果，具体动画效果如下所示。从下方的示例中我们不难看出，每种效果的动画运动轨迹都不同，我们在平时开发中可以根据自己的需要来选择相关的效果。当然我们还可以通过矩阵来定义动画的变换路径，在此就不做过多赘述了。

接下来我们来看一下上述动画实现的一个Demo的设计与实现。

首先我们定义了一个MoveView组件，也就是对应着上述Demo中的每个Button，上面可点击可移动的每个View就是一个MoveView。该View会从外部接收一个easing参数，该参数会被设置为该View的动画效果。具体代码如下所示：

然后我们创建了一个 TestMoveView 的一个组件，这个组件就是上述演示的内容。在 TestMoveView 中我们定义了两个数组，第一个数组用来存放每个按钮的Title，第二个数组则用来存放相关按钮的动画类型。稍后会用到下方的这两个数组。

下方就是两个比较核心的方法了, 下方是对这两个方法的介绍

第一个 item 方法用来创建一个
MoveView，该View对应的就是上述一个按钮。第一个参数Title就是按钮上的title, 二后边的easing则是动画效果。

在Item方法中我们给 MoveView 设置了一个ref的属性，该属性的Value值我们用的是按钮上的Title。设置完这个ref值后，我们可以使用
this.refs 来获取相关key值的对象。稍后我们会用到。

然后就是
createItem 方法了，该方法负责调用上面我们事先创建好的数组，从数组中取出相关的值，然后调用 item 方法创建一系列的 MoveView 放到相关的数组里并返回。

在 Render 方法中我们就可以调用下方的这个
createItem 方法来创建相关的按钮了。上的图片中能动的按钮都是通过这个
CreateItem 方法来创建的。

最后部分我们就来看一下点击Tap Me 按钮所执行的相关方法了，下方的Click就是该方法。在Click方法中主要做的就是调用 this.refs 方法获取所有可移动的MoveView的对象，然后调用该对象的pressView方法执行相关的动画。所有点击 Tap Me 按钮，下方所有的按钮都会运动。

完整代码：

1 import React,{ Component } from 'react'  2 // import MoveView from './MoveView'  3 import { Animated, Easing, Text, TouchableOpacity, View } from 'react-native'  4   5 type EasingType = (value: number) => number  6   7 export default class TestMoveView extends Component {  8   animatedKey: string[] = [  9     'linear', 10     'quad', 11     'cubic', 12     'sin', 13     'exp', 14     'bounce', 15     'poly-5', 16     'elastic-2', 17     'back-2', 18     'bezier' 19   ] 20  21   animatedEasingType: EasingType[] = [ 22     Easing.linear, 23     Easing.quad, 24     Easing.cubic, 25     Easing.sin, 26     Easing.exp, 27     Easing.bounce, 28     Easing.poly(5), 29     Easing.elastic(2), 30     Easing.back(2), 31     Easing.bezier(0,1.6, 1,-0.67) 32   ] 33  34   click = () => { 35     for (let i = 0; i < this.animatedKey.length; i++) { 36       this.refs[this.animatedKey[i]].pressView() 37     } 38   } 39  40   item = (title: string, easing: EasingType) => { 41     return ( 42       
      
        45         
       
         46           {title} 47         
        48       
       49     ) 50   } 51  52   createItems = () => { 53     let items = [] 54     for (let i = 0; i < this.animatedKey.length; i++) { 55       items.push(this.item(this.animatedKey[i], this.animatedEasingType[i])) 56     } 57     return items 58   } 59  60   render () { 61     console.log('lizelu') 62     return ( 63       
      
        64         
       
         65           
        
         Tap Me
         66         
        67         { this.createItems() } 68       
       69     ) 70   } 71 } 72  73 // MoveView 74  75 type MoveViewProps = { 76   easing?: (value: number) => number 77 } 78  79 class MoveView extends Component
      
        { 80   toValue = 0 81   state = { 82     moveValue: new Animated.Value(0) 83   } 84  85   pressView = () => { 86     this.toValue = this.toValue === 0 ? 1 : 0 87     Animated.timing( 88       this.state.moveValue,  // 初始化从0开始 89       { 90         toValue: this.toValue, // 目标值 91         duration: 1000,         // 时间间隔 92         easing: this.props.easing // 动画效果 93       } 94     ).start() 95   } 96  97   render () { 98     let { moveValue } = this.state 99     let toValue = moveValue.interpolate({100       inputRange: [0,1],101       outputRange: ['10%', '70%']102     })103     return (104       
       
        105         
        
         114           {
    this.props.children}115         
        116       
       117     )118   }119 }