Velocity.js 官方連結
Velocity 專為動畫而設計 ，簡單易用，功能強大，廣泛地被一些主流公司所使用（包括Tumblr, Microsoft and WhatsApp）。並且 Velocity.js 是基於MIT許可協議的開源庫。
Velocity.js 模仿了 jQuery 的語法，可以完美地同 jQuery 協作，當然也能獨立地使用，所以對你來說應該很容易學。
只需要簡單地將目前jQuery的animate()函數調用換成velocity()，因為Velocity將原來jQuery animate()函數的語法和功能在velocity()函數內部都做了解釋映射，所以能兼容以前animate()的使用方式(velocity()還擴展了animate()的功能)。但即使是這樣的一個小改變，也能使你的網站有一個顯著的性能提升。
velocity語法也可以像jquery語法一樣
1 | $element.velocity({'width':'500'},5000, "swing",function() { alert("Hi")}); |
單位有px, em, rem, %, deg，vw/vh 如果不寫單位預設是px，但需要注意的是值的部份不使用預設的話要加上 ""引號，另外也支援計算功能
1 2 3 4 5 6 | $element.velocity({ top: 50, // 默認加px單位 left: "50%", width: "+=5px", //原來寬度加上5 height: "*=2" // 原來高度乘以2 }); |
Velocity.js-初體驗
See the Pen Velocity.js-初體驗 by Jimmy_Wu (@Jimmy_Wu) on CodePen.
Velocity.js-scroll過渡置頂底
Velocity裡，只需在目標元素上調用velocity()方法並傳入”scroll”命令和過渡時間
這個方法將使瀏覽器滾動到選定的元素（jQuery對象,$element）,過渡時間為1000ms。僅使用jQuery實現這個功能也會很複雜，而且將用到多個函數操作。
See the Pen Velocity.js-scroll過渡置頂底 by Jimmy_Wu (@Jimmy_Wu) on CodePen.
Animation Reversal(動畫回復)
1 2 3 4 | $element.animate({ width: "100px" }, 400); // 又使元素在400ms內回覆成原來50px的寬度 $element.animate({ width: "50px" }, 400); |
1 2 3 4 5 | // 先將寬度變到100px $element.velocity({ width: "100px" }, 400); //在400ms內回到原來的狀態 $element.velocity("reverse"); |
See the Pen Velocity.js-Animation Reversal(動畫回復) by Jimmy_Wu (@Jimmy_Wu) on CodePen.
資料來源
Velocity.js官網
velocity.js中文手册 velocity取代jQuery animate()的插件
【譯】Velocity.js介紹