一、动画的实现方式
在网页中,实现动画无外乎两种方式:
CSS3方式
CSS3的方式下,开发者一般在CSS中定义一些包含CSS3transition语法的规则。在某些特定情况下,让这些规则发生作用,于是浏览器会将这些规则应用于指定的DOM元素上,产生动画的效果。这种方式效率比脚本方式高,因为浏览器原生支持,省去了JavaScript的解释执行负担,有的浏览器甚至可以充分利用CPU加速的优势,进一步增强动画渲染的性能。
不过CSS3也有不少缺点:
首先,CSS3transition对一个动画规则的定义是基于时间和速度曲线的规则。就是CSS3的动画过程要描述成“在什么时间范围内,以什么样的运动节奏完成动画”,这可能不利于动画的流畅,因为动画是可能被中途打断的。
因为CSS3transition总是一闪而过,捕捉不到中间状态,只能一遍一遍用肉眼去检查动画效果,这给开发者带来了很大的痛苦。
二、 ReactCSSTransition规则
Transition并不能代替CSS,相反,它离不开CSS,其扮演的角色是让React组件在生命周期的特定阶段使用不同的CSS规则,而连接React组件和CSS需要遵守一些规则。
三、React-Motion动画库
React-Motion使用的是脚本方式。
react-motion中大量的使用了“以函数为子组件”的模式,react-motion提供的组件,都预期接受一个函数作为子组件。举例如下:
Motion组件的defaultStyle属性指定了一个初始值,style属性指定了目标值,期间不断调用作为子组件的函数,完成动画过程。
很显然,motion并不直接参与动画的绘制,它只是提供参数。具体的绘制过程,由作为子组件的绘制函数来完成,很显然这种“以函数为子组件”的模式带来了很大的灵活度。
亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。