[align=center]
[/align]
[size=;font-size:10.5000pt,10.5000pt][font=Calibri]本次文章的题目为《[font=Calibri]ReactNative[/font][font=宋体]动画研究与实践》，既然叫研究，那我们就争取一次将[/font][font=Calibri]RN[/font][font=宋体]动画相关的内容都说清楚，提出问题[/font][font=Calibri]-[/font][font=宋体]论证问题[/font][font=Calibri]-[/font][font=宋体]解决问题的方式来研究。[/font][font=Calibri]RN[/font][font=宋体]动画之前在[/font][font=Calibri]work[/font][font=宋体]上面写过一次，不过感觉写得不是很好，本次重新捋一次思路重写整理下分享给大家。[/font][/font][/size][size=;font-size:10.5000pt,10.5000pt][font=Calibri][/font][/size]
[size=;font-size:10.5000pt,10.5000pt][font=Calibri]问题[/font][/size][size=;font-size:10.5000pt,10.5000pt][font=Calibri][/font][/size]
[size=;font-size:10.5000pt,10.5000pt][font=Calibri]ReactNative[font=宋体]动画支持的怎么样[/font][font=Calibri]?[/font][/font][/size][size=;font-size:10.5000pt,10.5000pt][font=Calibri][/font][/size]
[size=;font-size:10.5000pt,10.5000pt][font=Calibri]ReactNative[font=宋体]的动画使用起来方便吗？[/font][/font][/size][size=;font-size:10.5000pt,10.5000pt][font=Calibri][/font][/size]
[size=;font-size:10.5000pt,10.5000pt][font=Calibri]ReactNative[font=宋体]动画的性能和[/font][font=Calibri]H5[/font][font=宋体]性能相比怎么样？[/font][/font][/size][size=;font-size:10.5000pt,10.5000pt][font=Calibri][/font][/size]
[size=;font-size:10.5000pt,10.5000pt][font=Calibri]ReactNative[font=宋体]动画的综合表现如何？[/font][/font][/size][size=;font-size:10.5000pt,10.5000pt][font=Calibri][/font][/size]
[size=;font-size:10.5000pt,10.5000pt][font=Calibri]RN[font=宋体]动画支持：[/font][/font][/size][size=;font-size:10.5000pt,10.5000pt][font=Calibri][/font][/size]
[attachment=370418][size=;font-size:10.5000pt,10.5000pt][font=Calibri] [/font][/size]
[size=;font-size:10.5000pt,10.5000pt][font=Calibri]从上面的[font=Calibri]MineNode[/font][font=宋体]我们可以看出[/font][font=Calibri]RN[/font][font=宋体]中有[/font][font=Calibri]3[/font][font=宋体]个地方可以使用动画：[/font][/font][/size][size=;font-size:10.5000pt,10.5000pt][font=Calibri][/font][/size]
[size=;font-size:10.5000pt,10.5000pt][font=Calibri]用于创建更精细的交互控制的动画[font=Calibri]Animated[/font][font=宋体]；[/font][/font][/size][size=;font-size:10.5000pt,10.5000pt][font=Calibri][/font][/size]
[size=;font-size:10.5000pt,10.5000pt][font=Calibri]用于全局的布局动画[font=Calibri]LayoutAnimation[/font][font=宋体]；[/font][/font][/size][size=;font-size:10.5000pt,10.5000pt][font=Calibri][/font][/size]
[size=;font-size:10.5000pt,10.5000pt][font=Calibri]用于构建[font=Calibri]Navigator[/font][font=宋体]不同页面切换的动画；[/font][/font][/size][size=;font-size:10.5000pt,10.5000pt][font=Calibri][/font][/size]
[size=;font-size:10.5000pt,10.5000pt][font=Calibri]此篇文章主要是讲[font=Calibri]Animated[/font][font=宋体]相关的内容，平时动画中用得最多的也是它，其他两个通过文档可以很容易的使用。[/font][/font][/size][size=;font-size:10.5000pt,10.5000pt][font=Calibri][/font][/size]
[size=;font-size:10.5000pt,10.5000pt][font=Calibri]RN[font=宋体]动画的使用[/font][/font][/size][size=;font-size:10.5000pt,10.5000pt][font=Calibri][/font][/size]
[size=;font-size:10.5000pt,10.5000pt][font=Calibri]一个明天不上班的的动画实现，同时从小变大并且旋转，我们可以从注释中看到[font=Calibri]RN[/font][font=宋体]动画的实现步骤，代码如下：[/font][/font][/size][size=;font-size:10.5000pt,10.5000pt][font=Calibri][/font][/size]
[size=;font-size:10.5000pt,10.5000pt][font=Calibri]import React, { Component } from 'react'; import { AppRegistry, StyleSheet, Text, View, Animated, //[font=宋体]使用[/font][font=Calibri]Animated[/font][font=宋体]组件[/font][font=Calibri] Easing, //[/font][font=宋体]引入[/font][font=Calibri]Easing[/font][font=宋体]渐变函数[/font][font=Calibri] } from 'react-native'; classReactNativeDemo extends Component { constructor(props:any) { super(props); //[/font][font=宋体]使用[/font][font=Calibri]Animated.Value[/font][font=宋体]设定初始化值（缩放度，角度等等）[/font][font=Calibri] this.state = { bounceValue: newAnimated.Value( 0), rotateValue: new Animated.Value( 0), }; } componentDidMount() { //[/font][font=宋体]在初始化渲染执行之后立刻调用动画执行函数[/font][font=Calibri] this.startAnimation(); } startAnimation() {this.state.bounceValue.setValue( 0); this.state.rotateValue.setValue( 0); Animated.parallel([ //[/font][font=宋体]通过[/font][font=Calibri]Animated.spring[/font][font=宋体]等函数设定动画参数[/font][font=Calibri] //[/font][font=宋体]可选的基本动画类型[/font][font=Calibri]: spring, decay, timingAnimated.spring( this.state.bounceValue, { toValue: 3, //[/font][font=宋体]变化目标值[/font][font=Calibri] friction: 20, //friction [/font][font=宋体]摩擦系数，默认[/font][font=Calibri]40 }), Animated.timing( this.state.rotateValue, { toValue: 1, duration: 800, easing: Easing.out(Easing.quad), }), //[/font][font=宋体]调用[/font][font=Calibri]start[/font][font=宋体]启动动画[/font][font=Calibri],start[/font][font=宋体]可以回调一个函数[/font][font=Calibri],[/font][font=宋体]从而实现动画循环[/font][font=Calibri]]).start(()=> this.startAnimation()); } render() { return ( <View style={styles.container}><Animated.Image source={{uri:'https://gw.alicdn.com/tfs/TB1Z9wRKXXXXXblXVXXXXXXXXXX-228-221.jpg'}} style={{width: 100,height: 100,transform: [ //[/font][font=宋体]将初始化值绑定到动画目标的[/font][font=Calibri]style[/font][font=宋体]属性上 [/font][font=Calibri]{scale:this.state.bounceValue}, //[/font][font=宋体]使用[/font][font=Calibri]interpolate[/font][font=宋体]插值函数[/font][font=Calibri],[/font][font=宋体]实现了从数值单位的映射转换 [/font][font=Calibri]{rotateZ:this.state.rotateValue.interpolate({ inputRange: [0,1], outputRange: ['0deg', '360deg'], })}, }}>Animated.Image> View> ); } } const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', } }); AppRegistry.registerComponent('ReactNativeDemo', () => ReactNativeDemo);[/font][/font][/size][size=;font-size:10.5000pt,10.5000pt][font=Calibri][/font][/size]
[size=;font-size:10.5000pt,10.5000pt][font=Calibri]从上面[font=Calibri]demo[/font][font=宋体]可以看出，动画的使用逻辑还算清晰，虽然比不上[/font][font=Calibri]css3[/font][font=宋体]动画编写简单，同时不需要二次分装，直接向上面使用即可。[/font][/font][/size][size=;font-size:10.5000pt,10.5000pt][font=Calibri][/font][/size]
[size=;font-size:10.5000pt,10.5000pt][font=Calibri]具体的效果是这样：[/font][/size][size=;font-size:10.5000pt,10.5000pt][font=Calibri][/font][/size]
[size=;font-size:10.5000pt,10.5000pt][font=Calibri]RN[font=宋体]动画和[/font][font=Calibri]H5[/font][font=宋体]动画对比[/font][/font][/size][size=;font-size:10.5000pt,10.5000pt][font=Calibri][/font][/size]
[size=;font-size:10.5000pt,10.5000pt][font=Calibri]RN[font=宋体]中的的动画均为 [/font][font=Calibri]JavaScript [/font][font=宋体]动画，即通过 [/font][font=Calibri]JavaScript [/font][font=宋体]代码控制图像的各种参数值的变化，从而产生时间轴上的动画效果。 [/font][font=Calibri]RN[/font][font=宋体]通过封装一个[/font][font=Calibri]Animated[/font][font=宋体]的元素，内部通过数据绑定和[/font][font=Calibri]DOM[/font][font=宋体]操作变更元素，结合[/font][font=Calibri]React[/font][font=宋体]的生命周期完善内存管理，解决条件竞争问题，对外表现则与原生组件相同，实现了高效流畅的动画效果。[/font][/font][/size][size=;font-size:10.5000pt,10.5000pt][font=Calibri][/font][/size]
[size=;font-size:10.5000pt,10.5000pt][font=Calibri]CSS3[font=宋体]动画[/font][font=Calibri]vs ReactNative[/font][font=宋体]动画录制[/font][font=Calibri]:[/font][/font][/size][size=;font-size:10.5000pt,10.5000pt][font=Calibri][/font][/size]
[size=;font-size:10.5000pt,10.5000pt][font=Calibri]上述动画[font=Calibri]css3[/font][font=宋体]使用[/font][font=Calibri]animation: rotate 0.2s linear infinite;[/font][font=宋体]实现[/font][font=Calibri]:[/font][/font][/size][size=;font-size:10.5000pt,10.5000pt][font=Calibri][/font][/size]
[attachment=370419][size=;font-size:12.0000pt,12.0000pt][font=宋体] [/font][/size]
[size=;font-size:10.5000pt,10.5000pt][font=Calibri]RN[font=宋体]采用如下实现：[/font][/font][/size]
[attachment=370420][size=;font-size:10.5000pt,10.5000pt][font=Calibri] [/font][/size]
[size=;font-size:10.5000pt,10.5000pt][font=Calibri] [/font][/size]
[size=;font-size:10.5000pt,10.5000pt][font=Calibri]关于性能测试都采用[font=Calibri]instruments[/font][font=宋体]来测试[/font][font=Calibri]Time Profiler[/font][font=宋体]数据[/font][font=Calibri],[/font][font=宋体]其中红线是动画开始时候，从图中可以看出两者消耗都低，但是[/font][font=Calibri]css3[/font][font=宋体]动画的性能稍微优于[/font][font=Calibri]RN[/font][font=宋体]的动画。[/font][/font][/size]
[attachment=370421][size=;font-size:10.5000pt,10.5000pt][font=Calibri] [/font][/size]
[size=;font-size:10.5000pt,10.5000pt][font=Calibri]综合 [font=Calibri]React Native[/font][font=宋体]的动画支持度还是很广[/font][font=Calibri]:[/font][/font][/size][size=;font-size:10.5000pt,10.5000pt][font=Calibri][/font][/size]
[size=;font-size:10.5000pt,10.5000pt][font=Calibri]CSS3[font=宋体]可以实现的动画[/font][font=Calibri]RN[/font][font=宋体]基本上可以实现，同时还包装了很多类似语法糖的东西，譬如[/font][font=Calibri]3[/font][font=宋体]种动画类型（[/font][font=Calibri]spring[/font][font=宋体]、[/font][font=Calibri]decay[/font][font=宋体]、[/font][font=Calibri]timing[/font][font=宋体]），[/font][font=Calibri]Interpolation[/font][font=宋体]插值函数、[/font][font=Calibri]4[/font][font=宋体]种动画组合（同时、顺序、错峰、延迟）、动画执行回调、跟踪动态值、[/font][font=Calibri]Animated.event[/font][font=宋体]输入事件、响应当前的动画值、等功能[/font][font=Calibri];[/font][/font][/size][size=;font-size:10.5000pt,10.5000pt][font=Calibri][/font][/size]
[size=;font-size:10.5000pt,10.5000pt][font=Calibri]关于[font=Calibri]React Native [/font][font=宋体]支持的[/font][font=Calibri]Easing[/font][font=宋体]类型可以到源码中去找符合自己项目需求的动画类型，[/font][font=Calibri]Easing.js;[/font][/font][/size][size=;font-size:10.5000pt,10.5000pt][font=Calibri][/font][/size]
[size=;font-size:10.5000pt,10.5000pt][font=Calibri]Navigator[font=宋体]页面切换的动画也很丰富，我们可以从上面的[/font][font=Calibri]mindNode[/font][font=宋体]找到所支持的切换动画，同样也可以从源码中找到它支持的类型，[/font][font=Calibri]NavigatorSceneConfigs.js;[/font][/font][/size][size=;font-size:10.5000pt,10.5000pt][font=Calibri][/font][/size]
[size=;font-size:10.5000pt,10.5000pt][font=Calibri]对于特别复杂的动画，可以使用[font=Calibri]react-native-animatable[/font][font=宋体]补充多余的动画类型[/font][font=Calibri];[/font][/font][/size][size=;font-size:10.5000pt,10.5000pt][font=Calibri][/font][/size]
[size=;font-size:10.5000pt,10.5000pt][font=Calibri]对于有些组件的动画，譬如数据图表的绘制，建议直接使用[font=Calibri]RN[/font][font=宋体]绘图库[/font][font=Calibri]ART[/font][font=宋体]实现[/font][font=Calibri],react-native-svgkit;[/font][/font][/size][size=;font-size:10.5000pt,10.5000pt][font=Calibri][/font][/size]
[size=;font-size:10.5000pt,10.5000pt][font=Calibri]React Native[font=宋体]编写使用起来也很有方便，具有逻辑性：[/font][/font][/size][size=;font-size:10.5000pt,10.5000pt][font=Calibri][/font][/size]
[size=;font-size:10.5000pt,10.5000pt][font=Calibri]·[/font][/size][size=;font-size:10.5000pt,10.5000pt][font=宋体] [/font][/size][size=;font-size:10.5000pt,10.5000pt][font=Calibri]使用基本的[font=Calibri]Animated[/font][font=宋体]组件，如[/font][font=Calibri]Animated.View[/font][font=宋体]、[/font][font=Calibri]Animated.Image[/font][font=宋体]、[/font][font=Calibri]Animated.Text[/font][font=宋体]和其他（使用[/font][font=Calibri]AnimatedImplementation[/font][font=宋体]来包装）[/font][font=Calibri];[/font][/font][/size][size=;font-size:10.5000pt,10.5000pt][font=Calibri][/font][/size]
[size=;font-size:10.5000pt,10.5000pt][font=Calibri]·[/font][/size][size=;font-size:10.5000pt,10.5000pt][font=宋体] [/font][/size][size=;font-size:10.5000pt,10.5000pt][font=Calibri]使用[font=Calibri]Animated.Value[/font][font=宋体]设定一个或多个初始化值[/font][font=Calibri],[/font][font=宋体]如位置属性、透明属性、角度属性等[/font][font=Calibri];[/font][/font][/size][size=;font-size:10.5000pt,10.5000pt][font=Calibri][/font][/size]
[size=;font-size:10.5000pt,10.5000pt][font=Calibri]·[/font][/size][size=;font-size:10.5000pt,10.5000pt][font=宋体] [/font][/size][size=;font-size:10.5000pt,10.5000pt][font=Calibri]将初始化值绑定到动画目标的属性上，如[font=Calibri]style;[/font][/font][/size][size=;font-size:10.5000pt,10.5000pt][font=Calibri][/font][/size]
[size=;font-size:10.5000pt,10.5000pt][font=Calibri]·[/font][/size][size=;font-size:10.5000pt,10.5000pt][font=宋体] [/font][/size][size=;font-size:10.5000pt,10.5000pt][font=Calibri]通过动画类型[font=Calibri]Api[/font][font=宋体]设定动画参数，如[/font][font=Calibri]spring[/font][font=宋体]、[/font][font=Calibri]decay[/font][font=宋体]、[/font][font=Calibri]timing[/font][font=宋体]三种动画类型[/font][font=Calibri];[/font][/font][/size][size=;font-size:10.5000pt,10.5000pt][font=Calibri][/font][/size]
[size=;font-size:10.5000pt,10.5000pt][font=Calibri]·[/font][/size][size=;font-size:10.5000pt,10.5000pt][font=宋体] [/font][/size][size=;font-size:10.5000pt,10.5000pt][font=Calibri]调用[font=Calibri]start[/font][font=宋体]启动动画，同时可以在[/font][font=Calibri]start[/font][font=宋体]里面回调相关功能[/font][font=Calibri];[/font][/font][/size][size=;font-size:10.5000pt,10.5000pt][font=Calibri][/font][/size]
[size=;font-size:10.5000pt,10.5000pt][font=Calibri]React Native[font=宋体]动画性能没有那么差，或者说比想象中要好[/font][font=Calibri]:[/font][/font][/size][size=;font-size:10.5000pt,10.5000pt][font=Calibri][/font][/size]
[size=;font-size:10.5000pt,10.5000pt][font=Calibri]for Animated[font=宋体]：[/font][/font][/size][size=;font-size:10.5000pt,10.5000pt][font=Calibri][/font][/size]
[size=;font-size:10.5000pt,10.5000pt][font=Calibri]通过封装一个[font=Calibri]Animated[/font][font=宋体]的元素[/font][font=Calibri];[/font][/font][/size][size=;font-size:10.5000pt,10.5000pt][font=Calibri][/font][/size]
[size=;font-size:10.5000pt,10.5000pt][font=Calibri]内部通过数据绑定和[font=Calibri]DOM[/font][font=宋体]操作变更元素[/font][font=Calibri];[/font][/font][/size][size=;font-size:10.5000pt,10.5000pt][font=Calibri][/font][/size]
[size=;font-size:10.5000pt,10.5000pt][font=Calibri]结合[font=Calibri]React[/font][font=宋体]的生命周期完善内存管理，解决条件竞争问题[/font][font=Calibri];[/font][/font][/size][size=;font-size:10.5000pt,10.5000pt][font=Calibri][/font][/size]
[size=;font-size:10.5000pt,10.5000pt][font=Calibri]对外表现则与原生组件相同，实现了高效流畅的动画效果[font=Calibri];[/font][/font][/size][size=;font-size:10.5000pt,10.5000pt][font=Calibri][/font][/size]
[size=;font-size:10.5000pt,10.5000pt][font=Calibri]For Navigator[font=宋体]页面切换动画不流畅：[/font][/font][/size][size=;font-size:10.5000pt,10.5000pt][font=Calibri][/font][/size]
[size=;font-size:10.5000pt,10.5000pt][font=Calibri]使用[font=Calibri]InteractionManager[/font][font=宋体]在转场动画的过程中，使新页面只渲染必要的少量的内容。[/font][/font][/size][size=;font-size:10.5000pt,10.5000pt][font=Calibri][/font][/size]
[size=;font-size:10.5000pt,10.5000pt][font=Calibri]InteractionManager.runAfterInteractions[font=宋体]只有一个函数类型的参数，当转场动画结束，这个回调函数就会被触发[/font][font=Calibri]([/font][font=宋体]所有基于[/font][font=Calibri]AnimatedAPI[/font][font=宋体]的动画都会触发[/font][font=Calibri]InteractionManager.runAfterInteractions)[/font][font=宋体]。[/font][/font][/size][size=;font-size:10.5000pt,10.5000pt][font=Calibri][/font][/size]
[size=;font-size:10.5000pt,10.5000pt][font=Calibri]参考[/font][/size][size=;font-size:10.5000pt,10.5000pt][font=Calibri][/font][/size]
[size=;font-size:10.5000pt,10.5000pt][font=Calibri]https://facebook.github.io/react-native/docs/animations.html#content[/font][/size][size=;font-size:10.5000pt,10.5000pt][font=Calibri][/font][/size]
[size=;font-size:10.5000pt,10.5000pt][font=Calibri]https://facebook.github.io/react-native/docs/navigator.html#content[/font][/size][size=;font-size:10.5000pt,10.5000pt][font=Calibri][/font][/size]
[size=;font-size:10.5000pt,10.5000pt][font=Calibri]https://facebook.github.io/react-native/docs/layoutanimation.html#content[/font][/size][size=;font-size:10.5000pt,10.5000pt][font=Calibri][/font][/size]
[size=;font-size:10.5000pt,10.5000pt][font=Calibri]ReactNative Animated[font=宋体]动画详解 [/font][font=Calibri]- Web[/font][font=宋体]前端腾讯[/font][font=Calibri]AlloyTeamBlog[/font][/font][/size][size=;font-size:10.5000pt,10.5000pt][font=Calibri][/font][/size]
[size=;font-size:10.5000pt,10.5000pt][font=Calibri]react-native-animation-book[/font][/size][size=;font-size:10.5000pt,10.5000pt][font=Calibri][/font][/size]
[size=;font-size:10.5000pt,10.5000pt][font=Calibri] [/font][/size]
[size=;font-size:10.5000pt,10.5000pt][font=宋体]----------------------------------------------------------------------[/font][/size][size=;font-size:10.5000pt,10.5000pt][font=宋体][/font][/size]
[size=;font-size:10.5000pt,10.5000pt][font=宋体]最后再附上几篇[font=Calibri]React[/font][font=宋体]技术栈的文章，希望能和大家一起学习交流[/font][font=Calibri]~[/font][/font][/size][size=;font-size:10.5000pt,10.5000pt][font=宋体][/font][/size]
[size=;font-size:10.5000pt,10.5000pt][font=Calibri]一看就懂的[font=Calibri]ReactJs[/font][font=宋体]入门教程（精华版）[/font][/font][/size][size=;font-size:10.5000pt,10.5000pt][font=Calibri][/font][/size]
[size=;font-size:10.5000pt,10.5000pt][font=Calibri]颠覆式前端[font=Calibri]UI[/font][font=宋体]开发框架：[/font][font=Calibri]React[/font][/font][/size][size=;font-size:10.5000pt,10.5000pt][font=Calibri][/font][/size]
[size=;font-size:10.5000pt,10.5000pt][font=Calibri]携程火车票业务在 [font=Calibri]React Native [/font][font=宋体]实践中踩过的坑[/font][/font][/size][size=;font-size:10.5000pt,10.5000pt][font=Calibri][/font][/size]
[align=center][attachment=370422][size=;font-size:10.5000pt,10.5000pt][font=宋体] [/font][/size][/align]
