這篇文章主要介紹了聊聊JS動畫庫 Velocity.js的使用，現在分享給大家，也給大家做個參考。
前言
又到了炎熱的7月，很久沒有更新技術文章了，因為上個月月底實習結束，從公司離職。然後最近在弄自己的專案和考駕照，為了下次公司的應徵做準備，送別了女朋友到外地，哩哩啦啦半個月把一切事情都辦妥後，還是靜下心來學習新技術和寫一寫技術文章，希望能繼續堅持下去。
JS動畫
隨著網路越來越豐富多樣，網頁端的美化和新技術層出不窮，作為一個網站的瀏覽者，更多吸引他們的除了保證網站的流暢之外還有各種酷炫的交互動效。
網頁的交互動效大概分為 css動畫，js動畫 。
JS動畫的優點
既然我們大概了解了這兩類動畫，那麼我們來分析下他們不同的優點
css動畫由於css3可以根據css屬性自訂動畫所以這類動畫的優點就是不用進行計算和更改dom 會顯得非常流暢。
JS動畫js動畫擁有強大的性能，並且優於css動畫的特點就是既然是根據js來改變屬性值所以沒有css那樣的局限性，可以實現更多的功能和動效，或許有人說js動畫某些函式庫會很慢，其實js動畫本質很快，只是jquery讓它慢了下來。因為有時候由於配合jquery使用，所以由於jquery本身的一些功能，所以在實現的時候就會顯得很慢。
velocity.js 使用方法
#JS動畫的庫非常多，各有各的有點，例如jquery自帶的animate動畫還有webGL,或利用canvas，SVG等實現其他效果，這次來講的就是眾多庫中的其中一個velocity.js 動畫庫。
velocity.js 既可以單獨用JavaScript使用，也可以配合jquery使用，使用方法(注意先將velocity.js下載好後在body標籤下引入，然後在新script標籤中書寫以下程式碼) ：
//jquery方法
var $p = $('p')
$p.velocity({属性:值,属性:值})
//javascript 方法
var op = document.getElementById('p')
op.velocity({属性:值,属性:值})這裡需要注意得幾點：
1.裡面的屬性不能加引號寫入，而後面的值如果有字串則加引號，如果為整數則不用例如width:100 和width："100px"
2.裡面的屬性值不可一次傳入多個，例如在css中padding:5px 5px 6px 5px;我們可以這樣傳入但是在velocity中如果想傳入多個值則為{paddingLeft：5, paddingRirght:5 省略}
3.裡面的屬性值如果是多個轉折的需要第二個首字母大寫如上
velocity.js 詳細介紹
上面已經講到需要改變的值作為物件傳入velocity的第一個參數，那麼第二個參數就是它的指定動畫選項包含：
duration 持續時間
easing 緩動方式
delay 延遲執行
loop 循環次數
begin 和complete 回呼函數
display(值與css相同，可設定為auto)
在講velocity指定動畫選項前我們先說一下velocity支援的值: px em rem % vm vh 或利用運算子*=2 表示目前值的2倍或/=2等運算方式
下面一個一個分析下指定動畫選項：
duration 持續時間
這個是代表動畫的持續時間預設值為毫秒(ms) 你可以這樣使用：
// 表示一秒内将透明度从1到0
$p.velocity({opacity:0},{duration:1000})也可以這樣使用:
// 效果相同
$p.velocity({opacity:0},1000)velocity也自訂了三種持續方式：slow（600ms) ,normal（400ms）,fast(200ms),可依自己實際需求使用
easing 緩動方式
這個是代表著動畫以何種方式進行變換：ease-in-out(逐加逐減),ease-in (先加速後勻速),dase-out (先勻速後減速)
也可以根據三角函數緩動"easeInOutSine" ，css貝塞爾曲線[0.17,0.67,0.83,0.67] 或彈簧物理[張力，摩擦力] 等值進行實現
# delay 延遲執行
表示這個動畫延遲多少時間執行預設單位毫秒(ms)
// 五秒后执行此动画 delay：5000
loop 迴圈次數
表示這個動畫需要的循環次數:
// 循环五次 loop:5 // 无限循环 loop:true
begin和complete回呼函數
這兩個表示在動畫開始前和動畫結束後所執行的函數：
begin:function(){ somgthing... },complete:function(){ somgthing... }其他功能：
velocity還有一些其他功能，這裡就日後再說，例如：reverse(反轉)，scrolling(滾動)，color(顏色)，transform(變換包含scale縮放rotate旋轉translation平移等)
上面是我整理給大家的，希望未來會對大家有幫助。
相關文章：
##nodejs mongodb aggregate級聯查詢操作範例
##
以上是聊聊JS動畫庫 Velocity.js的使用的詳細內容。更多資訊請關注PHP中文網其他相關文章！
