第二章：基礎知識
一、velocity和jQuery：
Velocity函數是獨立於jQuery的，但兩者可以結合使用。通常這么做的好處是可以利用jQuery的鏈式操作：當你先用jQuery選擇了一個元素后，就可以用這個元素去調用.velocity()為它添加動畫效果。例如：
//將一個變量分配給某個jQuery元素對象。
var $div = $(“div”);
//使用velocity設置該元素的動畫
$div.velocity({ opacity : 0 });
//該句語法與jQuery自有的animate函數相同；
//$div.animate({ opatity : 0 });
二、參數：
velocity接受多個參數。第一個參數是一個對象，用於將CSS屬性映射到最終的期望數值上。例如：
//設置元素的width屬性值變動至“500px”且其opacity屬性值變動至1的動畫。
$element.velocity({ width:500px , opacity :1 }) ;
★小提示：如果你提供的屬性值包含字母，那么要將它們用半角引號括起來。
可以將一個指定動畫的對象作為第二個參數傳入。
還有一種參數簡寫語法，那就是不將選項對象作為第二個參數傳入，而是使用逗號分隔參數語法。這種寫法需要列舉出動畫的持續時間、緩動形式和動畫執行完畢后觸發的一個毀掉函數。
三、屬性
基於CSS的屬性動畫與基於javascript的屬性動畫有兩點區別：
1.velocity針對每個CSS屬性，只接受一個唯一值，這點與css不同。因此可以這樣傳入動畫：
$element.velocity({ padding : 10 }) ;
要傳入多個值時必須一一列出來：
$element.velocity({
paddingTop : 10,
paddingRight : 10,
paddingLeft : 20,
paddingBottom : 20
});
2.javascript的屬性名稱中，單詞之間的連接號去掉了，除第一個單詞外，其余單詞都首字母大寫。例如：padding-left變成了paddingLeft。
四、值
velocity支持px、em、rem、%、deg、vw和vh這些單位，如果沒有為數值提供單位，那么就會根據CSS屬性類型自動指派一個單位給它。對於大多數屬性，px是默認單位。
五、鏈式操作
當一個元素鏈式調用多個velocity函數時，它們會自動排成隊列，這意味着前一個動畫結束后一個動畫馬上開始。
六、使用velocity：選項
1.duration（持續時間）
可以以毫秒為單位指定duration選項，該選項指定一個動畫調用需要花費多長時間才能完成，或者也可以將duration指定為以下三個簡寫duration之一：“slow”（相當於600ms），“normal”（相當於400ms）或“fast”（相當於200ms）。以毫秒為單位指定duration值時，請提供一個不帶單位的整數值。
2.easing（緩動）
“ease-in-out”緩動類型就表示動畫一開始要逐漸加速最后要逐漸減速。
“ease-in”緩動類型則使動畫在一開始就達到加速的目的，然后一直到動畫結束。
“ease-out”緩動類型使動畫以恆定速度開始並持續一段時間，然后在動畫結束前逐漸減速。
（1）jQuery UI中的三角函數緩動：
$div.velocity({width:"300px"},"easeInOutSine");
（2）CSS緩動：
“ease-in”、“ease-in-out”、“ease-out”、“ease”（“ease-in-out”的另一個更緩和的版本）
（3）CSS的貝塞爾曲線：通過貝塞爾曲線緩動，可以完全控制一個緩動加速曲線的結構。參數格式是一個含有四個小數的數組。
$div.velocity({width:"300px"},[0.17,0.67,0.83,0.67]);
（4）彈簧物理
這類緩動類型就是模仿彈簧在拉伸之后被突然釋放的彈動行為。參數格式是一個含有兩個值的數組[張力、摩擦力]。張力越大（默認：500），整體速度和彈動幅度就越大。摩擦力越小（默認：20），彈簧結尾處的震動速度就越快。
$div.velocity({width : "300px"},[250,15]);
（5）如果不想實驗各種張力和摩擦力數值，“spring”緩動就是一種隨手可用的彈簧物理緩動的預設。
$div.velocity({width:"500px"},"spring");
3.begin（開始）和complete（完成）
使用begin和complete選項可以指定要在動畫中的特定時間點觸發的函數：為begin設置的函數會在動畫開始前觸發。與之相反，為complete設置的函數會在動畫完成時調用。使用這兩個選項，每次調用動畫時都會調用一次指定函數，即使同時制作多個元素的動畫也是如此。
$div.velocity(
{ opacity:0 ,width:"500px"},
{
begin : function(){
alert("begin!");
},
complete : function(){
alert("complete!")
}
})
4.loop（循環）
將loop選項設置為一個整數，該整數是幾，動畫就在調用的屬性映射匯總的值與調用之前元素的值之間交替幾次。
$div.velocity({height:"10em"},{loop : 2});
除了可以傳入整數以外，還可以將true傳給loop，這樣會無限觸發循環。
無限循環對於加載指示器大有幫助。（警燈）
$div.velocity({ opacity:0},{loop:true});
5.delay（延遲）
將delay指定為多少毫秒，在動畫開始之前就會暫停多長時間。delay選項的目的是將動畫的定時邏輯完全保留在velocity內，而不是在velocity的動畫開始時依賴jquery的$.delay()函數來更改。
$div.velocity({opacity:0},{delay:100})；
可以同時設置delay和loop選項，這樣可以在循環交替之間創建一個停頓。
//循環四次，每次循環之間都等待1000毫秒
$div.velocity({height:"+=100px",width:"+=100px"},{loop:4,delay:1000});
6.display（顯示）和visibility（可見性）
velocity中的display和visibility選項與CSS中的同名屬性一一對應，接受的值也相同，包括“none”，“inline”，“inline-block”，“block”，“flex”等。
$div.velocity({opacity:0},{display:"block"});
七、其他功能
velocity.js的其他值得一提的功能包括：reverse（反轉）、scrolling（滾動）、color（顏色）和transform（變換，包括translation“平移”、rotate“旋轉”和“scale”縮放）