19.React Native动画Animated效果三种动画类型二；

目录

 

1.介绍

2.Animated.decay()

2.1方法

2.1.1value参数值

2.1.2config参数有以下这些属性：

2.2示例-执行缩放

2.2.1初始化缩放值

2.2.2绑定缩放值

2.2.3定义执行动画类型并调用start()启动

2.2.4完整示例

3.Animated.spring()

3.1方法

3.1.1value参数值：

3.1.2config 参数有以下这些属性：

3.2示例-实现沿着x，y移动

3.2.1初始化x，y轴坐标

3.2.2绑定style的x和y值

3.2.3定义执行动画

3.2.4完整示例

4.Animated.timing()

4.1方法

4.1.1value参数值：

4.1.2config 参数有以下这些属性：

4.2示例-实现沿着x，y移动

4.2.1初始化x，y轴坐标

4.2.2绑定style的x和y值

4.2.3定义执行动画

4.2.4完整示例

5.Animated.View组件style支持的transform属性说明

---

1.介绍

Animated提供了三种动画类型。每种动画类型都提供了特定的函数曲线，用于控制动画值从初始值变化到最终值的变化过程：

Animated.decay()以指定的初始速度开始变化，然后变化速度越来越慢直至停下。
Animated.spring()提供了一个简单的弹簧物理模型.
Animated.timing()使用easing 函数让数值随时间动起来。
大多数情况下你应该使用timing()。默认情况下，它使用对称的 easeInOut 曲线，将对象逐渐加速到全速，然后通过逐渐减速停止结束。

2.Animated.decay()

推动一个值以一个初始的速度和一个衰减系数逐渐变为 0。

2.1方法

static decay(value, config)

2.1.1value参数值

value:new Animated.Value(0)可以是单个值初始值；

 value:new Animated.ValueXY({x:0, y:0})二位向量x和y坐标

2.1.2config参数有以下这些属性：

如果下面的方法参数是二维向量值 ValueXY 而不是单一标量值 Value，则对应的配置参数 config 也应该是二维向量形式{x: ..., y: ...}。

velocity: 初始速度。必填。
deceleration: 衰减系数。默认值 0.997。
isInteraction: 指定本动画是否在InteractionManager的队列中注册以影响其任务调度。默认值为 true。
useNativeDriver: 启用原生动画驱动。默认不启用(false)。

2.2示例-执行缩放

2.2.1初始化缩放值

state = {
        bounceValue:new  Animated.Value(0)
        // translateValue:new Animated.ValueXY({x:0,y:0})
    };

2.2.2绑定缩放值

{scale:this.state.bounceValue}

render(){
        // let {fadeAnim} = this.state;

        //使用专门的可动画化的View组件
        return (<Animated.View
            style={
  {
                ...this.props.style,
                // opacity:fadeAnim
                transform:[
                    {scale:this.state.bounceValue}
                    // {translateX:this.state.translateValue.x},
                    // {translateY:this.state.translateValue.y}
                ]
            }}>
            {this.props.children}
        </Animated.View>);
    }

2.2.3定义执行动画类型并调用start()启动

executionAnimated(){
        Animated.decay(                  // 随时间变化而执行动画
            this.state.bounceValue,
            // this.state.translateValue,
            {
                velocity:0.2,          //初始速度。必填。  
                deceleration:0.05//默认值，0.997,
            }
        ).start();
    }

2.2.4完整示例

import React from 'react';
import {Animated, Text, View,
     TouchableOpacity} from 'react-native';

class FadeView extends React.Component{
    state = {
        bounceValue:new  Animated.Value(0)  //初始值
        // translateValue:new Animated.ValueXY({x:0,y:0})
    };


    componentDidMount() {
    }

    executionAnimated(){
        Animated.decay(                  //推动一个值以一个初始的速度和一个衰减系数逐渐变为 0。
            this.state.bounceValue,
            // this.state.translateValue,
            {
                velocity:0.2,   //初始速度，必填
                deceleration:0.05//衰减系数。默认值 0.997。
            }
        ).start();
    }

    render(){
        // let {fadeAnim} = this.state;

        //使用专门的可动画化的View组件
        return (<Animated.View
            style={
  {
                ...this.props.style,
                // opacity:fadeAnim
                transform:[
                    {scale:this.state.bounceValue}  //绑定缩放值
                    // {translateX:this.state.translateValue.x},
                    // {translateY:this.state.translateValue.y}
                ]
            }}>
            {this.props.children}
        </Animated.View>);
    }
}

// 然后你就可以在组件中像使用`View`那样去使用`FadeInView`了
export default class MainFadeView3 extends React.Component{
    render(){
        return (<View style={
  {flex:1, alignItems:'center',
        justifyContent:'center