jquery动画切换引擎插件 Velocity.js 学习01

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

 

参考：http://www.infoq.com/cn/news/2014/05/jquery-velocity-js

慕课网：Velocity.js实现弹出式相框