广告合作QQ：76874919

React动画实践

React 2020-05-25

一、 动画重要性

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

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

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动画和过渡。

@H_403_77@ 1、快速开始

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
var ReactCSSTransitionGroup = React . addons . CSSTransitionGroup ;
var Carousel = React . createClass ( {
propTypes : {
transitionName : React . PropTypes . string . isrequired ,
imageSrc : React . PropTypes . string . isrequired
} ,
render : function ( ) {
return (
< div className = 'carousel' >
< ReactCSSTransitionGroup transitionName = { this . props . transitionName } >
< img src = { this . props . imageSrc } key = { this . props . imageSrc } / >
< / ReactCSSTransitionGroup >
< / div >
) ;
}
} ) ;

剩下的就是在父组件中为其传入合适的transitionName以及imageSrc即可。效果如下：

聪明的你一定发现了：在这个组件当中，当一个新的列表项被添加到ReactCSSTransitionGroup，它将会被添加transitionName-enter对应的css类，然后在下一时刻被添加transitionName-enter-active 对应的CSS类；当一个列表项要从ReactCSSTransitionGroup中移除时，他也将会被添加transitionName-leave对应的css类，然后在下一时刻被添加transitionName-leave-active 对应的CSS类，这里要注意的是，当你尝试移除一项的时候，ReactCSSTransitionGroup仍会保持该项在DOM里，直至动画结束；

示例中演示的两个切换效果只需要修改transitionName属性对应的CSS动画类即可：

透明度切换效果：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
. carousel1 - enter {
opacity : 0 ;
}
. carousel1 - enter - active {
opacity : 1 ;
transition : opacity 300ms ease - in ;
}
. carousel1 - leave {
opacity : 1 ;
}
. carousel1 - leave - active {
opacity : 0 ;
transition : opacity 300ms ease - in ;
}

位移切换效果：

. carousel2 - enter {
left : 100 % ;
}
. carousel2 - enter - active {
left : 0 ;
transition : left 300ms ease - in ;
}
. carousel2 - leave {
left : 0 ;
}
. carousel2 - leave - active {
left : - 100 % ;
transition : left 300ms ease - in ;
}
  • 大家都注意到了，我一直在提transitionName这个属性，其实对于ReactCSStransitionGroup来说，一个属性是完全不够的，下面来详细介绍下它的属性们。
  • @H_403_77@ 2、属性们

  • （1）、transitionName

{oneOfType([React.PropTypes.string,React.PropTypes.object]).isrequired}

作用：关联CSS类：

例如：

1
2
3
4
5
6
transitionName - appear ;
transitionName - appear - active ;
transitionName - enter ;
transitionName - enter - active ;
transitionName - leave ;
transitionName - leave - active ;

制定CSS类：

1
2
3
4
5
6
7
8
transitionName = { {
enter : ‘ enter’ ,
enterActive : ‘ enterActive’ ,
leave : ‘ leave’ ,
leaveActive : ‘ leaveActive’ ,
appear : ‘ appear’ ,
appearActive : ‘ appearActive’
} }

（2）、transitionAppear

{React.PropTypes.bool} {false}

作用：初始化挂载动画。来为在组件初始挂载添加一个额外的过渡阶段。 通常在初始化挂载时没有过渡阶段因为transitionAppear 的默认值为false。

1
2
3
4
5
6
7
render : function ( ) {
return (
< ReactCSSTransitionGroup transitionName = "example" transitionAppear = { true } >
< h1 > Fading at Initial Mount < / h1 >
< / ReactCSSTransitionGroup >
) ;
}

（3）、transitionEnter

{React.PropTypes.bool} {true}

作用：用来禁用 enter动画

（4）、transitionLeave

作用：用来禁止leave动画 ReactCSSTransitionGroup 会在移除你的DOM节点之前等待一个动画完成。你可以添加transitionLeave={false} 到ReactCSSTransitionGroup 来禁用这些动画。

