这篇文章主要介绍了使JavaScript动画流畅的一些方法,包括与CSS动画效果的一些对比,需要的朋友可以参考下
基于Javascript的动画暗中同CSS过渡效果一样，甚至更加快，这怎么可能呢?而Adobe和Google持续发布的富媒体移动网站的性能可媲美本地应用，这又怎么可能呢?
本文逐一遍览了基于Javascript的DOM动画库，如Velocity.js和GSAP，看其是如何比jQuery和CSS动画效果更具性能的.
jQuery
让我们先从基础的开始: JavaScript 和 jQuery 被错误的混为一谈了. JavaScript 动画是很快的. jQuery 把它放慢了下来。为什么?因为 — 尽管jQuery非常强大 — 但成为一个性能强劲的动画引擎从来都不是jQuery的设计目标:
jQuery 不能避免 布局颠簸 ，这得归因于它的代码库提供了动画之外的多种用途.
jQuery 的内存消耗经常会触发垃圾回收，那样会 时不时的让动画定格下来.
jQuery 使用 setInterval 而不是 requestAnimationFrame (RAF) 来 保护新技术不受其自身的影响.
应该注意到布局颠簸就是在动画开始部分的不顺畅，垃圾回收就是造成动画期间不顺畅的元凶, 而没有使用RAF则会导致低帧率.
实现示例
避免造成布局颠簸的DOM查询和更新组合:
?
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 var currentTop, currentLeft; /* With layout thrashing. */ currentTop = element.style.top; /* QUERY */ element.style.top = currentTop + 1; /* UPDATE */ currentLeft = element.style.left; /* QUERY */ element.style.left = currentLeft + 1; /* UPDATE */ /* Without layout thrashing. */ currentTop = element.style.top; /* QUERY */ currentLeft = element.style.left; /* QUERY */ element.style.top = currentTop + 1; /* UPDATE */ element.style.left = currentLeft + 1; /* UPDATE */发生在更新之后的查询会强制浏览器对页面的计算式数据进行重新计算 (同时会把新的更新效果考虑在内). 这样就会对动画产生显著的开销，而这只是16毫秒微小间隔的运行超时.
类似的，实现 RAF 并不必须是对你的现有代码库的显著返工. 让我们拿RAF的基础实现同setInterval比较一下:
?
1 2 3 4 5 6 7 8 9 10 11 12 13 14 var startingTop = 0; /* setInterval: Runs every 16ms to achieve 60fps (1000ms/60 ~= 16ms). */ setInterval(function() { /* Since this ticks 60 times a second, we divide the top property's increment of 1 unit per 1 second by 60. */ element.style.top = (startingTop += 1/60); }, 16); /* requestAnimationFrame: Attempts to run at 60fps based on whether the browser is in an optimal state. */ function tick () { element.style.top = (startingTop += 1/60); } window.requestAnimationFrame(tick);新闻热点
疑难解答
