velocity.js的使用

關於velocity的簡介

學習以前先找到官網:http://velocityjs.org/

中文手冊（教程）：http://www.mrfront.com/docs/velocity.js/ 

velocity是一個簡單易用、高性能、功能豐富的輕量級JS動畫庫。它能和 jQuery 完美協做，並和$.animate()有相同的 API， 但它不依賴 jQuery，可單獨使用。 Velocity 不只包含了 $.animate() 的所有功能， 還擁有：顏色動畫、轉換動畫(transforms)、循環、 緩動、SVG 動畫、和 滾動動畫 等特點功能。能夠兼容i8 和android2.3.

它比 $.animate() 更快更流暢，性能甚至高於 CSS3 animation， 是 jQuery 和 CSS3 transition 的最佳組合，它支持全部現代瀏覽器，最低可兼容到 IE8 和 Android 2.3。

Velocity 目前已被數以千計的公司使用在本身的項目中，包括 WhatsApp, Tumblr, Windows, Samsung, Uber 等，這裏Libscore.com 統計了哪些站點正使用 velocity.js。

因此說:css3不兼容i8，在i8時打不開，而用velovity.js可兼容。

           jQuery是PC端的插件，對於移動端不太適用，有點卡頓，可是velocity適用於移動端和PC端       

           例velocity的基本用法和配置屬性

            

           duration：表明動畫的時長

           delay：表明動畫的延時時間

序列動畫的三種實現方式

           1、delay   缺點：須要手動維護delay和duration之間的關係

          2、經過complete    缺點：實現代碼一層層的嵌套，可讀性差

         

        3、經過定義一個seq動畫序列,經過velocity RunSequence實現序列，這種方法是可推薦使用的

          

 vellocity的特性（特別適合動畫序列的場景）

當鼠標移到上面時，左右搖擺的動畫：首先綁定一個事件，選中元素，在velocity的參數中（callout,shake）

預約義動畫的效果，在實際項目中能夠直接用，很是方便

       

若是在預約義效果中找不到定義的動畫效果，可以使用自定義來定義動畫

                     

四個步驟：

　　定義變量（動畫元素、事件變量）

　　自定義動畫

　　動畫序列

　　事件綁定

js插件的學習方法（官網大體瞭解、運行例子、熟悉細節）