（5）、component

{React.PropTypes.any} {‘span’}

作用：默认情况下 ReactTransitionGroup 渲染为一个 span。你可以通过提供一个 component prop 来改变这种行为. 组件不需要是一个DOM组件，它可以是任何你想要的React组件，甚至是你自己写的。

（6）、className

{ React.PropTypes.string }

作用：给当前的component设置样式类

1
2
3
< ReactTransitionGroup component =“ ul” className = "example" >
. . .
< / ReactTransitionGroup >
@H_403_77@ 3、 生命周期

当子级被声明式的从其中添加或移除（就像上面的例子）时，特殊的生命周期挂钩会在它们上面被调用。

componentWillAppear(callback)

对于被初始化挂载到 CSSTransitionGroup 的组件，它和 componentDidMount() 在相同时间被调用 。它将会阻塞其它动画发生，直到callback被调用。它只会在CSS TransitionGroup 初始化渲染时被调用。

componentDidAppear()

在 传给componentWillAppear 的 回调 函数被调用后调用。

componentWillEnter(callback)

对于被添加到已存在的 CSSTransitionGroup 的组件，它和 componentDidUpdate() 在相同时间被调用 。它将会阻塞其它动画发生，直到callback被调用。它不会在 CSSTransitionGroup 初始化渲染时被调用。

componentDidEnter()

在传给 componentWillEnter 的回调函数被调用之后调用。

componentWillLeave(callback)

在子级从 ReactCSSTransitionGroup 中移除时调用。虽然子级被移除了，ReactTransitionGroup 将会保持它在DOM中，直到callback被调用。

componentDidLeave()

在willLeave callback 被调用的时候调用（与 componentWillUnmount 同一时间）。

  1. @H_403_77@ 4、原理简述

以componentWillEnter为例，伪代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
componentWillEnter ( callback ) {
let el = ReactDOM . findDOMNode ( this ) ;
el . classList . add ( styles . enter ) ;
requestAnimationFrame ( ( ) = > {
el . classList . add ( styles . active ) ;
} ) ;
el . addEventListener ( 'transitionend' , ( ) = > {
callback && callback ( ) ;
el . classList . remove ( styles . enter ) ;
el . classList . remove ( styles . active ) ;
} ) ;
}

在 componentWillEnter 里给 Animation 组件添加了 styles.enter 样式类，然后在浏览器下一个 tick 加入 styles.active 样式类 – 这里使用了 requestAnimationFrame，也可以使用 setTimeout，另外还监听 ‘transitionend’ 事件，transitionend 事件发生时执行回调 callback 并移除 styles.enter 与 styles.active 两个样式类

@H_403_77@ 5、 注意事项

①. 一定要为ReactCSSTransitionGroup的所有子级提供 key属性。即使只渲染一个项目。React靠key来决定哪一个子级进入，离开，或者停留。

②、动画持续时间需要被同时在CSS和渲染方法里被指定。这告诉React什么时候从元素中移除动画类，并且如果它正在离开，决定何时从DOM移除元素。

③、ReactCSSTransitionGroup必须已经挂载到了DOM才能工作。为了使过渡效果应用到子级上，ReactCSSTransitionGroup必须已经挂载到了DOM或者 prop transitionAppear 必须被设置为 true。ReactCSSTransitionGroup 不能随同新项目被挂载，而是新项目应该在它内部被挂载。

@H_403_77@ 6、 劣势

ReactCSSTransitionGroup的优势是非常明显的，简化代码、提高性能等，但是其劣势我们也需要了解，以在做实际项目时进行适当的取舍。

① 不兼容较老的、不支持CSS3的浏览器；

② 不支持为CSS属性之外的东西（比如滚动条位置或canvas绘画）添加动画；

③ 可控粒度不够细。CSS3动画只支持start、end、iteration三个事件，不支持对中间状态进行处理。

④ transitionEnd和animationEnd事件不稳定。

