最近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 |
var React = require('react-native'); var { Animated, Easing, View, StyleSheet, Text } = React; var Demo = React.createClass({ getInitialState() { return { fadeInOpacity: new Animated.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 }]}> <Text style={styles.text}>悄悄的，我出现了</Text> </Animated.View> ); } }); var styles = 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启动动画。
栗子敢再复杂一点吗？
显然，一个简单的渐显是无法满足各位观众老爷们的好奇心的.我们试一试加上多个动画
|
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 |
getInitialState() { return ( fadeInOpacity: new Animated.Value(0), rotation: new Animated.Value(0), fontSize: new Animated.Value(0) ); }, componentDidMount() { var timing = Animated.timing; Animated.parallel(['fadeInOpacity', 'rotation', 'fontSize'].map(property => { return timing(this.state[property], { toValue: 1, duration: 1000, easing: Easing.linear }); })).start(); }， render() { ass="crayon-line" id="crayon-581298fb17753107415786-17">}， render() { 747575069407" class="crayon-syntax crayon-theme-github crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-always" style=" margin-top: 12px; margin-bottom: 12px; font-size: 13px !important; line-height: 15px !important;">
是不是很简单易懂<(▰˘◡˘▰)> 和JQuery的Animation用法很类似。 步骤拆解一个RN的动画，可以按照以下步骤进行。
栗子敢再复杂一点吗？显然，一个简单的渐显是无法满足各位观众老爷们的好奇心的.我们试一试加上多个动画
|
