velocity.js用法整理1

velocity.js

此框架相對於JQ的運動算法， 有很大的優勢。

例如，A和B兩個元素，position：absolute;  top:0; 現在讓A元素用JQ的animate，B用velocity，1秒內改變top值為500。此時，可以明顯的看出區別，使用JQ運動的元素運動起來效果非常不平滑，velocity的元素非常平滑。

這只是velocity各種強大里的一個基本方面，還有很多JQ無法直接實現的功能。

英文API地址：http://www.julian.com/research/velocity/

下面開始記錄用法

1.基礎用法一

html:

<div id="testEle1" style=" position:absolute; width:100px; height:100px; background-color:#000; left:100px; top:100px;"></div>

JS:

$("#testEle1").velocity({
    left:800
},500)

2.基礎用法二

$("#testEle1").velocity({
    left:800
},{
    duration:2000
})

第二個參數除了duration(時間)之外，常用到的還有

easing:規定在不同的動畫點中設置動畫速度的 easing 函數

loop:是否循環/循環的圈數

begin & complete:動畫開始前&結束后的回調函數

progress:進度

progress: function(elements, complete, remaining, start, tweenValue) {
            
}

complete代表完成的百分比，remaining代表運動結束剩余的時間，start表示調用開始的絕對時間（這個參數目前想不到有什么用）

delay：延遲執行的時間

display&visibility : 動畫執行完成后隱藏

queue:velocity不同於JQ的animate，設置false,可以使得一個新的動畫立即調用運行，如果不設置，當有針對同一元素的多個運動時，會一次運行，反之，同時運行，遇到沖突的屬性，會取后面的。

具體用法遺忘或者不清晰時參考英文API。