@H_403_77@ 7、 V0.14动画新特性

新增属性：

transitionAppearTimeout
transitionEnterTimeout
transitionLeaveTimeout

控制动画持续时间，解决animationend transitionend 事件不稳定、时有时没有的现象，v0.15版本将彻底放弃监听animationend transitionend 事件。

官方原话是： To improve reliability,CSSTransitionGroup will no longer listen to transition events. Instead,you should specify transition durations manually using props such as transitionEnterTimeout={500}.

原理上其实是简化了，还是以componentWillEnter为例，伪代码如下：

componentWillEnter ( callback ) {
let el = ReactDOM . findDOMNode ( this ) ;
el . classList . add ( styles . enter ) ;
requestAnimationFrame ( ( ) = > {
el . classList . add ( styles . active ) ;
} ) ;
setTimeout ( ( ) = > {
callback && callback ( ) ;
el . classList . remove ( styles . enter ) ;
el . classList . remove ( styles . active ) ;
} , props . transitionEnterTimeout ) ;
}

所以我们的轮播图就要改为这样实现：

< ReactCSSTransitionGroup transitionName = { this . props . transitionName } transitionEnterTimeout = { 300 } transitionLeaveTimeout = { 300 } >
< img src = { this . props . imageSrc } key = { this . props . imageSrc } / >
< / ReactCSSTransitionGroup >

（三） 间隔动画

深入了解了CSS渐变组，大家也看到了它并不是万能的，所以需要间隔动画来做辅助，或者说是第二选择。

间隔动画实现方式很简单，有两种：

1、 requestAnimationFrame

2、 setTimeout

requestAnimationFrame可以以最小的性能损耗实现最流畅的动画，它被调用的次数频繁度超出你想象。在requestAnimationFrame不支持或不可用的情况下，就要考虑降级到不那么智能的setTimeout了。

间隔动画在实现原理上其实很简单，就是周期性的触发组件的状态更新，通过在组件的render方法中加入这个状态值，组件能够在每次状态更新触发的重渲染中正确表示当前的动态阶段。

以实现元素右移100px为例，代码实现如下所示：

1、requestAnimationFrame实现

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
var Todo = React . createClass (
getInitialState : function ( ) {
return {
left : 0
} ;
} ,
componentWillUpdate : function ( ) {
requestAnimationFrame ( this . resolveAnimationFrame ) ;
} ,
render : function ( ) {
return < div style = { { left : this . state . left } } > This will animate ! < / div > ;
} ,
resolveAnimationFrame : function ( ) {
if ( this . state . left <= 100 ) {
this . setState ( {
left : this . state . left + 1
} ) ;
}
}
) ;

2、requestAnimationFrame实现

componentWillUpdate : function ( ) {
setTimeout ( this . resolveAnimationFrame , this . props . tick ) ;
} ,sans-serif;background-color:#FFFFFF;"> 是不是很简单呢？

大家一定会想，React也提供了我们可以直接操作DOM的接口，我还是不习惯React的写法，为什么不能像原生js那样实现动画效果呢？那么我可以明确的告诉你，React就是不允许你这么做，它就是要规避前端这种肆无忌惮的写法，规范你的代码，降低维护成本。

至于性能，这里顺便简单提一下React的渲染过程，大家可以体会下。

首次渲染时，从JSX渲染成真实DOM的大体过程如下：

1、parse过程将JSX解析成Virtual DOM，是一种抽象语法树（AST）；

2、compile过程则将AST通过DOM API 编译成页面真实的DOM。

二次渲染过程如下：

1、每次生成的页面DOM渲染后，其对应的Virtual Dom也会缓存起来；

2、当JSX发生变化，，会首先根据新的JSX生成一个全新的Virtual Dom；

3、新的Virtual Dom生成后，会检测是否存在旧的Virtual Dom；

