JQuery 动画插件 Velocity.js 发布：更快的动画切换速度

5 月 3 日，Julian 在其 GitHub 上发布了 Velocity.js。Velocity.js 是一款动画切换的 jQuery 插件，它重新实现了 jQuery 的$.animate()方法从而加快动画切换的速度。Velocity.js 只有 7k 的大小，它不仅包含了$.animate()的所有功能，并且还包含了颜色切换、转换 (transform)、循环、缓动、CSS 切换、Scroll 功能，它是 jQuery 、 jQuery UI 、 CSS 变换 在动画方面的最佳组合。Velocity.js 支持 IE8+、Chrome、Firefox 等浏览器，并支持 Andriod 以及 IOS。Velocity.js 在内部实现中使用了 jQuery 的$.queue()方法，因此它比 jQuery 的$.animate()、$.fade()、$.delay()方法更加流畅，其性能也高于 CSS 的 animation 属性，具体原理读者可以参考这篇文章。

Velocity.js 包含两个输入参数，第一个参数用于规定产生的动画效果，第二个参数为可选参数，用于规定动画的额外选项。具体如下：

$("div").velocity({ 
   property1: value1,
   property2: value2
}, {
   /* Default options */
   duration: 400,
   easing: "swing",
   queue: "",
   complete: null,
   loop: false,
   delay: false,
   display: false,
   mobileHA: true
});

Velocity.js 同样支持 jQuery 的参数简写语法：$element.velocity(propertyMap [, duration] [, easing] [, complete]):, 比如：

$("div").velocity({ left: 100 }, 1000);
$("div").velocity({ left: 100 }, 1000, "swing");
$("div").velocity({ left: 100 }, "swing");

Velocity.js 官方宣传 Velocity 的目标是成为 DOM 中动画切换方面的领导者。读者可以从这里下载最新版本的Velocity.js，由于Velocity.js 的方法签名和 $.animate()一样，因此只需将方法名从 animate 改为 velocity 即可。在其官方网站给出了几个绚丽的 Demo ，读者可以参考学习。

参考文档

1. http://julian.com/research/velocity/
2. http://davidwalsh.name/css-js-animation
3. https://news.ycombinator.com/item?id=7663775

感谢杨赛对本文的审校。

给InfoQ 中文站投稿或者参与内容翻译工作，请邮件至 editors@cn.infoq.com 。也欢迎大家通过新浪微博（ @InfoQ ）或者腾讯微博（ @InfoQ ）关注我们，并与我们的编辑和其他读者朋友交流。