資訊專欄INFORMATION COLUMN
摘要：上一篇講了動畫定時器相關(guān)知識，這一篇介紹下緩動函數(shù)及流行的動畫庫。動畫庫動畫庫做的事基本就是一下四點，定時器，各種屬性變量處理的封裝，過程控制，緩動函數(shù)。
上一篇講了JS動畫定時器相關(guān)知識，這一篇介紹下緩動函數(shù)及流行的動畫庫。
熟悉的圖 實際使用jquery animate()+jquery.easing插件的使用：
$(selector).animate(styles,speed,easing,callback)
原生js使用：
張鑫旭同學(xué)的文章
什么是緩動函數(shù)？我的理解是動畫參數(shù)與數(shù)學(xué)公式結(jié)合的函數(shù)。
各流行庫緩動函數(shù)對比，以easeInQuad為例，如圖：
Tween.js
jQuery.easing
GSAP
CreateJS
Kute.js
easingFn.easingQuadraticIn = function (t) { return t*t; };
分析對比結(jié)果
基本數(shù)學(xué)公式是一樣的，都是2次方；
緩動函數(shù)是獨立的，與平臺載體無關(guān)；
緩動函數(shù)反應(yīng)的是動畫進程與數(shù)值變化量的對應(yīng)關(guān)系，具體分析如下：
GSAP Ease在線示例，動畫進程每增加一格，數(shù)值變化量是增加量是越來越大的，效果就是由慢到快。
與定時器無關(guān)，具體演變代碼分析如下：
左側(cè)演示的是，由于算法二次方，進程每次等量增加1/5，但是變化量卻越來越大；右側(cè)演示的是，雖然定時器改變了（間隔減小一倍，由“滴答”執(zhí)行五次改成十次），但是變化量的趨勢是一樣的，相同的進程增量，對應(yīng)的變化量也是相同。
動畫庫做的事基本就是一下四點：1，定時器；2，各種屬性變量處理的封裝；3，過程控制；4，緩動函數(shù)。
實際運用中還是推薦大家用動畫庫，不滿足業(yè)務(wù)需求的可以自己整合，當然學(xué)習(xí)的時候可以找個簡單的讀下源碼，試著自己寫下核心功能，深入理解動畫庫的本質(zhì)，入門我推薦Kute.js。
動畫庫推薦（各自優(yōu)劣勢及區(qū)別下次再詳述）jquery animate(插件jquery.easing.js)
Tween.js
GSAP
CreateJS
Kute.js
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/93610.html
摘要：上一篇講了動畫定時器相關(guān)知識，這一篇介紹下緩動函數(shù)及流行的動畫庫。動畫庫動畫庫做的事基本就是一下四點，定時器，各種屬性變量處理的封裝，過程控制，緩動函數(shù)。 上一篇講了JS動畫定時器相關(guān)知識，這一篇介紹下緩動函數(shù)及流行的動畫庫。 熟悉的圖 showImg(https://segmentfault.com/img/bV6ACd?w=751&h=533); 實際使用 jquery anima...
摘要：雖然沒有視覺效果，但這就是基本的值動畫。有專門的位置可以查詢緩動函數(shù)。另外，不要期望在不支持的瀏覽器上做動畫。是專業(yè)動畫庫，在大部分情況下，它也具備更好的動畫性能。 說到在網(wǎng)頁里創(chuàng)建動畫，你可能很快會想到j(luò)Query的animate()方法，或者css3的animation和transition?，F(xiàn)在，本文將介紹另一個web動畫的可選方案，GSAP。 GSAP的全名是GreenSock...
摘要：一個精簡的動畫庫實現(xiàn)項目地址由于項目須要做一些動畫，并不想讓整個項目引入太多的內(nèi)容導(dǎo)致文件過大，所以為了滿足要求寫了一個精簡的可擴展的動畫庫功能是簡單模仿里面的函數(shù)用法這里的會返回到之間的數(shù)字再根據(jù)情況自己處理須要處理的動畫改變屬性到代碼過 一個精簡的js動畫庫實現(xiàn) 項目地址 animation.js 由于項目須要做一些動畫，并不想讓整個項目引入太多的內(nèi)容導(dǎo)致文件過大，所以為了滿足要求...
摘要：傳送門從到，開發(fā)一個動畫庫如今市面上關(guān)于動畫的開源庫多得數(shù)不勝數(shù)，有關(guān)于甚至是渲染的，百花齊放，效果炫酷。當你看到的時候可能不大明白外界傳入的到底是啥其實是一個數(shù)組，它的每一個元素都保存著獨立動畫的起始與結(jié)束兩種狀態(tài)。 傳送門：從0到1，開發(fā)一個動畫庫(2) 如今市面上關(guān)于動畫的開源庫多得數(shù)不勝數(shù)，有關(guān)于CSS、js甚至是canvas渲染的，百花齊放，效果炫酷。但你是否曾想過，自己親手...
閱讀 2022·2021-09-30 09:46
閱讀 1428·2019-08-30 15:43
閱讀 1201·2019-08-29 13:28
閱讀 1985·2019-08-29 11:24
閱讀 1776·2019-08-26 13:22
閱讀 4097·2019-08-26 12:01
閱讀 1881·2019-08-26 11:33
閱讀 3293·2019-08-23 15:34
