React Native Animated 动画之 加载中loading

用RN的Animated作一个简单的加载中动画

加载中 是APP中很常见的一种交互，本身也是刚入手React Native，加载列表的时候须要一个loading状态，那咱们就开始吧。

首先撸一遍思路

1. 首先，在ReactNative中要使咱们的loading图标容许动画，咱们可使用 createAnimatedComponent() 建立的组件加载咱们的图标，或者直接使用Animated下默认封装好了的：
   Animated.Image
Animated.ScrollView
Animated.Text
Animated.View
2. 而后动画方式是咱们熟悉的 属性：transform，写法和CSS3少量不一样
3. 接着是旋转动画rotate的值，经过Animated的方法不断更新

从文档开始

ReactNative-Animated文档
Animated的主要相关方法有4个：

Animated.decay()
Animated.spring()
Animated.timing()
Animated.loop()

前两个分别是特定曲线（衰弱、反弹）效果，这里我使用timing，便于自定义本身的动画效果。
timing函数接受2个参数，第一个初始value，第二个是配置json，相似：

Animated.timing(
    initValue, // 由new Animated.Value(0)建立
    {
        toValue: Number, // 动画到达值
        delay: Number, // 延迟动画，默认 0
        duration: Number, // initValue => toValue持续的时间，默认 500
        easing: Function, // 动画曲线
        useNativeDriver: Boolean, // 是否启用原生动画驱动，默认false
    }
  )

其中动画曲线函数能够参考 RN api-Easing
此时动画完成一半，只是从initValue转到toValue就结束了。要循环动画，这里有两种思路：

1. 在Animated.timing(...).start(callback)动画执行完毕后的callback函数中再次调用此动画，相似

   let animation = Animated.timing(...);
   animation.start(animation.start)

2. 使用Animated.loop()（本例）。关于loop方法：
   
   大概意思就是：
   其可接受2个参数：animation（可由上面3个方法建立）；config（可选配置json：{iterations: Number, // 循环次数}）。当useNativeDriver设置为true的时候，动画将不会阻塞页面UI、JS等线程。

还有一个注意点就是rotate的值是一个字符串，而且有单位，而咱们的初始值和终点值以及期间的值都是 Number，因此这里会用到一个插值函数interpolate()，上面的文档以及这篇 RN-动画animations 里有提到。demo会用到。

贴上一个简单的demo

import React, { Component } from 'react';
import {
    View,
    Text,
    Image,
    Animated, // 这两个都是要引入的
    Easing,
} from 'react-native';

export default class Loading extends Component { 
 
  
    state = {
        rotateVal: new Animated.Value(0), 
    }

    componentDidMount(){ // 组件加载完成后启动动画
        const animationLoading = Animated.timing(
            this.state.rotateVal, // 初始值
            {
                toValue: 360, // 终点值
                easing: Easing.linear, // 这里使用匀速曲线，详见RN-api-Easing
            }
        );
        Animated.loop(animationLoading).start(); // 开始动画
        setTimeout(Animated.loop(animationLoading).stop, 5000); // 5秒后中止动画，可用于任意时刻中止动画
    }

    render(){ // 渲染界面
        return(
            <View>
                // 我项目中用字体图标，因此这里用.Text，也能够用.Image加载一张图片，而后样式属性中transform
                <Animated.Text 
                    style={
  
  
  

 {
                        textAlign: 'center',
                        fontSize: 34,
                        fontFamily: 'iconfont',
                        transform: [{ // 动画属性
                            rotate: this.state.rotateVal.interpolate({
                                inputRange: [0, 360],
                                outputRange: ['0deg', '360deg'],
                            })
                        }]
                    }}>
                    {
  
  
  

 '\ue6ae'}
                </Animated.Text>
            </View>
        )
    }
}

固然还有许多组合操做，能够慢慢尝试