ReactNative Animated动画详解 -- iOS开发 -- IT技术博客大学习 -- 共学习共进步！

您现在的位置：首页 --> iOS开发 --> ReactNative Animated动画详解

ReactNative Animated动画详解

浏览:3147次出处信息

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

使用篇

举个简单的栗子

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
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的动画，可以按照以下步骤进行。

使用基本的Animated组件，如Animated.View Animated.Image Animated.Text (重要！不加Animated的后果就是一个看不懂的报错，然后查半天动画参数，最后怀疑人生)
使用Animated.Value设定一个或多个初始化值(透明度，位置等等)。
将初始化值绑定到动画目标的属性上(如style)
通过Animated.timing等函数设定动画参数
调用start启动动画。

栗子敢再复杂一点吗？

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

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

建议继续学习：

QQ技术交流群：445447336，欢迎加入！
扫一扫订阅我的微信号：IT技术博客大学习

<< 前一篇：基于HTTP缓存轻松实现客户端应用的离线支持及网络优化

后一篇：一张图帮你看懂 iPhone 的屏幕分辨率 >>

文章信息

作者：TAT.will 来源：腾讯AlloyTeam
标签： Animated ReactNative 动画
发布时间：2016-03-24 16:42:03

建议继续学习

近3天十大热文