一、Velocity.js介绍
Velocity是一个jQuery插件，重新实现了$.animate() 来产生更高的性能（速度也比CSS动画库更快），而包括新的功能，以提高动画工作流程。
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属性。
二、项目主页
http://julian.com/research/velocity/
下载：http://www.jqcool.net/localdown/201503/jqcool.net-velocity.zip
三、使用
3.1 Velocity.js包含两个输入参数，第一个参数 为 CSS属性，第二个参数为可选参数，为 velocity 配置选项。具体如下：
$("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");
3.2 制作动画序列的三种方式
- 统一HTML代码：
<div class="div1"></div>
<div class="div2"></div>
- 统一CSS样式：
.div1{ width: 120px; height: 120px; background-color: red;}
.div2{ width: 120px; height: 120px; background-color: blue; margin-top: 20px;}
- 动画序列方式一：
(function($){
// 方式一：
$('.div1').velocity(
{
width:'400px'
},
{
duration:600,
complete:function(){ //队列
$('.div2').velocity({
width:'400px'
},{
duration:600
})
}
})
})(jQuery)
- 动画序列方式二：
(function($){
// 方式二：
$('.div1').velocity(
{
width:'400px'
},{
duration:600
})
$('.div2').velocity(
{
width:'400px'
},{
duration:600,
delay:600
})
})(jQuery)
- 动画序列方式三（推荐使用）
(function($){
// 方式三：
var seq = [
{
elements:$('.div1'),
properties:{ width:'500px'},
options:{ duration:600}
},
{
elements:$('.div2'),
properties:{ width:'500px'},
options:{ duration:600}
}
];
$.Velocity.RunSequence(seq);
})(jQuery)
3.3 预定义动画
(function($){
//预定义动画
$('.div1').on('mouseover',function(){
$(this).velocity('callout.shake') //官网定义了很多预定义动画：callout.bounce、callout.pulse、callout.swing等
});
//定义自己的动画效果(RegisterEffect或者RegisterUI)
$.Velocity.RegisterEffect('mycall.scalex',{
defaultDuration:300,
calls:[
[{ scaleX : 1.2 },0.5], //[ { property : value }, durationPercentage, {options} ]
[{ scaleX : 1.0 },0.5]
]
})
//调用自定义动画
$('.div2').on('mouseover',function(){
$(this).velocity('mycall.scalex')
})
})(jQuery)