一、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)