Velocity.js的使用 - xiaohuochai－IT工程師數位筆記本

文章出處

前面的話

　　Velocity是一款優秀的JS動畫庫，完全可以作為jQuery的animate的替代品。需要動畫功能時，使用Velocity是一個好選擇。本文將詳細介紹Velocity.js的使用

概述

　　Velocity是一個簡單易用、高性能、功能豐富的輕量級JS動畫庫。它和jQuery的animate()有相同的API，但它不依賴 jQuery，可單獨使用。Velocity不僅包含了$.animate()的全部功能，還擁有：顏色動畫、轉換動畫(transforms)、循環、緩動、SVG動畫和滾動動畫等特色功能。它比$.animate()更快更流暢，性能甚至高于CSS3 animation，是jQuery和CSS3 transition的最佳組合，它支持所有現代瀏覽器，最低可兼容到IE8和Android 2.3

【下載】

　　可以通過官網直接下載Velocity.js，下載地址

　　也可以使用npm安裝

npm install velocity-animate

基本用法

　　當使用jQuery時，Velocity和jQuery的animate()用法類似

$("#test").velocity({
    left: "200px"
}, {
    duration: 450,
    delay: 300
});

　　不使用jQuery時，寫法如下

  var oBox = document.getElementById('test');
  Velocity(oBox,{
      left: "200px"
  }, {
      duration: 450,
      delay: 300
  });

　　下面是一個實例

<button id="btn">開始運動</button>
<button id="reset">還原</button>
<div id="test" style="height:100px;width:100px;background:pink;position:absolute;left:0;"></div>
<script src="http://files.cnblogs.com/files/xiaohuochai/velocity.min.js"></script>
<script>
reset.onclick = function(){history.go();}
btn.onclick = function(){
  var oBox = document.getElementById('test');
  Velocity(oBox,{
      left: "200px"
  }, {
      duration: 450,
      delay: 300
  }); 
}
</script>

參數設置

　　Velocity 接收一組 css 屬性鍵值對 (css map) 作為它的第一個參數，該參數作為動畫效果的最終屬性。第二個參數是可選參數為動畫的額外配置項。下面為參數的寫法：

$element.velocity({
    width: "500px",        // 動畫屬性 寬度到 "500px" 的動畫
    property2: 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         // 移動端硬件加速（默認開啟）
});

【單一對象參數寫法】

　　Velocity 也支持 single-argument 的語法

$element.velocity({
    properties: { opacity: 1 },
    options: { duration: 500 }
});

// 或者：
$element.velocity({
    p: { opacity: 1 }, // 可以將 properties 簡寫成 p
    o: { duration: 500 }
});

【逗號分割的參數寫法】

$element.velocity({ top: 50 }, 1000);
$element.velocity({ top: 50 }, 1000, "swing");
$element.velocity({ top: 50 }, "swing");
$element.velocity({ top: 50 }, 1000, function() { alert("Hi"); });

【單位】

　　如果不寫屬性值的單位, Velocity 會將像素(px)作為默認單位

// 等同 padding: 1px
$element.velocity({ padding: 1 });

// 等同 padding-left: 1px, padding-right: 1px
$element.velocity({
    paddingLeft: 1,
    paddingRight: 1
});

// 不能這樣寫！因為這樣相當于為 padding 賦了多個值
$element.velocity({ padding: "1 1 1 1" }); // error

　　Velocity 在 1.2.0+ 版本里增加了對 "px, em, rem, %, deg, vw/vh" 這些單位的支持。如果不填寫屬性單位，默認單位還是"px"，但 "deg" 用于 rotateZ 屬性時可以省略不寫

【計算屬性】

　　Velocity 還支持動態計算屬性值，包括 "+, -, *, /"，還可以設置元素在動畫執行前的初始值

　　[注意]"rem" 只支持 IE9+，"vh/vw" 只支持 IE9+ 和 Android 4.4+

$element.velocity({
    top: 50,                // 等同于 "50px"
    left: "50%",
    width: "+=5rem",        // 每次在當前值上疊加 5rem
    height: "*=2"           // 每次在當前值上疊乘 2
    color: ["#888", "#000"] // 每次動畫執行前，color 的初始值都為"#000"（從"#000"過渡成"#888"）
});

【鏈式動畫】

　　當一個元素連續應用多個velocity()時，動畫將以隊列的方式執行

$element
    /* 先執行寬度變為75px的動畫 */
    .velocity({ width: 75 })
    /* 等前面的寬度動畫結束后，再執行高度變為0的動畫 */
    .velocity({ height: 0 });

　　下面是一個例子

