19.React Native动画效果一；

 

目录

 

1.Animated动画的基本使用过程

1.1创建透明度的初始值（也可以创建其他属性的初始值）

1.2绑定透明的值到样式（style）的opacity属性上

1.3.设置动画执行效果并启动动画

1.4.启动动画

1.5.完整示例代码

---

1.Animated动画的基本使用过程

1.1创建透明度的初始值（也可以创建其他属性的初始值）

通过Animated.Value()创建透明度的初始值，Animated.Value可以绑定到样式或是其他属性上(例如：透明度，位置)，也可以进行插值运算。单个Animated.Value可以用在任意多个属性上。

Animated提供了两种类型的值，一般用户创建指定属性动画的初始值：

Animated.Value()用于单个值，绑定到样式或是其他属性上；
Animated.ValueXY()用于矢量值，例如涉及x轴或者y轴移动时，需要初始化x轴和y轴，设置x和y的初始值；

constructor(props){
        super(props);
        this.state = {
            fadeAnim:new Animated.Value(0), //透明度初始值
        };
    }

1.2绑定透明的值到样式（style）的opacity属性上

绑定透明的值到样式（style）的opacity属性上，需要使用动画组件，Animated仅封装了四个可以动画化的组件：View、Text、Image和ScrollView，不过你也可以使用Animated.createAnimatedComponent()来封装你自己的组件；大部分情况下我们只需要将显示动画效果放在Animated.View上设置，通过Animated.View包裹要显示的组件即可实现相应的动画效果；

 let {fadeAnim} = this.state;
        return (
            
                {this.props.children}
            
        );

1.3.设置动画执行效果并启动动画

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

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

本示例中使用了timing动画类型；

1.4.启动动画

调用start()方法启动动画：

Animated.timing().start(); // 开始执行动画

componentDidMount() {
        Animated.timing(                  // 随时间变化而执行动画
            this.state.fadeAnim,            // 动画中的变量值
            {
                toValue: 1,                   // 透明度最终变为1，即完全不透明
                duration: 10000,              // 让动画持续一段时间
            }
        ).start();                        // 开始执行动画
    }

1.5.完整示例代码

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

class SonFadeInView extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            fadeAnim:new Animated.Value(0), //透明度初始值
        };
    }

    componentDidMount() {
        Animated.timing(                  // 随时间变化而执行动画
            this.state.fadeAnim,            // 动画中的变量值
            {
                toValue: 1,                   // 透明度最终变为1，即完全不透明
                duration: 10000,              // 让动画持续一段时间
            }
        ).start();                        // 开始执行动画
    }

    render(){
        let {fadeAnim} = this.state;
        return (
            
                {this.props.children}
            
        );
    }
}

// 然后你就可以在组件中像使用`View`那样去使用`FadeInView`了
export default class MainFadeView extends React.Component{
    render(){
        return(
            
                
                    
                        Fading in
                    
                
            
        );
    }
}