Velocity

<script src="velocity.min.js"></script>

<script src="//cdn.jsdelivr.net/velocity/1.2.3/velocity.min.js"></script>

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

// 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元素对象一个接一个地调用：

$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 });

滚动和逆转

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

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

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

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

// 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的命令默认是针对之前一个调用的。如果传新的参数的话，就会扩展前一个动画（改变其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开发实验和初学者练习。