Velocity
- 一個(gè)簡(jiǎn)單易用肪康、高性能竣稽、功能豐富的輕量級(jí)JS動(dòng)畫(huà)庫(kù)。它能和 jQuery 完美協(xié)作功舀，并和$.animate()有相同的 API萍倡， 但它不依賴 jQuery，可單獨(dú)使用辟汰。 Velocity 不僅包含了 $.animate() 的全部功能列敲， 還擁有：顏色動(dòng)畫(huà)、轉(zhuǎn)換動(dòng)畫(huà)(transforms)帖汞、循環(huán)戴而、 緩動(dòng)、SVG 動(dòng)畫(huà)翩蘸、和 滾動(dòng)動(dòng)畫(huà) 等特色功能所意。
- 注:使用 jQuery 時(shí)，必須在 Velocity 之前 加載 jQuery
優(yōu)勢(shì):
- 它比 $.animate() 更快更流暢(在安卓也不會(huì)卡頓)，性能甚至高于 CSS3 animation扶踊， 是 jQuery 和 CSS3 transition 的最佳組合泄鹏，它支持所有現(xiàn)代瀏覽器，最低可兼容到 IE8 和 Android 2.3秧耗。
- 可以支持顏色動(dòng)畫(huà)备籽、轉(zhuǎn)換動(dòng)畫(huà)(transforms)
// 標(biāo)準(zhǔn)寫(xiě)法
$(".element").velocity({
left: "200px"
}, {
duration: 450,
delay: 1000
});
// $.animate() 的寫(xiě)法，效果同上
$(".element").delay(1000).velocity({left: "200px"}, 450);
區(qū)別
- velocity針對(duì)每個(gè)CSS屬性分井，只接受一個(gè)唯一值车猬，這點(diǎn)與css不同。因此可以這樣傳入動(dòng)畫(huà)：
$element.velocity({ padding : 10 }) ;
//要傳入多個(gè)值時(shí)必須一一列出來(lái)：
$element.velocity({
paddingTop : 10,
paddingRight : 10,
paddingLeft : 20,
paddingBottom : 20
});
// javascript的屬性名稱中杂抽，單詞之間的連接號(hào)去掉了诈唬，改為駝峰命名法韩脏。例如：padding-left變成了paddingLeft缩麸。
- 值
velocity支持px、em赡矢、rem杭朱、%、deg吹散、vw和vh這些單位弧械，如果沒(méi)有為數(shù)值提供單位，默認(rèn)px空民。
鏈?zhǔn)讲僮?/h1>
當(dāng)一個(gè)元素鏈?zhǔn)秸{(diào)用多個(gè)velocity函數(shù)時(shí)刃唐，它們會(huì)自動(dòng)排成隊(duì)列，這意味著前一個(gè)動(dòng)畫(huà)結(jié)束后一個(gè)動(dòng)畫(huà)馬上開(kāi)始界轩。
開(kāi)始和結(jié)束時(shí)的回調(diào)
begin（開(kāi)始）和complete（完成）
為begin設(shè)置的函數(shù)會(huì)在動(dòng)畫(huà)開(kāi)始前觸發(fā)画饥。與之相反，為complete設(shè)置的函數(shù)會(huì)在動(dòng)畫(huà)完成時(shí)調(diào)用浊猾。
$div.velocity(
{ opacity:0 ,width:"500px"},
{
begin : function(){
alert("begin!");
},
complete : function(){
alert("complete!")
}
})
循環(huán)與延遲
將loop選項(xiàng)設(shè)置為一個(gè)整數(shù)抖甘，該整數(shù)是幾，動(dòng)畫(huà)就在調(diào)用的屬性映射匯總的值與調(diào)用之前元素的值之間交替幾次葫慎。
也可以將true傳給loop衔彻，觸發(fā)無(wú)限循環(huán)。
將delay指定為多少毫秒偷办，在動(dòng)畫(huà)開(kāi)始之前就會(huì)暫停多長(zhǎng)時(shí)間艰额。delay選項(xiàng)的目的是將動(dòng)畫(huà)的定時(shí)邏輯完全保留在velocity內(nèi)，而不是在velocity的動(dòng)畫(huà)開(kāi)始時(shí)依賴jquery的$.delay()函數(shù)來(lái)更改椒涯。
當(dāng)一個(gè)元素鏈?zhǔn)秸{(diào)用多個(gè)velocity函數(shù)時(shí)刃唐，它們會(huì)自動(dòng)排成隊(duì)列，這意味著前一個(gè)動(dòng)畫(huà)結(jié)束后一個(gè)動(dòng)畫(huà)馬上開(kāi)始界轩。
開(kāi)始和結(jié)束時(shí)的回調(diào)
begin（開(kāi)始）和complete（完成）
為begin設(shè)置的函數(shù)會(huì)在動(dòng)畫(huà)開(kāi)始前觸發(fā)画饥。與之相反，為complete設(shè)置的函數(shù)會(huì)在動(dòng)畫(huà)完成時(shí)調(diào)用浊猾。
$div.velocity(
{ opacity:0 ,width:"500px"},
{
begin : function(){
alert("begin!");
},
complete : function(){
alert("complete!")
}
})
將loop選項(xiàng)設(shè)置為一個(gè)整數(shù)抖甘，該整數(shù)是幾，動(dòng)畫(huà)就在調(diào)用的屬性映射匯總的值與調(diào)用之前元素的值之間交替幾次葫慎。
也可以將true傳給loop衔彻，觸發(fā)無(wú)限循環(huán)。
將delay指定為多少毫秒偷办，在動(dòng)畫(huà)開(kāi)始之前就會(huì)暫停多長(zhǎng)時(shí)間艰额。delay選項(xiàng)的目的是將動(dòng)畫(huà)的定時(shí)邏輯完全保留在velocity內(nèi)，而不是在velocity的動(dòng)畫(huà)開(kāi)始時(shí)依賴jquery的$.delay()函數(shù)來(lái)更改椒涯。
可以同時(shí)設(shè)置delay和loop選項(xiàng)柄沮，這樣可以在循環(huán)交替之間創(chuàng)建一個(gè)停頓。
//循環(huán)四次，每次循環(huán)之間都等待1000毫秒
$div.velocity(
{height:"+=100px",width:"+=100px"},
{loop:4,delay:1000}
);
