首先,不要把JavaScript和jQuery错误的混为一谈。 jQuery展示动画会比原生JavaScript慢。 原因是尽管jQuery非常强大,但是他的目标从来不是成为一个高性能的动画引擎。
由于jQuery提供了多种动画接口,所以无法避免布局抖动的问题。
jQuery的内存消耗频会繁触发垃圾回收机制,造成动画丢帧的问题。
jQuery为了保护其自身的动画机制,使用setInterval取代requestAnimationFrame.
CSS的Transition
CSS的Transition的动画逻辑是有流浪器来执行的,所以它的性能比JQuery动画好。处理机制:
通过优化DOM操作,避免内存消耗来减少卡顿
使用与requestAnimationFrame类似的机制
强制使用硬件(GPU来提高动画性能)加速
使用RAF接口并不需对现有的库进行重构。 下面来比较一下RAF与setInterval的基础用法:
var startingTop = 0;
/* setInterval:为了达到60fps把间隔设为16ms (1000ms/60 ~= 16ms). */
setInterval(function() {
/* 因为此处每秒执行60次,所以我们将top属性的增量设置为1/60秒 */
element.style.top = (startingTop += 1/60);
}, 16);
/* requestAnimationFrame: 当浏览器处于正常时,尝试以60fps运行 */
function tick () {
element.style.top = (startingTop += 1/60);
}
window.requestAnimationFrame(tick);
结论:使用RFA会以很少的代码改动量获取更高的动画性能
说明
但是,是不是JavaScript就是比CSS Transition性能差呢?能不能让JavaScript性能上更好呢?
移动端开发时,如果有简单的状态切换时,单纯使用CSS Transition即可,如果有比较多的UI交互时,可以
使用Transit(JavaScript控制CSS Transition)。因此JavaScript是可以比CSS Transition性能更好。
Velocity.js
GreenSock动画(GSAP)的功能丰富并不意味着Velocity自身的功能弱。 相反,Velocity不仅包含了jQuery的$.animate()的所有功能 ,而且还集成了颜色动画, transforms, 循环, easings, 类动画, 滚动动画。所有的这一切,压缩后仅仅只有7KB
简而言之,Velocity相当于是把jQuery,jQuery UI,和CSS transitions结合了起来。
此外,从使用的角度来看,Velocity使用了jQuery的 .queue()方法,从而与jQuery的 .animate() , .fade(), .delay() 功能无缝结合。由于Velocity的语法与$.animate() 是相同的, 所以你不需要改变你页面中的代码 。
先让我们来初步了解一下 Velocity.js 与 $.animate()的相同点 :
$element
.delay(1000)
/* 用Velocity控制元素的向上运动持续2000ms */
.velocity({ top: "50%" }, 2000)
/* 当元素向上运动的动作完成后 使用jQuery自带的方法使元素淡出 */
.fadeOut(1000);
进一步,可以创建一个3D滚动的动画场景也只是两个简单的代码:
$element
/* 在1000ms内将浏览器滚动到元素的上方 */
.velocity("scroll", 1000)
/* 然后使元素沿着他的Y轴旋转360度 */
.velocity({ rotateY: "360deg" }, 1000);