Velocity.js

Velocity

• 一个简单易用、高性能、功能丰富的轻量级JS动画库。它能和 jQuery 完美协作，并和$.animate()有相同的 API， 但它不依赖 jQuery，可单独使用。 Velocity 不仅包含了 $.animate() 的全部功能， 还拥有：颜色动画、转换动画(transforms)、循环、 缓动、SVG 动画、和 滚动动画 等特色功能。
• 注:使用 jQuery 时，必须在 Velocity 之前 加载 jQuery

优势:

• 它比 $.animate() 更快更流畅(在安卓也不会卡顿)，性能甚至高于 CSS3 animation， 是 jQuery 和 CSS3 transition 的最佳组合，它支持所有现代浏览器，最低可兼容到 IE8 和 Android 2.3。
• 可以支持颜色动画、转换动画(transforms)

// 标准写法
$(".element").velocity({
    left: "200px"
}, {
    duration: 450,
    delay: 1000
});

// $.animate() 的写法，效果同上
$(".element").delay(1000).velocity({left: "200px"}, 450);

区别

• velocity针对每个CSS属性，只接受一个唯一值，这点与css不同。因此可以这样传入动画：

$element.velocity({ padding : 10 }) ;
//要传入多个值时必须一一列出来：
$element.velocity({
                  paddingTop : 10,
                  paddingRight : 10,
                  paddingLeft : 20,
                  paddingBottom : 20
         });

// javascript的属性名称中，单词之间的连接号去掉了，改为驼峰命名法。例如：padding-left变成了paddingLeft。

• 值
  velocity支持px、em、rem、%、deg、vw和vh这些单位，如果没有为数值提供单位，默认px。

链式操作

• 当一个元素链式调用多个velocity函数时，它们会自动排成队列，这意味着前一个动画结束后一个动画马上开始。

• 开始和结束时的回调

• begin（开始）和complete（完成）
  为begin设置的函数会在动画开始前触发。与之相反，为complete设置的函数会在动画完成时调用。

$div.velocity(
  { opacity:0 ,width:"500px"},
  {
    begin : function(){
    alert("begin!");
  },
  complete : function(){
    alert("complete!")
  }
})

循环与延迟

• 将loop选项设置为一个整数，该整数是几，动画就在调用的属性映射汇总的值与调用之前元素的值之间交替几次。
  也可以将true传给loop，触发无限循环。

• 将delay指定为多少毫秒，在动画开始之前就会暂停多长时间。delay选项的目的是将动画的定时逻辑完全保留在velocity内，而不是在velocity的动画开始时依赖jquery的$.delay()函数来更改。

可以同时设置delay和loop选项，这样可以在循环交替之间创建一个停顿。

//循环四次，每次循环之间都等待1000毫秒
$div.velocity(
  {height:"+=100px",width:"+=100px"},
  {loop:4,delay:1000}
);