成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

JS動(dòng)畫之緩動(dòng)函數(shù)分析及動(dòng)畫庫

RancherLabs / 2797人閱讀

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

上一篇講了JS動(dòng)畫定時(shí)器相關(guān)知識(shí)，這一篇介紹下緩動(dòng)函數(shù)及流行的動(dòng)畫庫。

熟悉的圖

實(shí)際使用

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

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

原生js使用：
張鑫旭同學(xué)的文章

緩動(dòng)函數(shù)知識(shí)

什么是緩動(dòng)函數(shù)？我的理解是動(dòng)畫參數(shù)與數(shù)學(xué)公式結(jié)合的函數(shù)。

各流行庫緩動(dòng)函數(shù)對(duì)比，以easeInQuad為例，如圖：

Tween.js

jQuery.easing

GSAP

CreateJS

Kute.js

  easingFn.easingQuadraticIn = function (t) { return t*t; };
分析對(duì)比結(jié)果

基本數(shù)學(xué)公式是一樣的，都是2次方；
緩動(dòng)函數(shù)是獨(dú)立的，與平臺(tái)載體無關(guān)；
緩動(dòng)函數(shù)反應(yīng)的是動(dòng)畫進(jìn)程與數(shù)值變化量的對(duì)應(yīng)關(guān)系，具體分析如下：

GSAP Ease在線示例，動(dòng)畫進(jìn)程每增加一格，數(shù)值變化量是增加量是越來越大的，效果就是由慢到快。

與定時(shí)器無關(guān)，具體演變代碼分析如下：
左側(cè)演示的是，由于算法二次方，進(jìn)程每次等量增加1/5，但是變化量卻越來越大；右側(cè)演示的是，雖然定時(shí)器改變了（間隔減小一倍，由“滴答”執(zhí)行五次改成十次），但是變化量的趨勢(shì)是一樣的，相同的進(jìn)程增量，對(duì)應(yīng)的變化量也是相同。

動(dòng)畫庫

動(dòng)畫庫做的事基本就是一下四點(diǎn)：1，定時(shí)器；2，各種屬性變量處理的封裝；3，過程控制；4，緩動(dòng)函數(shù)。

實(shí)際運(yùn)用中還是推薦大家用動(dòng)畫庫，不滿足業(yè)務(wù)需求的可以自己整合，當(dāng)然學(xué)習(xí)的時(shí)候可以找個(gè)簡單的讀下源碼，試著自己寫下核心功能，深入理解動(dòng)畫庫的本質(zhì)，入門我推薦Kute.js。

動(dòng)畫庫推薦（各自優(yōu)劣勢(shì)及區(qū)別下次再詳述）

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

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/93610.html

相關(guān)文章

  • JS動(dòng)畫之緩動(dòng)函數(shù)分析及動(dòng)畫庫

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

    ybak 評(píng)論0 收藏0

  • GSAP - 專業(yè)的 Web 動(dòng)畫庫

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

    MASAILA 評(píng)論0 收藏0

  • 一個(gè)精簡的js動(dòng)畫庫實(shí)現(xiàn) (可自行擴(kuò)展須要的內(nèi)容)

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

    Benedict Evans 評(píng)論0 收藏0

  • 從0到1，開發(fā)一個(gè)動(dòng)畫庫(1)

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

    canopus4u 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

RancherLabs

男|高級(jí)講師

TA的文章

閱讀更多
最新活動(dòng)
閱讀需要支付1元查看
<