React Native动画-Animated

动画类型：

• spring：基础的单次弹跳物理模型
• timing：从时间范围映射到渐变的值
• decay：以一个初始速度开始并且逐渐减慢停止

创建动画的参数：

• value：AnimatedValue | AnimatedValueXY（X轴或Y轴 | X轴和Y轴）
• config：SpringAnimationConfig | TimingAnimationConfig | DecayAnimationConfig（动画的参数配置）

值类型：

• AnimatedValue：单个值
• AnimatedValueXY：向量值

多数情况下，AnimatedValue可以满足需求（上面的示例），但有些情况下我们可能会需要AnimatedValueXY。

比如：我们需要图片沿着X轴和Y轴交叉方向，向右下角移动一小段距离。

组件类型：

• Animated.Text
• Animated.Image
• Animated.View：可以用来包裹任意视图
• Animated.createAnimatedComponent()：其它组件（较少用，用Animated.View包裹可以达到同样的效果）

• 让我们来看一个示例：图片透明度2秒内从不透明到全透明，线性变化。

  class Demo8 extends Component {
    // 构造
    constructor(props) {
        super(props);
        // 初始状态
        this.state = {
            fadeOutOpacity: new Animated.Value(0),
        };
    }
    render() {
        return ( 
          <Animated.View // 可选的基本组件类型: Image, Text, View(可以包裹任意子View)
              style = {{flex: 1,alignItems: 'center',justifyContent: 'center',
                      opacity: this.state.fadeOutOpacity,}}> 
              <Image source = {{uri: 'http://i.imgur.com/XMKOH81.jpg'}}
                  style = {{ 400,height: 400}}/>
          </Animated.View > 
        );
    }
    startAnimation() {
        this.state.fadeOutOpacity.setValue(1);
        Animated.timing(this.state.fadeOutOpacity, {
            toValue: 0,
            duration: 2000,
            easing: Easing.linear,// 线性的渐变函数
        }).start();
    }
    componentDidMount() {
        this.startAnimation();
    }
  }
  AppRegistry.registerComponent('Demo8', () = >Demo8);

  

插值函数：
将输入值范围转换为输出值范围，如下：将0-1数值转换为0deg-360deg角度，旋转View时你会用到

//其中，transform是一个变换数组，常用的有scale, scaleX, scaleY, translateX, translateY, rotate, rotateX, rotateY, rotateZ：
...
transform: [  // scale, scaleX, scaleY, translateX, translateY, rotate, rotateX, rotateY, rotateZ
    {scale: this.state.bounceValue},  // 缩放
    {rotate: this.state.rotateValue.interpolate({ // 旋转，使用插值函数做值映射
        inputRange: [0, 1],
        outputRange: ['0deg', '360deg']})},
    {translateX: this.state.translateValue.x}, // x轴移动
    {translateY: this.state.translateValue.y}, // y轴移动
],
...
this.state.rotateValue.interpolate({ // 旋转，使用插值函数做值映射
        inputRange: [0, 1],
        outputRange: ['0deg', '360deg']})

组合动画：

• parallel：同时执行
• sequence：顺序执行
• stagger：错峰，其实就是插入了delay的parrllel
• delay：组合动画之间的延迟方法，严格来讲，不算是组合动画

监听当前的动画值：
addListener(callback)：动画执行过程中的值
stopAnimation(callback)：动画执行结束时的值
监听AnimatedValueXY类型translateValue的值变化：

this.state.translateValue.addListener((value) => { 
　　console.log("translateValue=>x:" + value.x + " y:" + value.y);
});
this.state.translateValue.stopAnimation((value) => { 
　　console.log("translateValue=>x:" + value.x + " y:" + value.y);
});

 监听AnimatedValue类型rotateValue的值变化：

this.state.rotateValue.addListener((state) => { 
　　console.log("rotateValue=>" + state.value);
});
this.state.rotateValue.stopAnimation((state) => { 
　　console.log("rotateValue=>" + state.value);
});