<button id="btn">開始運動</button>
<button id="reset">還原</button>
<div id="test" style="height:100px;width:150px;background:pink;position:absolute;left:0;"></div>
<script src="http://files.cnblogs.com/files/xiaohuochai/jquery-1.10.0.js"></script>
<script src="http://files.cnblogs.com/files/xiaohuochai/velocity.min.js"></script>
<script>
reset.onclick = function(){history.go();}
btn.onclick = function(){
  $('#test').velocity({left:200}, {duration:500,complete:function(el){
    el[0].style.backgroundColor = 'lightblue';
    el[0].innerHTML = '小火柴的藍色理想';
  }}).velocity({width:300})
}
</script>

配置項

　　Velocity 提供了豐富的可選配置項，可以更好的控制動畫，也可以利用這些配置做出炫酷復雜的動畫特效

【執行時間】

　　Velocity 的動畫執行時間以毫秒為單位，并支持 jQuery 中的動畫速度關鍵字: "slow","normal","fast"

$element.velocity({ opacity: 1 }, { duration: 1000 });

// 支持 jQuery 中的動畫速度關鍵字：
$element.velocity({ opacity: 1 }, { duration: "slow" });

【easing緩動效果】

　　Velocity默認包含5種緩動效果

　　1、jQuery UI的緩動關鍵字

"linear"
"swing"
"spring"
"easeInSine"
"easeOutSine"
"easeInOutSine"
"easeInQuad"
"easeOutQuad"
"easeInOutQuad"
"easeInCubic"
"easeOutCubic"
"easeInOutCubic"
"easeInQuart"
"easeOutQuart"
"easeInOutQuart"
"easeInQuint"
"easeOutQuint"
"easeInOutQuint"
"easeInExpo"
"easeOutExpo"
"easeInOutExpo"
"easeInCirc"
"easeOutCirc"
"easeInOutCirc"

　　2、CSS3緩動關鍵字

"ease"
"ease-in"
"ease-out"
"ease-in-out"

　　3、CSS3 貝塞爾曲線

[ 0.17, 0.67, 0.83, 0.67 ]

　　4、彈簧物理緩動（spring physics）

　　以2位數組的形式 [ tension, friction ]，tension最大值為500，friction 最大值為20

　　5、步驟緩動（step easings）

　　以1位數組的形式使動畫通過指定的步驟過渡到結束值

/* 標準寫法 */
$element.velocity({ width: 50 }, { easing: "easeInSine" });

/* 或 */
$element.velocity({ width: 50 }, "easeInSine");

/* jQuery UI easings */
$element.velocity({ width: 50 }, "easeInSine");

/* CSS3 easings */
$element.velocity({ width: 50 }, "ease-in");

/* 貝塞爾曲線 */
$element.velocity({ width: 50 }, [ 0.17, 0.67, 0.83, 0.67 ]);

/* 彈簧物理 */
$element.velocity({ width: 50 }, [ 250, 15 ]);

/* step easing */
$element.velocity({ width: 50 }, [ 8 ]);

　　緩動可應用于單個屬性

$element.velocity({
    borderBottomWidth: [ "2px", "spring" ], // border-bottom 使用 "spring"
    width: [ "100px", [ 250, 15 ] ],        // width 使用 spring physics
    height: "100px"
}, {
    easing: "easeInSine" // 默認所有屬性使用 "easeInSine"
});

　　可以通過函數的形式注冊自定義的緩動效果，函數將被擴展到$.Velocity.Easings對象上

// p：動畫完成的百分比（十進制值）
// opts：傳遞到觸發 .velocity() 調用的選項
// tweenDelta：補間
$.Velocity.Easings.myCustomEasing = function (p, opts, tweenDelta) {
    return 0.5 - Math.cos( p * Math.PI ) / 2;
};

【動畫隊列】

　　可以通過設置queue: false 強制并行執行一個新動畫

// 執行寬度變為"50px"的動畫
$element.velocity({ width: "120px" }, { duration: 3000 });

setTimeout(function() {
    /* 1.5秒后 開始并行執行高度變為"50px"的新動畫 */
    $element.velocity({ height: "120px" }, { duration: 1500, queue: false });
}, 1500);

　　下面是一個例子

<button id="btn">開始運動</button>
<button id="reset">還原</button>
<div id="test" style="height:100px;width:100px;background:pink;position:absolute;left:0;"></div>
<script src="http://files.cnblogs.com/files/xiaohuochai/jquery-1.10.0.js"></script>
<script src="http://files.cnblogs.com/files/xiaohuochai/velocity.min.js"></script>
<script>
$("#reset").click(function(){
  history.go();
})
$("#btn").click(function(){
  // 執行寬度變為"50px"的動畫
  $("#test").velocity({ width: "200px" }, { duration: 3000 });  
  setTimeout(function() {
    /* 1.5秒后 開始并行執行高度變為"50px"的新動畫 */
    $("#test").velocity({ height: "200px" }, { duration: 1500, queue: false });
  }, 1500);  
})
</script>

