back back-top comments magnifier menu mobile right smile views

JS动画 PK CSS3动画(下)

Jean
Jean

选择合适的动画方案

上一篇 JS动画 PK CSS3动画(上) 主要介绍了几种动画实现方式的特点和优劣。
那如何根据项目需求 选择最合适的动画方案呢,以下一些看法应该能对你有所帮助:

  • 移动端,使用 CSS3 是最实用高效的,例如正流行的前端框架 React 中,虽然自带动画插件(ReactCSSTransitionGroup)但不如直接使用 CSS3 来的便利
  • 微信 H5 页面 里实现动画一般使用 CSS3,如果用户手机里安装了QQ浏览器 微信就使用QQ浏览器的X5内核 动画可能会卡顿,如果没装就使用手机系统浏览器内核
  • iOSSafari 浏览器,不管你使用 CSS3 动画还是 js 动画,都比较流畅。但是使用 JS 做动画 还是要注意性能优化,不要频繁 repaint 和 reflow
  • 另外,iOS 应用的内镶浏览器(webview)中,JS 性能比较弱,最好还是使用 CSS3
  • android 浏览器中不管使用 CSS3 requestAnimationFrame、canvas 都容易卡顿 有时惨不忍睹,优化的办法:(1).可以在 CSS 里开启硬件加速(例如设置:-webkit-transform:translateZ(0))(2).别使用高消耗的属性(shadow、background-attachment: fixed 等)(3).动画的面积不要太大 否则导致 repaint 过渡。
  • PC 端,对于交互不是很复杂的动画需求,CSS3 Transition 和 Animation 好写好用,不仅顺滑流畅 还能做出比较炫酷的效果。但对于用户互动较多、需要兼容 IE8-9、或单纯用 CSS3 实现不了的动画组件,例如首屏的焦点图、回顶等,用 JS 解决是最比较适合的

目前在移动端 为了兼顾各个设备的效果 还是尽量减少”炫酷”的动画特效,简约至上。

万油金 velocity.js 来了

很多人觉得 CSS3 是实现高性能动画的唯一途径,弃用 JS 实现动画的方式,这样做会带来不少问题:例如样式表堆积很多动画相关的代码 使得难以维护和复用,其实 JS 能做出更细腻的物体特效,CSS3 动画有时确显得力不从心和不够灵活。

CSS3 动画没办法平滑的向下兼容旧版IE浏览器,在国内市场多数需求下,还是要适当考虑 IE8-9 的,这只有 JS 动画能做到。

很多时候为了提高动画的顺滑度,我们会在 CSS 里通过强制开启硬件加速,这样做会使浏览器一直在超负荷运行,尤其表现在移动端 反倒是让动画变的卡顿,但 JS 却可以根据需要决定什么时候开启或关闭硬件加速。

JS 动画其实能人为控制到比 CSS3 动画 性能更加高效,很多大牛一直在这方面做努力,市面上涌现了很多高性能的优秀 JS 动画库,比如:transit.js、GSAP、bounce.js、velocity.js 等,其中 velocity.js 就是一个为高性能 Web 动画而生的轻量级、功能十分丰富的动画库,在 GitHub 上目前已有超过 1万的 star,可见受欢迎的程度有多高,https://github.com/julianshapiro/velocity

github-velocity-js

这里有 两个很酷的Demo动画1动画2)就是用 velocity.js 实现的。

velocity.js 完美结合了 jQuery、CSS3、requestAnimationFrame,但它可以独立于 jQuery 单独使用,语法和 jQuery.animate 相似,这样大大降低了学习成本,你可以抛开性能方面的顾虑而专注于动画本身,建立一个可控的动画工作流。

试想要实现这样一个动画例子,比如你想让一个元素先向右平移100px,延迟1秒后 再同时变高变宽,接着旋转360度,动画结束时再突然消失不见…… 听起来可有些复杂,使用了 velocity.js 这件事将变得很简单,看下面代码:

$('.box')
  .velocity({ translateX: '100px' })
  .velocity({ width: '200px', 'height': '200px' }, { delay: 1000 })
  .velocity({ rotateZ: ‘360deg’ }, { display: 'none' });

熟悉 jQuery 的朋友一定对上面的链式写法感到亲切,Velocity.js 可以用链式将动画以队列的方式执行,并缓存每次动画执行结束时的属性值,作为下一次动画的初始属性,这样避免了因重新查询属性值来的性能消耗。

相信到这,大家一定对 Velocity.js 产生了好感,想进一步学习 Velocity.js?这里 《Velocity.js 中文文档》 有详细的 API 说明  教程

本文由 前端先生 原创,欢迎转载分享,但请注明出处。

2条评论

2条评论

发表评论

电子邮件地址不会被公开。 必填项已用*标注

扫描二维码分享到微信