JS動畫之緩動函數分析及動畫庫

上一篇講了JS動畫定時器相關知識，這一篇介紹下緩動函數及流行的動畫庫。

熟悉的圖

實際使用

jquery animate()+jquery.easing插件的使用：

$(selector).animate(styles,speed,easing,callback)

原生js使用：
張鑫旭同窗的文章

緩動函數知識

什麼是緩動函數？個人理解是動畫參數與數學公式結合的函數。

各流行庫緩動函數對比，以easeInQuad爲例，如圖：

Tween.js

jQuery.easing

GSAP

CreateJS

Kute.js

easingFn.easingQuadraticIn = function (t) { return t*t; };

分析對比結果

基本數學公式是同樣的，都是2次方；
緩動函數是獨立的，與平臺載體無關；
緩動函數反應的是動畫進程與數值變化量的對應關係，具體分析以下：

GSAP Ease在線示例，動畫進程每增長一格，數值變化量是增長量是愈來愈大的，效果就是由慢到快。

與定時器無關，具體演變代碼分析以下：
左側演示的是，因爲算法二次方，進程每次等量增長1/5，可是變化量卻愈來愈大；右側演示的是，雖然定時器改變了（間隔減少一倍，由「滴答」執行五次改爲十次），可是變化量的趨勢是同樣的，相同的進程增量，對應的變化量也是相同。

動畫庫

動畫庫作的事基本就是一下四點：1，定時器；2，各類屬性變量處理的封裝；3，過程控制；4，緩動函數。

實際運用中仍是推薦你們用動畫庫，不知足業務需求的能夠本身整合，固然學習的時候能夠找個簡單的讀下源碼，試着本身寫下核心功能，深刻理解動畫庫的本質，入門我推薦Kute.js。

動畫庫推薦（各自優劣勢及區別下次再詳述）

jquery animate(插件jquery.easing.js)
Tween.js
GSAP
CreateJS
Kute.js