　　也可以自定義動畫隊列，但不會立即執行，需要通過dequeue()方法手動執行動畫

// 自定義隊列，這里并不會立即執行
$("div")
  .velocity({ translateX: 75 }, { queue: "a" })
  .velocity({ width: 50 }, { queue: "b" })
  .velocity({ translateY: 75 }, { queue: "a" })
  .velocity({ height: 0 }, { queue: "b" })

// 2秒后 執行隊列"a"的動畫
setTimeout(function() {
  $("div").dequeue("a");
}, 2000);

// 4秒后 執行隊列"b"的動畫
setTimeout(function() {
  $("div").dequeue("b");
}, 4000);

　　[注意]loop循環選項和reverse反向動畫指令，不能和隊列一起使用

【回調函數】

begin()

　　begin為動畫開始前的回調函數，但在循環模式下(設置loop選項時)，該函數只會在第一次循環前執行一次

$element.velocity({
    opacity: 0
}, {
    begin: function(elements) { console.log(elements); }
});

complete()

　　complete為動畫結束時的回調函數，在無限循環模式下（設置loop: true）該回調函數將不會執行，但是有規定次數的循環模式下（比如設置loop: 3）該回調函數將只會在最后一次循環結束后執行一次

$element.velocity({
    opacity: 0
}, {
    complete: function(elements) { console.log(elements); }
});

$element.velocity({
    opacity: 0
}, {
    // 動畫循環執行3次
    loop: 3,
    // 回調函數將在第3次循環結束后 執行一次
    complete: function(elements) {
        alert("I am hungry！");
    }
});

progress()

　　progress為動畫執行過程中調用的函數，有elements、complete、remaining、start、tweenValue5個參數

elements：當前執行動畫的元素，可以用$(elements)來獲取
complete：整個動畫過程執行到百分之多少，該值是遞增的，注意：該值為一個十進制數值并不帶單位(%)
remaining：整個動畫過程還剩下多少毫秒，該值是遞減的
start：動畫開始時的絕對時間 (Unix time)
tweenValue：動畫執行過程中 兩個動畫屬性之間的補間值

$element.velocity({
    opacity: 0,
    tween: 1000 // 可選的
}, {
    duration: 2000,
    progress: function(elements, complete, remaining, start, tweenValue) {
        console.log((complete * 100) + "%");
        console.log(remaining + "ms remaining!");
        console.log("The current tween value is " + tweenValue)
    }
});

// 可以簡寫這些參數：
$element.velocity({
    tween: [ 0, 1000 ]
}, {
    easing: "spring",
    progress: function(elements, c, r, s, t) {
        console.log("The current tween value is " + t)
    }
});

【移動端加速】

　　mobileHA可以設置是否開始移動端硬件加速，默認值為true，也可以通過設置 mobileHA: false關閉硬件加速

// 關閉移動端硬件加速
$element.velocity(propertiesMap, { mobileHA: false });

【Loop動畫循環執行】

　　設置loop為一個正整數，比如設置loop: 2，就可以讓動畫循環執行2次

// 循環執行2次（注意：元素height值變化到10em 再從10em變化到初始值 是一次循環）
$element.velocity({ height: "10em" }, { loop: 2 });

　　如果設置loop: true，可以讓動畫無限循環執行

$element.velocity({ height: "10em" }, { loop: true });

【Delay動畫延遲執行】

　　和 jQuery 的$.delay()方法一樣，動畫將會延遲所設定的毫秒后執行

// 動畫將延遲1500毫秒后執行
$element.velocity({ height: "+=10em" }, { delay: 1500 });

【display 和 visibility】

　　可以在動畫執行結束后動態設置元素的 css 屬性display或visibility

/* 動畫結束后 元素 display 屬性設為 "none" */
$element.velocity({ opacity: 0 }, { display: "none" });

/* 動畫結束后 元素的 visibility 屬性設為 hidden */
$element.velocity({ opacity: 0 }, { visibility: "hidden" });

　　display 或 visibility 的值可以設為 css 中規定的其他值，比如 display: "inline-block"

　　[注意]當使用reverse方向動畫指令時，display 和 visibility 選項都將被忽略。

動畫指令

　　Velocity 中預定義了幾個常用的快捷動畫指令

