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。