1、简介

Velocity 是一个简单易用、高性能、功能丰富的轻量级JS动画库。它能和 jQuery 完美协作，并和$.animate()有相同的 API， 但它不依赖 jQuery，可单独使用。 

 

2、兼容性

可兼容到 IE8 和 Android 2.3。

若需要兼容 IE8，就必须引入 jQuery 1.x

 

3、示例代码(注意文件引用路径)

（1）index.html

（2）style.css

.box{
        width: 100px;    height: 100px;    background-color: pink;}

(3)index.js

(function($) {    //    $('#div1').velocity({
         //        width: '300px'    //    }, {
         //        //动画时长    //        duration: 3000,    //        //动画执行完后执行的回调    //        complete: function() {
         //            $('#div2').velocity({
         //                width: '300px'    //            }, {
         //                duration: 3000    //            })    //        }    //    });    //动画序列//    var seq = [{
     //            elements: $('#div1'),//            properties: {
     //                width: '300px'//            },//            options: {
     //                durations: 1000//            }//        },//        {
     //            elements: $('#div2'),//            properties: {
     //                width: '300px'//            },//            options: {
     //                durations: 1000//            }//        }//    ];//    $.Velocity.RunSequence(seq);//预定义动画$('#div1').on('mouseover',function(){    $(this).velocity('callout.shake')});})(jQuery);

 

4、使用

（1）参数配置：

$element.velocity({    properties: { opacity: 1 },    options: { duration: 500 }});// 或者：$element.velocity({    p: { opacity: 1 }, // 可以将 properties 简写成 p    o: { duration: 500 }});

基础配置：

$element.velocity({    width: "500px",        // 动画属性 宽度到 "500px" 的动画    properties: value2      // 属性示例}, {    /* Velocity 动画配置项的默认值 */    duration: 400,         // 动画执行时间    easing: "swing",       // 缓动效果    queue: "",             // 队列    begin: undefined,      // 动画开始时的回调函数    progress: undefined,   // 动画执行中的回调函数（该函数会随着动画执行被不断触发）    complete: undefined,   // 动画结束时的回调函数    display: undefined,    // 动画结束时设置元素的 css display 属性    visibility: undefined, // 动画结束时设置元素的 css visibility 属性    loop: false,           // 循环    delay: false,          // 延迟    mobileHA: true         // 移动端硬件加速（默认开启）});

 

（2）Complete属性

complete为动画结束时的回调函数，在无限循环模式下（设置loop: true） 该回调函数将不会执行，但是有规定次数的循环模式下（比如设置设置loop: 3） 该回调函数 将只会在最后一次循环结束后 执行一次。

（3）delay属性

和 jQuery 的$.delay()方法一样，动画将会延迟所设定的毫秒后执行。

（4）支持SVG动画

（5）velocity.ui.js 

velocity.ui.js 是 velocity.js 的 动画插件（1.8 KB ZIP’ed） 我们可以用它快速创建炫酷的动画特效，它依赖于 velocity.js。

 

elocity.ui 有2个重要方法:$.Velocity.RegisterEffect()和 $.Velocity.RunSequence()

前者允许你将多个 Velocity 动画合并存储到一个自定义数组里，你可以通过引用该数组的名称 在项目中复用， 后者能帮你改进嵌套的动画序列 使得更易于管理。

 

Velocity.ui.js 内置了很多常用的动画特效，分为 callout.* 和 transition.* 两类。