【fade】

　　Fade對應為"fadeIn"(淡入) 和"fadeOut"(淡出) 兩個動畫指令，和 jQuery 的$.fadeIn()和$.fadeOut()相似

　　Fade 和 Slide 動畫指令都會動態設置元素的display屬性顯示或隱藏。默認情況下，當元素被顯示，如果是塊級元素(如<div>)，就會被設置成display: block，如果是行級元素(如<span>)，就會被設為display: inline。Velocity會根據元素的標簽類型設置最適合的值

　　如果在配置項中設置了display選項為某值時，動畫結束時該值會覆蓋 Fade 和 Slide 所設置的display屬性值

// 元素會執行平滑淡入的效果
// 當動畫結束時 元素的 display 屬性會被設置成 "table"
$element.velocity("fadeIn", { display: "table" });

　　下面是一個例子

<button id="btn">開始運動</button>
<button id="reset">還原</button>
<div id="test" style="height:100px;width:100px;background:pink;position:absolute;left:0;"></div>
<script src="http://files.cnblogs.com/files/xiaohuochai/jquery-1.10.0.js"></script>
<script src="http://files.cnblogs.com/files/xiaohuochai/velocity.min.js"></script>
<script>
$("#reset").click(function(){
  history.go();
})
var OnOff = true;
$("#btn").click(function(){
  if(OnOff = !OnOff){
    $("#test").velocity("fadeIn"); 
  }else{
    $("#test").velocity("fadeOut"); 
  } 
})
</script>

【slide】

　　Slide 對應為:"slideUp"(收起) 和"slideDown"(展開)兩個動畫指令，和 jQuery 的$.slideUp(),$.slideDown()方法相似，通過動態調整元素的height屬性，讓元素 "收起" 或 "下拉"

// 元素會先"收起"隱藏，延遲500毫秒后 再"下拉"顯示
$element
    .velocity("slideUp", { duration: 1500 })
    .velocity("slideDown", { delay: 500, duration: 1500 });

　　下面是一個例子

<button id="btn">開始運動</button>
<button id="reset">還原</button>
<div id="test" style="height:100px;width:100px;background:pink;position:absolute;left:0;"></div>
<script src="http://files.cnblogs.com/files/xiaohuochai/jquery-1.10.0.js"></script>
<script src="http://files.cnblogs.com/files/xiaohuochai/velocity.min.js"></script>
<script>
$("#reset").click(function(){
  history.go();
})
var OnOff = false;
$("#btn").click(function(){
  if(OnOff = !OnOff){
    $("#test").velocity("slideUp"); 
  }else{
    $("#test").velocity("slideDown"); 
  } 
})
</script>

【scroll】

　　1、滾動瀏覽器內容到目標元素的位置

　　"scroll"動畫指令，比如常用的回頂動畫就可以使用這個指令

/* 回頂動畫，滾動瀏覽器內容到 <body> 的頂部 */
$("body").velocity("scroll", { duration: 500, easing: "easeOutQuart" });

　　下面是一個例子

<body style="height:2000px">
<button id="btn" style="position:fixed;right:0;bottom:0">回到頂部</button>
<script src="http://files.cnblogs.com/files/xiaohuochai/jquery-1.10.0.js"></script>
<script src="http://files.cnblogs.com/files/xiaohuochai/velocity.min.js"></script>
<script>
$("#btn").click(function(){
  $(document.documentElement).velocity("scroll", { duration: 500, easing: "easeOutQuart" });
})
</script> 
</body>

　　2、滾動元素內容到目標位置

　　當一個元素的內容部分溢出產生滾動條，可以使用"scroll"將內容滾動到指定的位置，container選項對應為該元素的選擇器

/* 讓 $("#container") 元素的內容滾動到內部子元素 $("#element3") 所在的位置. */
$("#element3").velocity("scroll", { container: $("#container") });

<div id="box" style="height:100px;width:200px;overflow:auto">
  <p id="element1">1 element. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.</p>
  <p id="element2">2 element. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud </p>
  <p id="element3">3 element. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.</p>
  <p id="element4">4 element. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.</p>
  <p id="element5">5 element. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.</p>
  <p id="element6">6 element. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud </p> 
</div>
<button id="btn">到第四段</button>
<script src="http://files.cnblogs.com/files/xiaohuochai/jquery-1.10.0.js"></script>
<script src="http://files.cnblogs.com/files/xiaohuochai/velocity.min.js"></script>
<script>
$("#btn").click(function(){
  $("#element4").velocity("scroll", { container: $("#box"), easing: "easeOutQuart" });
})
</script>

　　3、設置滾動相對偏移量

