当前位置:Gxlcms > html代码 > React动画实践_html/css_WEB-ITnose

React动画实践_html/css_WEB-ITnose

时间:2021-07-01 10:21:17 帮助过:24人阅读

一、 动画重要性

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

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

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 (                                                                                                
); }});

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

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

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

透明度切换效果:

.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来说,一个属性是完全不够的,下面来详细介绍下它的属性们。
  • 2、属性们

  • (1)、transitionName

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

作用:关联CSS类:

例如:

transitionName-appear;transitionName-appear-active;transitionName-enter;transitionName-enter-active;transitionName-leave;transitionName-leave-active;

制定CSS类:

  transitionName={ {         enter: ‘enter’,        enterActive: ‘enterActive’,        leave: ‘leave’,         leaveActive: ‘leaveActive’,         appear: ‘appear’,         appearActive: ‘appearActive’   } }

(2)、transitionAppear

{React.PropTypes.bool} {false}

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

例如:

render: function() {       return (             

FadingatInitialMount

); }

(3)、transitionEnter

{React.PropTypes.bool} {true}

作用:用来禁用 enter动画

(4)、transitionLeave

{React.PropTypes.bool} {true}

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

(5)、component

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

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

(6)、className

{ React.PropTypes.string }

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

例如:

  ... 

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. 4、原理简述

以componentWillEnter为例,伪代码如下:

componentWillEnter (callback) {    letel = 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 两个样式类

5、 注意事项

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

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

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

6、 劣势

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

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

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

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

④ transitionEnd和animationEnd事件不稳定。

7、 V0.14动画新特性

新增属性:

transitionAppearTimeouttransitionEnterTimeouttransitionLeaveTimeout

控制动画持续时间,解决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) {    letel = 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);}

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

        

(三) 间隔动画

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

间隔动画实现方式很简单,有两种:

1、 requestAnimationFrame

2、 setTimeout

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

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

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

1、requestAnimationFrame实现

var Todo = React.createClass( getInitialState: function() { return { left: 0 }; }, componentWillUpdate: function() { requestAnimationFrame(this. resolveAnimationFrame); }, render: function() { return This willanimate!
; }, resolveAnimationFrame: function() { if(this.state.left <= 100) { this.setState({ left: this.state.left + 1 }); } });

2、requestAnimationFrame实现

var Todo = React.createClass( getInitialState: function() { return { left: 0 }; }, componentWillUpdate: function() { setTimeout(this. resolveAnimationFrame, this.props.tick); }, render: function() { return This willanimate!
; }, resolveAnimationFrame: function() { if(this.state.left <= 100) { this.setState({ left: this.state.left + 1 }); } });

是不是很简单呢?

大家一定会想,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插件,后续会做进一步的分享。

谢谢阅读

人气教程排行