回顾一下我们先前学过的关于布局颠簸的知识，Velocity.js利用这些最佳实践来缓存动画结束值以复用为随后动画的开始值，从而避免了重新查询DOM以获取元素的开始值：
$element /* Slide the element down into view. */ .velocity({ opacity: 1, top: "50%" }) /* After a delay of 1000ms, slide the element out of view. */ .velocity({ opacity: 0, top: "-50%" }, { delay: 1000 });
在上面例子中，第二个 Velocity 调用知道它应该自动从 opacity为1 和 top为50% 开始。
浏览器本身最终能够执行许多这些相同的优化，但这样做会明显减少开发者能够制作的动画代码的方式。因此，出于同样原因，由于jQuery不使用RAF（如上所述），浏览器就不会强制优化它，甚至给出一个很小的机会去打破规格或偏离预期的行为。
最后，我们对这两个JavaScript动画库（Velocity.js 和 GSAP）互相比较一下。
GSAP 是首个动画库，用在演示JavaScript DOM 令人印象深刻的动画表现。它确实是这样，但有些缺点：
在中到高负荷动画中，GSAP 的 DOM 交互开销导致动画在开始时和过程中失帧。
相反于Velocity.js 是在超宽松的 MIT 许可下发布的, GSAP 是闭源的， 并且在很多类商用时候需要许可年费。
因为 GSAP 是一个完整的动画套件，是 Velocity 大小的三倍。然而，GSAP 有如此丰富功能，有助于其成为动画的瑞士军刀。
我推荐做法是在你需要精确控制定时（比如 重绘，暂停/恢复）和运动（比如贝塞尔曲线路径）的时候用 GSAP 。这些特性在游戏开发和某些特殊应用中是至关重要的，但是通常不需要用在网页应用的 UI中。
Velocity.js
引用 GSAP 丰富的特性并不代表Velocity自身在特性上是轻量级的. 相反，在压缩后仅有的7kb中，Velocity不仅仅复制了jQuery $.animate()的所有功能, 它还把颜色动画，转换，循环，easing效果，类动画还有滚动都打包了进去.
总之，Velocity是jQuery，jQuery UI，以及CSS渐变效果的最佳组合.
此外，从便利的角度看，Velocity在hood（盖子，大概意思是公共的接口）之下使用jQuery的 $.queue() 方法, 如此就可以实现同 jQuery 的 $.animate(), $.fade(), 和 $.delay() 函数的无缝互操作. 而且，由于Velocity的语法同 $.animate() 的语法是相同的, 你不需要改变页面的任何代码.
让我们快速地来看一看 Velocity.js. 在基础的层面，Velocity的行为同$.animate()一样:
$element .delay(1000) /* Use Velocity to animate the element's top property over a duration of 2000ms. */ .velocity({ top: "50%" }, 2000) /* Use a standard jQuery method to fade the element out once Velocity is done animating top. */ .fadeOut(1000);
在其最高级的层面，可以创建带有3D动画的复杂滚动场景 — 几乎只要用到两行简单的代码:
$element /* Scroll the browser to the top of this element over a duration of 1000ms. */ .velocity("scroll", 1000) /* Then rotate the element around its Y axis by 360 degrees. */ .velocity({ rotateY: "360deg" }, 1000);
您可能感兴趣的文章: