Velocity

Velocity是一个跨平台的JavaScript库，旨在简化网站动画的客户端脚本。 Velocity是自由、开源软件，用MIT許可證授权。

Velocity的语法旨在让为HTML和SVG元素创建复杂动画变得更加容易。 Velocity除了在工作流程有上优势外，还提供了与基于CSS的动画相媲美的动画性能。 Velocity通过维护动画状态的内部缓存并最小化“布局抖动”来实现其性能，这是网页浏览器在以较快速度进行视觉更新时所经历的不良行为。其广泛的浏览器和设备支持使其成为必须支持低功耗设备的大型企业分布的理想选择。

Velocity被用于驱动许多著名网站的用户界面，包括優步、三星、WhatsApp、Tumblr、HTC、马自达和Microsoft Windows。它是代码托管服务GitHub上最受欢迎的项目之一。 2015年，Velocity被The Net Awards提名为“年度开源项目”。

功能
Velocity的功能包括：

动画逆转（撤消前一个动画）和动画循环
SVG元素动画
RGB与hex颜色动画
CSS transform属性动画
通过Velocity的UI Pack预先创建动画效果
弹簧释放类型的基于物理学的运动
集成Future与promise

浏览器支持
Velocity支持所有主流桌面浏览器（Firefox、Google Chrome、Safari）以及iOS和Android移动操作系统。它可以支持到Internet Explorer 8和Android 2.3。

用法
引入Velocity
Velocity库是一个包含所有核心功能的JavaScript文件。它可以通过链接到本地副本或从公共服务器（如MaxCDN的jsDelivr和Cloudflare的[http://www.cdnjs.com/ CDNjs] ）提供的许多副本中的一个包含在网页中。

直接从内容交付网络中包含Velocity也是可能的。（以//开头的链接是协议相对URL）

使用方式
Velocity有两种使用方式：

$.Velocity函数，这是一个从jQuery根对象扩展的工厂方法。此方法使用原始DOM元素而不是jQuery封装的元素进行动画处理。这是在没有jQuery的情况下使用Velocity的方式。
$element.velocity()函数。当页面上有jQuery时，用这种方式来给jQuery元素添加元素。

Velocity中的动画调用包括提供需要附加动画的元素、一个指定哪些CSS属性需要附加动画的“动画属性映射”，还有一个可选的“options对象”来指定动画的设置（例如“duration”）。

参数
Velocity接受一个或多个参数。第一个参数可以是预定义的Velocity命令的名称（scroll或reverse），也可以是要进行动画的CSS属性的对象：

// Animate an element's width to 100px and its left property to 200px
$element.velocity({ width: "100px", left: "200px" });

第二个参数是可选的，是一个对象。它用于指定动画选项，如持续时间（duration）、缓动（easing）和完成（complete）（动画完成后执行的任意函数）：

// Animate an element's width to 100px over a 1000ms duration after pausing for a 100s delay.
$element.velocity({ width: "100px" }, { duration: 1000, delay: 100 });

链接
要用Velocity创建一系列连续的动画，就要让目标jQuery元素对象一个接一个地调用velocity()：

$element
.velocity({ height: 300 }, { duration: 1000 })
// Continue on to this animation once the previous one has completed
.velocity({ top: 200 }, { duration: 600 })
// And once more...
.velocity({ opacity: 0 }, { duration: 200 });

滚动和逆转
滚动的话，就要在第一个参数传scroll — 代替典型的CSS属性映射：

// Scroll with a duration of 750ms
$element.velocity("scroll", { duration: 750 });

浏览器随后会向下滚动到Velocity被调用的元素的顶部边缘。

动画逆转，就要在第一个参数传reverse：

// Animate an element's height
$element.velocity({ height: "500px" }, { duration: 500 });
// Reverse the previous animation; animate back to the element's original height using the previous duration
$element.velocity("reverse");

Velocity的reverse命令默认是针对之前一个调用的。如果传新的参数的话，就会扩展前一个动画（改变其option）：

$element.velocity({ height: "500px" }, { duration: 500 });
// Extend the previous reverse call's options object with a new duration value
$element.velocity("reverse", { duration: 1000 });

历史
Velocity由Julian Shapiro开发，旨在解决缺乏高性能和面向设计者的JavaScript动画库的问题。 Stripe是一家颇受欢迎的以Web开发人员为中心的互联网技术公司，为Shapiro提供经济上的资助，让他可以继续专职开发Velocity。

Velocity内部动画引擎性能较高，对重新推广基于JavaScript的网络动画起到了积极作用；这个领域在之前由于基于CSS的动画的出现而一度失去人们的关注，因为基于CSS的动画在速度上超越了对动画缺乏关注的以前一些JavaScript库。

2014年9月，Shapiro发布了Velocity Motion Designer，这是一个在现成的网站上设计动画的工具，可以实时导出生成的动画代码，以便在IDE中随后使用。 2015年3月，Peachpit发布了Shapiro的《使用JavaScript的网页动画》（Web Animation using JavaScript）一书，该书教导了使用Velocity开发网页动画的入门和高级原则。截至2015年中期，Velocity继续由Shapiro专职开发和维护。

Velocity除了在专业企业环境中的使用外，它还广泛用于Web开发实验和初学者练习。

参见

D3.js
Raphaël
Three.js
jQuery

评论 (0)