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

ybak 發布于2019-08-01 18:44 / 2029人閱讀

摘要：上一篇講了動畫定時器相關知識，這一篇介紹下緩動函數及流行的動畫庫。動畫庫動畫庫做的事基本就是一下四點，定時器，各種屬性變量處理的封裝，過程控制，緩動函數。

上一篇講了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

GPU云服務器云服務器慣性緩動 java 動畫庫 js 暫停動畫 js動畫效果

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/52075.html

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

摘要：上一篇講了動畫定時器相關知識，這一篇介紹下緩動函數及流行的動畫庫。動畫庫動畫庫做的事基本就是一下四點，定時器，各種屬性變量處理的封裝，過程控制，緩動函數。上一篇講了JS動畫定時器相關知識，這一篇介紹下緩動函數及流行的動畫庫。熟悉的圖 showImg(https://segmentfault.com/img/bV6ACd?w=751&h=533); 實際使用 jquery anima...

RancherLabs 2019-08-22 15:38 評論0 收藏0
GSAP - 專業的 Web 動畫庫

摘要：雖然沒有視覺效果，但這就是基本的值動畫。有專門的位置可以查詢緩動函數。另外，不要期望在不支持的瀏覽器上做動畫。是專業動畫庫，在大部分情況下，它也具備更好的動畫性能。說到在網頁里創建動畫，你可能很快會想到jQuery的animate()方法，或者css3的animation和transition。現在，本文將介紹另一個web動畫的可選方案，GSAP。 GSAP的全名是GreenSock...

MASAILA 2019-08-19 18:25 評論0 收藏0
一個精簡的js動畫庫實現 (可自行擴展須要的內容)

摘要：一個精簡的動畫庫實現項目地址由于項目須要做一些動畫，并不想讓整個項目引入太多的內容導致文件過大，所以為了滿足要求寫了一個精簡的可擴展的動畫庫功能是簡單模仿里面的函數用法這里的會返回到之間的數字再根據情況自己處理須要處理的動畫改變屬性到代碼過一個精簡的js動畫庫實現項目地址 animation.js 由于項目須要做一些動畫，并不想讓整個項目引入太多的內容導致文件過大，所以為了滿足要求...

Benedict Evans 2019-08-21 17:34 評論0 收藏0
從0到1，開發一個動畫庫(1)

摘要：傳送門從到，開發一個動畫庫如今市面上關于動畫的開源庫多得數不勝數，有關于甚至是渲染的，百花齊放，效果炫酷。當你看到的時候可能不大明白外界傳入的到底是啥其實是一個數組，它的每一個元素都保存著獨立動畫的起始與結束兩種狀態。傳送門：從0到1，開發一個動畫庫(2) 如今市面上關于動畫的開源庫多得數不勝數，有關于CSS、js甚至是canvas渲染的，百花齊放，效果炫酷。但你是否曾想過，自己親手...

canopus4u 2019-08-22 13:56 評論0 收藏0