　　可以設置相對偏移量，單位默認為px

$element
    /* 滾動到相對 $element 向下偏移250px的地方 */
    .velocity("scroll", { duration: 750, offset: 250 })
    /* 再滾動到相對 $element 向上偏移50px的地方 */
    .velocity("scroll", { duration: 750, offset: -50 });

　　另外，當滾動整個瀏覽器窗口時，如果目標元素為<html>，可以關閉硬件加速，設置mobileHA: false來避免 iOS 中可能出現的頁面閃動問題

/* 滾動整個頁面到一個任意值 */
$("html").velocity("scroll", { offset: "750px", mobileHA: false });

【stop】

　　"stop"指令，可以使當前正在執行的動畫立即停止，類似 jQuery 的$.stop()方法

$element.velocity("stop"); // 停止正在執行的 $element 元素的動畫
$element.velocity("stop", "myQueue"); // 停止某自定義隊列
$element.velocity({ left: 100 });
// 點擊 $("#button")，立即停止當前正在執行的 left 動畫
// 并立即反向執行 left 動畫 (right 方向運動)
$("#button").on("click", function() {
    $element.velocity("stop").velocity("reverse");
});

　　設置stop: true, 可以停止并清空當前正在執行的整個動畫隊列

$element
    .velocity({ width: 100 }, 1000)
    .velocity({ height: 200 }, 1000);

// 如果元素正在執行 width 動畫，點擊 $("#button") 將立即停止當前動畫
// 并移除和跳過將要執行的 height 動畫隊列
$("#button").on("click", function() {
    $element.velocity("stop", true);
});

【finish】

　　"finish"指令會停止當前正在執行的動畫，并直接跳轉到動畫結束的狀態（無過渡）

【reverse】

　　"reverse"指令使動畫反向執行，就像讓一部電影倒著播放。 Reverse 默認會繼承之前動畫的配置選項（比如duration,easing等），但也可以重新設置

$element
    .velocity({ left: 200 }, { duration: 500 })
    .velocity("reverse", { duration: 2000 });

　　下面是一個例子

<button id="btn">開始運動</button>
<button id="reset">還原</button>
<div id="test" style="height:100px;width:100px;background:pink;position:absolute;left:0;"></div>
<script src="http://files.cnblogs.com/files/xiaohuochai/jquery-1.10.0.js"></script>
<script src="http://files.cnblogs.com/files/xiaohuochai/velocity.min.js"></script>
<script>
$("#reset").click(function(){
  history.go();
})
$("#btn").click(function(){
  $("#test").velocity({left:200}).velocity("reverse"); 

})
</script>

特色動畫

　　Velocity 提供了一些特色動畫功能

【transform】

　　Velocity 支持2D/3D變換動畫，比如translate, scale, rotate, skew等

$element.velocity({
    translateX: "200px",
    rotateZ: "45deg"
});

　　以下列舉了所有常用的 transform 相關可用屬性：

{
    /* translate */
    translateX: 20,     // 等同于"20px"
    translateY: "1.5em",
    translateZ: "20px", // IE10+

    /* scale */
    scale: 0.5,
    scaleX: 0.5,
    scaleY: 0.5,

    /* rotate */
    rotate: 45,       // 等同于"45deg"
    rotateX: "45deg", // IE10+
    rotateY: "45deg", // IE10+
    rotateZ: "45deg",

    /* skew */
    skewX: "30deg",
    skewY: "30deg",
}

　　[注意]瀏覽器支持：> IE9

<button id="btn">開始運動</button>
<button id="reset">還原</button>
<div id="test" style="height:100px;width:100px;background:pink;position:absolute;left:0;"></div>
<script src="http://files.cnblogs.com/files/xiaohuochai/jquery-1.10.0.js"></script>
<script src="http://files.cnblogs.com/files/xiaohuochai/velocity.min.js"></script>
<script>
$("#reset").click(function(){
  history.go();
})
$("#btn").click(function(){
  $("#test").velocity({rotateZ: "45deg"}).velocity("reverse"); 
})
</script>

【colors】

　　Velocity顏色動畫支持的顏色屬性有:color, backgroundColor, borderColor, outlineColor。屬性值支持:rgb, hsla, 十六進制顏色碼，但不支持關鍵詞比如:"green"

$element.velocity({
    backgroundColor: "#ff0000",
    /* 背景色 RGBA 中的 A 透明度到50%  */
    backgroundColorAlpha: 0.5,
    /* 字體顏色 RGB 中的 Red 到 50% (0.5 * 255) */
    colorRed: "50%",
    /* 字體顏色 RGB 中的 Blue 值疊加50 */
    colorBlue: "+=50",
    /* 字體顏色 RGBA 中的 A 透明度到85% */
    colorAlpha: 0.85
});

