React实战-深入分析ReactNative中的动画效果

React实战-深入分析ReactNative中的动画效果

说起动画效果感觉回到JavaScript的起源了，在早期的Web开发中，JS更多的是扮演着页面特效的角色，当然也只是属于做些边角料的工作，真正需要动画的地方，大多还是采用Flash或者Applet，Js更多的是操作html元素的变化，如果大量采用Js,则会严重影响页面的性能。

在了解ReactNative中动画之前，我们还是看看网页动画基本实现方式。在Web业务效果方面，基本的做法是改变Html页面元素的属性，例如：width,left,top等，导致页面重绘，由于元素属性变化和重绘过程存在时差，也就产生了动画的效果，但总的来说性能并不太好。在Css3中增加了transform和transition使得Web元素动画效果变的简单、流畅，再加上Html的canvas元素对视频的支持，大大降低了Web页面对插件式动画的依赖。在ReactNative的动画主要关注在Web元素的效果变化，视频的支持依然交给了canvas（weixin号：React实战）。

1.ReactNative中的四种变化方式

在ReactNative中实现动画效果的基本原理与之前并没有什么区别，再结合ReactJS的UI重绘原则，主要有以下方式：

a通过Js直接构造新的元素，改变Style属性。

if(this.state.complete === true){

        return <View style={ {width:20,height:20,backgroundColor:'red'}} />

      }else{

         return <View style={ {width:20,height:20,backgroundColor:'blue'}} />

      }

b依据不同条件，设置不同的Style