4、发现存在，则通过react diff算法比较新旧Virtual Dom之间的差异，得出一个从旧Virtual Dom转换到新Virtual Dom 的最少操作（minimum operating）；

5、最后，页面旧的真实Dom，根据刚刚react diff算法得出的最少操作，通过Dom api进行节点的增、删、改，得出新的真实Dom；

大家一定在怀疑diff算法的性能，因为传统的用递归算法来比较两棵树的时间复杂度是O(n^3)，真是烂到了极致，但是，React通过几个先验条件将diff的算法复杂度控制在了O(n)。下面讲一下这几个条件：

1、 只在同层级做比较

在React 的diff算法中，两个virtual dom树的比较只在同层级进行。这样，只需一遍，即可遍历整棵树。这样做，是忽略了节点的跨层移动，因为web中节点的跨层操作较少。同时我们在使用React时，也要尽量避免这样做。

示例如下：

算法计算得出的操作是：删除body的子节点p及其子节点，创建div的子节点p，创建p的子节点a。

通过react的diff算法，两个Virtual Dom 比较后，因移动节点不同级，因此不做移动操作，而是直接删除重建。

2、 基于组件比较

在React 的diff算法中，virtual dom树的比较只在同组件进行。对于不同组件，即使结构相似，也不进行比较，而是直接执行删除+重建操作。这样做，是强化组件的概念，因为正常情况下，不同组件的页面结构是不一样的。

算法计算得出的操作是：删除body的子节点div及其子节点，创建body子节点div及其子节点p和子节点input。

如使用传统的diff算法，会计算出只需删除div的子节点a，并创建div子节点input。

而采用react的diff算法，两个Virtual Dom 比较时，发现绿框内结构为不同的组件，则绿框内容不做比较，直接删除重建。

3、节点使用唯一属性key

在React 的diff算法中，virtual dom树的节点可以通过key标识其身份，提高节点同级同组移动时的性能。增加身份标识来作为节点是否需要修改的一个条件。

算法计算得出的操作只需要：移动div节点到最后即可。

若使用传统的diff算法，判断body第一个子节点，旧的为div，新的为p，节点不一样，则删除div节点，新增插入p节点。之后节点操作类似，因此总的需要进行三次节点删除和新增。

而采用react的diff算法，因为节点多了key来标识，两个Virtual Dom 比较时，发现level1下的三个节点其实是一样的（key=1、key=2、key=3）。

相信通过上面的介绍，大家对React有了更进一步的了解。

四、 总结

1、 使用React实现动画效果时，首先考虑CSS渐变组，实在不行，再去考虑使用间隔渲染实现。

2、 需要定制的功能比较多的话，建议不要使用React自带额CSSTransitionGroup插件。比如说我们想在动画结束传入一个onEnd回调，如果修改React源码，有一万多行，CSSTransitionGroup依赖transitionGroup，transitionGroup又依赖其他插件和方法，很难改，也很容易改出问题来。我自己实现了一套CSSTransitionGroup插件，后续会做进一步的分享。

相关文章

react使用moment进行日期格式化
导入moment 使用方式 年月日，时分秒 星期几 相对时间 7天后 2小时后 明天 将毫秒转换成年月日
推荐使用并手写实现redux-actions原理
@ 一、前言 为什么介绍redux-actions呢? 第一次见到主要是接手公司原有的项目，发现有之前的大佬在处理...
【译】值得推荐的十大React Hook 库
十大React Hook库 原文地址：https://dev.to/bornfightcompany/top-10-react-hook-libraries-4065 原文...
React生命周期
React生命周期 React的生命周期从广义上分为挂载、渲染、卸载三个阶段，在React的整个生命周期中提供很...
React虚拟DOM的理解
React虚拟DOM的理解 Virtual DOM是一棵以JavaScript对象作为基础的树，每一个节点可以将其称为VNode，用...
React中JSX的理解
React中JSX的理解 JSX是快速生成react元素的一种语法，实际是React.createElement(component, props, ....