<button id="btn">開始運動</button>
<button id="reset">還原</button>
<div id="test" style="height:100px;width:100px;background:pink;position:absolute;left:0;"></div>
<script src="http://files.cnblogs.com/files/xiaohuochai/jquery-1.10.0.js"></script>
<script src="http://files.cnblogs.com/files/xiaohuochai/velocity.min.js"></script>
<script>
$("#reset").click(function(){
  history.go();
})
$("#btn").click(function(){
  $("#test").velocity({backgroundColor: "#0f0"}).velocity("reverse"); 
})
</script>

【svg】

　　Velocity 支持 SVG 元素動畫，包含所有常用 SVG 屬性，例如:x, y, rx, fill, stroke-width, opacity 等

$svgRectangle.velocity({
    /* 坐標動畫 */
    x: 200,
    r: 25,
    /* 2D 變換動畫 */
    translateX: "200px",
    /* 3D 變換動畫（非IE瀏覽器） */
    translateZ: "200px",
    /* 顏色填充動畫 "Fill" */
    fill: "#ff0000",
    strokeRed: 255,
    strokeGreen: 0,
    strokeBlue: 0,
    /* 一些標準的 CSS 屬性動畫 */
    opacity: 1,
    width: "50%"
});

　　[注意]瀏覽器支持：>= IE9 和 >= Android 3.0

【Hook】

　　Hook 可以設置多個CSS屬性中的單獨一個值，比如 "boxShadow", "clip"等，作用與 jQuery 的$.css()方法相似

$.Velocity.hook($element, "translateX", "500px"); // 值必須寫上單位
$.Velocity.hook(elementNode, "textShadowBlur", "10px"); // 值必須寫上單位

　　還可以獲取單個 CSS 屬性的值

$.Velocity.hook($element, "translateX"); // 獲取元素的translateX值
$.Velocity.hook(elementNode, "textShadowBlur");

【promises】

　　Velocity 可以使用 ES6 的 Promises 對象的語法方式

/* 使用 Velocity 的公有方法，$element 為dom選擇器 可以用jQuery的 或 原生js的 */
$.Velocity.animate($element, { opacity: 0.5 })
    /* 一旦動畫執行完成 執行下面.then()中的回調函數（可以寫多個.then()）*/
    .then(function(elements) { console.log("Resolved."); })
    /* 捕獲錯誤后的回調函數 */
    .catch(function(error) { console.log("Rejected."); });

【Mock】

　　如果設置$.Velocity.mock = true; 會強制頁面里所有的 Velocity 動畫的duration和delay值為0ms，動畫會直接跳轉到結束狀態，這個方法常用于代碼調試

　　也可以將$.Velocity.mock設置為一個整數，可以加快或減慢頁面上所有的 Velocity 動畫速度

/* 頁面里所有 Velocity 動畫 將以10為系數減慢 */
$.Velocity.mock = 10;

【Utility Function】

　　Velocity 的公有方法

/* 標準的多參數語法 */
var divs = document.getElementsByTagName("div");
$.Velocity(divs, { opacity: 0 }, { duration: 1500 });

　　另一種寫法：