让我们来看一个示例：图片首先缩小80%，2秒之后，旋转360度，之后沿着X轴与Y轴交叉方向向右下角移动一段距离，最后消失变成全透明

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

class DomeTwo extends Component {
    // 构造
    constructor(props) {
        super(props);
        // 初始状态
        this.state = {
            bounceValue: new Animated.Value(0),
            rotateValue: new Animated.Value(0),
            translateValue: new Animated.ValueXY({x:0, y:0}), // 二维坐标
            fadeOutOpacity: new Animated.Value(0),
        };
    }

    render() {
        return (
            <Animated.View                         // 可选的基本组件类型: Image, Text, View(可以包裹任意子View)
                style={{
                  flex: 1,
                  alignItems: 'center',
                  justifyContent: 'center',
                  transform: [  // scale, scaleX, scaleY, translateX, translateY, rotate, rotateX, rotateY, rotateZ
                    {scale: this.state.bounceValue},  // 缩放
                    {rotate: this.state.rotateValue.interpolate({ // 旋转，使用插值函数做值映射
                            inputRange: [0, 1],
                            outputRange: ['0deg', '360deg'],
                        })
                    },
                    {translateX: this.state.translateValue.x}, // x轴移动
                    {translateY: this.state.translateValue.y}, // y轴移动
                  ],
                  opacity: this.state.fadeOutOpacity, // 透明度
                }}>
                <Image
                    source={{uri: 'http://i.imgur.com/XMKOH81.jpg'}}
                    style={{ 400, height: 400}}
                />
            </Animated.View>
    );
    }

    startAnimation(){
        this.state.bounceValue.setValue(1.5);     // 设置一个较大的初始值
        this.state.rotateValue.setValue(0);
        this.state.translateValue.setValue({x:0, y:0});
        this.state.fadeOutOpacity.setValue(1);

        Animated.sequence(
            [
                Animated.sequence([  //  组合动画 parallel（同时执行）、sequence（顺序执行）、stagger（错峰，其实就是插入了delay的parrllel）和delay（延迟）
                    Animated.spring( //  基础的单次弹跳物理模型
                        this.state.bounceValue,
                        {
                            toValue: 0.8,
                            friction: 1, // 摩擦力，默认为7.
                            tension: 40, // 张力，默认40。
                        }
                    ),
                    Animated.delay(2000), // 配合sequence，延迟2秒
                    Animated.timing( // 从时间范围映射到渐变的值。
                        this.state.rotateValue,
                        {
                            toValue: 1,
                            duration: 800, // 动画持续的时间（单位是毫秒），默认为500
                            easing: Easing.out(Easing.quad), // 一个用于定义曲线的渐变函数
                            delay: 0, // 在一段时间之后开始动画（单位是毫秒），默认为0。
                        }
                    ),
                    Animated.decay( // 以一个初始速度开始并且逐渐减慢停止。  S=vt-（at^2）/2   v=v - at
                        this.state.translateValue,
                        {
                            velocity: 10, // 起始速度，必填参数。
                            deceleration: 0.8, // 速度衰减比例，默认为0.997。
                        }
                    ),

                ]),
                Animated.timing(
                    this.state.fadeOutOpacity,
                    {
                        toValue: 0,
                        duration: 2000,
                        easing: Easing.linear, // 线性的渐变函数
                    }
                ),
            ]
        ).start(() => this.startAnimation()); // 循环执行动画

        // 监听值的变化
        this.state.rotateValue.addListener((state) => {
            console.log("rotateValue=>" + state.value);
        });

        // ValueXY
        this.state.translateValue.addListener((value) => {
            console.log("translateValue=>x:" + value.x + " y:" + value.y);
        });

        this.state.fadeOutOpacity.addListener((state) => {
            console.log("fadeOutOpacity=>" + state.value);
        });
    }

    componentDidMount() {
        this.startAnimation();
    }
}
export default DomeTwo;

原文：http://www.jianshu.com/p/2532c0e99c85