码迷,mamicode.com
首页 > 其他好文 > 详细

React Native动画-Animated

时间:2017-12-10 01:30:31      阅读:209      评论:0      收藏:0      [点我收藏+]

标签:模型   uri   near   mat   parallel   eval   image   render   justify   

动画类型:

  • 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 = {{width: 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={{width: 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

React Native动画-Animated

标签:模型   uri   near   mat   parallel   eval   image   render   justify   

原文地址:http://www.cnblogs.com/chenzxl/p/8013117.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!