React动画实践_html/css_WEB-ITnose

一、 动画重要性

世界上最难的学问就是研究人。在你的动画不会过于耗费资源，以至拖慢用户的设备的前提下，动画可以显著改善用户界面体验。

可以简单的把页面动画分为以下几个类型：

1、页面元素动画：比如轮播图等，由用户操作催化；

2、loading动画：减少用户视觉等待时间；

3、装饰动画：尽量避免，会分散用户注意力，值得也不值得；

4、广告动画：增加广告的转化率；

5、情节动画：多用于SPA；

以loading动画为例说明动画的重要性：为了提升用户体验、增加用户粘性，大家从开发的角度看首先想到的会是从前到后的性能优化，从而减少用户打开页面时的等待时间，你或许考虑到了要增加带宽、减少页面的http请求、使用数据缓存、优化数据库、使用负载均衡等，但是由于业务限制和用户复杂的体验环境，总会遇到一些瓶颈。这时候，我们需要做的就是如何减少用户的视觉等待时间，哪怕是给一朵转动的菊花，但千万不要不理她，让人盲目的等待就是你业务流失的方式。不客气的说，有时候一朵性感菊花的作用并不亚于你去优化数据库。

二、 动画实现原则

在实现动画时，我个人一直遵循以下几个原则：

1、性能，性能，还是性能：这方面的建议就是在有选择时，一定要使用基于CSS的动画，将JS作为备选，因为考虑到硬件加速和性能之后，CSS几乎总是优于原生JS实现的动画；

2、微小低调的动画往往表现更好；

3、大而绚丽的动画需要带有目的性：不能只为了“好看”；

4、动画持续时间要短；

5、让动画具有弹性：或者说缓动效果；

6、动画不要突然停止；

大家可以想一下看看是不是这么回事。

三、 React动画

（一） 实现方式

书归正传，React实现动画有两种方式：

1、CSS渐变组；

2、间隔动画；

CSS渐变组： 简化了将CSS动画应用于渐变的过程，在合适的渲染和重绘时间点有策略的添加和移除元素的class。

间隔动画： 以牺牲性能为代价，提供更多的可扩展性和可控性。需要更多次的渲染，但同时也允许为css之外的内容（比如滚动条位置以及canvas绘图）添加动画。

（二） CSS渐变组

ReactCSStransitionGroup是在插件类ReactTransitionGroup这个底层API基础上进一步封装的高级API，来简单的实现基本的CSS动画和过渡。

1、快速开始

以一个简单的图片轮播图为例：

var ReactCSSTransitionGroup = React.addons.CSSTransitionGroup; var Carousel = React.createClass({        propTypes: {    transitionName: React.PropTypes.string.isRequired,            imageSrc: React.PropTypes.string.isRequired        },        render: function() {            return (