ReactNative Animated动画详解

最近ReactNative(以下简称RN)在前端的热度越来越高，不少同学开始在业务中尝试使用RN，这里着重介绍一下RN中动画的使用与实现原理。

使用篇

举个简单的栗子

varReact=require('react-native');
var{
    Animated,
    Easing,
    View,
    StyleSheet,
    Text
}=React;

varDemo=React.createClass({
    getInitialState(){
        return{
            fadeInOpacity:newAnimated.Value(0)// 初始值
        };
    },
    componentDidMount(){
        Animated.timing(this.state.fadeInOpacity,{
            toValue:1,// 目标值
            duration:2500,// 动画时间
            easing:Easing.linear// 缓动函数
        }).start();
    },
    render(){
        return(
            <Animated.View style={[styles.demo,{
                    opacity:this.state.fadeInOpacity
                }]}>
                <Textstyle={styles.text}>悄悄的，我出现了</Text>
            </Animated.View>
        );
    }
});

varstyles=StyleSheet.create({
    demo:{
        flex:1,
        alignItems:'center',
        justifyContent:'center',
        backgroundColor:'white',
    },
    text:{
        fontSize:30
    }
});

是不是很简单易懂<(▰˘◡˘▰)> 和JQuery的Animation用法很类似。

步骤拆解

一个RN的动画，可以按照以下步骤进行。

1. 使用基本的Animated组件，如Animated.View Animated.Image Animated.Text (重要！不加Animated的后果就是一个看不懂的报错，然后查半天动画参数，最后怀疑人生)

2. 使用Animated.Value设定一个或多个初始化值(透明度，位置等等)。

3. 将初始化值绑定到动画目标的属性上(如style)

4. 通过Animated.timing等函数设定动画参数

5. 调用start启动动画。

栗子敢再复杂一点吗？

显然，一个简单的渐显是无法满足各位观众老爷们的好奇心的.

不过更多详情，请见原文：http://www.alloyteam.com/2016/01/reactnative-animated/