Velocity.js的使用

前面的話

　　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="https://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="https://files.cnblogs.com/files/xiaohuochai/jquery-1.10.0.js"></script>
<script src="https://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="https://files.cnblogs.com/files/xiaohuochai/jquery-1.10.0.js"></script>
<script src="https://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="https://files.cnblogs.com/files/xiaohuochai/jquery-1.10.0.js"></script>
<script src="https://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="https://files.cnblogs.com/files/xiaohuochai/jquery-1.10.0.js"></script>
<script src="https://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="https://files.cnblogs.com/files/xiaohuochai/jquery-1.10.0.js"></script>
<script src="https://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="https://files.cnblogs.com/files/xiaohuochai/jquery-1.10.0.js"></script>
<script src="https://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="https://files.cnblogs.com/files/xiaohuochai/jquery-1.10.0.js"></script>
<script src="https://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="https://files.cnblogs.com/files/xiaohuochai/jquery-1.10.0.js"></script>
<script src="https://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="https://files.cnblogs.com/files/xiaohuochai/jquery-1.10.0.js"></script>
<script src="https://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="https://files.cnblogs.com/files/xiaohuochai/jquery-1.10.0.js"></script>
<script src="https://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="https://files.cnblogs.com/files/xiaohuochai/jquery-1.10.0.js"></script>
<script src="https://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" });