// 可選的單參數語法（idea 來源于 CoffeeScript）
// e：element - 元素，一個dom選擇器
// p: properties - 屬性map { property1: value1, property2: value2, … }
// o: options - 配置選項
var divs = document.getElementsByTagName("div");
$.Velocity({ e: divs, p: { opacity: 0 }, o: { duration: 1500 });

高級用法

【函數】

　　屬性值可通過傳遞一個函數來設置動畫效果

// 使 $element 的透明度隨機到一個值 的動畫，每次執行后 元素透明度都不同
$element.velocity({
    opacity: function() { return Math.random() }
});

<button id="btn">開始運動</button>
<button id="reset">還原</button>
<div id="test" style="height:100px;width:100px;background:pink;position:absolute;left:0;"></div>
<script src="http://files.cnblogs.com/files/xiaohuochai/jquery-1.10.0.js"></script>
<script src="http://files.cnblogs.com/files/xiaohuochai/velocity.min.js"></script>
<script>
$("#reset").click(function(){
  history.go();
})
$("#btn").click(function(){
  $("#test").velocity({opacity: function() {return Math.random()}});
})
</script>

【初始值】

　　通常，在動畫執行前，動畫引擎會先查詢 DOM 以確定元素的初始值， Velocity 可以讓用戶自定義元素初始值，這樣可以避免 DOM 查詢

$element.velocity({
    /* translateX 初始值永遠為0 動畫結束值為500px */
    translateX: [ 500, 0 ],
    /* opacity 初始值永遠為0 動畫結束值為1 緩動效果為"easeInSine" */
    opacity: [ 0, "easeInSine", 1 ]
});

$element
    /* 對于這個鏈式動畫，在每次動畫開始前 元素的 translateX 初始值還是0 */
    .velocity({ translateX: [ 500, 0 ] })
    .velocity({ translateX: 1000 });

　　下面是一個例子

<button id="btn">開始運動</button>
<button id="reset">還原</button>
<div id="test" style="height:100px;width:100px;background:pink;position:absolute;left:0;"></div>
<script src="http://files.cnblogs.com/files/xiaohuochai/jquery-1.10.0.js"></script>
<script src="http://files.cnblogs.com/files/xiaohuochai/velocity.min.js"></script>
<script>
$("#reset").click(function(){
  history.go();
})
$("#btn").click(function(){
  $("#test").velocity({ left: [ 500, 100 ] }).velocity("reverse");
  })
</script>

UI插件

　　velocity.ui.js 是 velocity.js 的動畫插件，可以用它快速創建炫酷的動畫特效，它依賴于velocity.js

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

　　前者將多個 Velocity 動畫合并存儲到一個自定義數組里，可以通過引用該數組的名稱在項目中復用，后者能改進嵌套的動畫序列使得更易于管理

【$.Velocity.RunSequence()】

　　如果嵌套動畫的嵌套層次很多時，會難以管理

$element1.velocity({ translateX: 100 }, 1000, function() {
    $element2.velocity({ translateX: 200 }, 1000, function() {
        $element3.velocity({ translateX: 300 }, 1000);
    });
});

　　如何解決上面的問題？直接用$.Velocity.RunSequence()對上面代碼進行重寫：

e：element - 表示元素
p：properties - 屬性集
o：options - 配置選項

// 將嵌套動畫序列儲存到一個數組里，很清晰的顯示了它們的執行順序
var mySequence = [
    { e: $element1, p: { translateX: 100 }, o: { duration: 1000 } },
    { e: $element2, p: { translateX: 200 }, o: { duration: 1000 } },
    { e: $element3, p: { translateX: 300 }, o: { duration: 1000 } }
];

// 調用這個自定義的序列名稱 還可以在其他地方復用
$.Velocity.RunSequence(mySequence);

【內置特效】

　　Velocity.ui.js 內置了很多常用的動畫特效，分為 callout.* 和 transition.* 兩類，下面是所有的特效名：

callout.bounce
callout.shake
callout.flash
callout.pulse
callout.swing
callout.tada
transition.fadeIn
transition.fadeOut
transition.flipXIn
transition.flipXOut
transition.flipYIn
transition.flipYOut
transition.flipBounceXIn
transition.flipBounceXOut
transition.flipBounceYIn
transition.flipBounceYOut
transition.swoopIn
transition.swoopOut
transition.whirlIn
transition.whirlOut
transition.shrinkIn
transition.shrinkOut
transition.expandIn
transition.expandOut
transition.bounceIn
transition.bounceUpIn
transition.bounceUpOut
transition.bounceDownIn
transition.bounceDownOut
transition.bounceLeftIn
transition.bounceLeftOut
transition.bounceRightIn
transition.bounceRightOut
transition.slideUpIn
transition.slideUpOut
transition.slideDownIn
transition.slideDownOut
transition.slideLeftIn
transition.slideLeftOut
transition.slideRightIn
transition.slideRightOut
transition.slideUpBigIn
transition.slideUpBigOut
transition.slideDownBigIn
transition.slideDownBigOut
transition.slideLeftBigIn
transition.slideLeftBigOut
transition.slideRightBigIn
transition.slideRightBigOut
transition.perspectiveUpIn
transition.perspectiveUpOut
transition.perspectiveDownIn
transition.perspectiveDownOut
transition.perspectiveLeftIn
transition.perspectiveLeftOut
transition.perspectiveRightIn
transition.perspectiveRightOut

【stagger, drag 和 backwards 選項】

　　velocity.ui 有stagger,drag,backwards 三個可選配置項

　　[注意]這些選項只在調用內置動畫特效時才起作用

stagger

　　中文譯為"錯開"，當遍歷一組元素時 (each)，設置 stagger 為一個毫秒數 (ms) 能讓每個元素依次延遲該毫秒數執行動畫，產生一種錯開的運動節奏感

// 默認情況下，三個元素會同時運動
// 這里設置了 stagger 為 300 后，每個元素會依次延遲300ms執行動畫
$(".box-stagger").velocity("transition.slideLeftBigIn", { stagger: 300 });

　　下面是一個例子

<style>
.box-stagger{width: 100px;height: 100px;border:1px solid black;background:lightgreen;line-height: 100px;color:white;text-align: center;} 
</style>

<button id="btn">開始運動</button>
<button id="reset">還原</button>
<div class="box-stagger">1</div>
<div class="box-stagger">2</div>
<div class="box-stagger">3</div>

<script>
$("#reset").click(function(){
  history.go();
})
$("#btn").click(function(){
  $(".box-stagger").velocity("transition.slideLeftBigIn", { stagger: 300 });
})
</script>

drag

　　遍歷一組元素時 (each)，當設置drag: true，最后一個元素會產生一種類似緩沖的效果，但它和其他元素的動畫的duration是一樣的

// 最后一個元素產生緩沖效果
$(".box-drag").velocity("transition.slideLeftBigIn", { drag: true });

　　下面是一個例子

<style>
.box-drag{width: 100px;height: 100px;border:1px solid black;background:lightgreen;line-height: 100px;color:white;text-align: center;} 
</style>

<button id="btn">開始運動</button>
<button id="reset">還原</button>
<div class="box-drag">1</div>
<div class="box-drag">2</div>
<div class="box-drag">3</div>

<script>
$("#reset").click(function(){
  history.go();
})
$("#btn").click(function(){
  $(".box-drag").velocity("transition.slideLeftBigIn", { drag: true });
})
</script>

backwards

　　中文譯為"向后的"，這個選項通常和drag一起使用，元素會從最后一個開始依次延遲執行動畫

$('.box-backwards').velocity('transition.slideLeftBigIn', {
    stagger: 300,
    backwards: true
});

　　下面是一個例子

<style>
.box-backwards{width: 100px;height: 100px;border:1px solid black;background:lightgreen;line-height: 100px;color:white;text-align: center;} 
</style>

<button id="btn">開始運動</button>
<button id="reset">還原</button>
<div class="box-backwards">1</div>
<div class="box-backwards">2</div>
<div class="box-backwards">3</div>

<script>
$("#reset").click(function(){
  history.go();
})
$("#btn").click(function(){
  $('.box-backwards').velocity('transition.slideLeftBigIn', {
    stagger: 300,
    backwards: true
  });
})
</script>

【 $.Velocity.RegisterEffect()】

　　$.Velocity.RegisterEffect()方法允許注冊自定義動畫特效，以便在項目中復用

// name：動畫特效名稱 為字符串類型
// defaultDuration：默認動畫執行時間 單位為毫秒(ms)
// calls：動畫隊列數組，property - 動畫屬性，durationPercentage - 當前動畫所占總時間的百分比 (寫成浮點數)，option - 選項
// reset：設置元素在動畫開始時的初始值
$.Velocity.RegisterEffect(name, {
    defaultDuration: duration,
    calls: [
        [ { property: value }, durationPercentage, { options } ],
        [ { property: value }, durationPercentage, { options } ]
    ],
    reset: { property: value, property: value }
});

　　下面是一個使用$.Velocity.RegisterEffect()的例子

$.Velocity.RegisterEffect("callout.customPulse", {
    defaultDuration: 900,
    calls: [
        [ { scaleX: 1.5 }, 0.50 ], // 0.50 為 動畫總時間的50%
        [ { scaleX: 1 }, 0.50 ]
    ]
});

// 調用
$element.velocity("callout.customPulse");

<div id="test" style="height: 100px;width: 100px;background:lightgreen;border-radius: 50%;"></div>
<script>
$.Velocity.RegisterEffect("callout.customPulse", {
    defaultDuration: 900,
    calls: [
        [ { scaleX: 1.5 }, 0.50 ],
        [ { scaleX: 1 }, 0.50 ]
    ]
});
$("#test").click(function(){
  $(this).velocity("callout.customPulse");
})
</script>

　　還可以使用鏈式的寫法注冊一系列自定義動畫

$.Velocity
    .RegisterEffect("transition.customFlipXIn", {
        defaultDuration: 700,
        calls: [
            [ { opacity: 1, rotateY: [ 0, -55 ] } ]
        ]
    });
    .RegisterEffect("transition.customFlipXOut", {
        defaultDuration: 700,
        calls: [
            [ { opacity: 0, rotateY: 55 } ]
        ],
        reset: { rotateY: 0 }
    });

// 調用
$element
    .velocity("transition.customFlipXIn")
    .velocity("transition.customFlipXOut", { delay: 1000, display: "none" });

文章列表