javascript動(dòng)畫(huà)算法實(shí)例分析
本文實(shí)例講述了javascript動(dòng)畫(huà)算法。分享給大家供大家參考。具體如下:
動(dòng)畫(huà)算法
Linear:無(wú)緩動(dòng)效果(勻速運(yùn)動(dòng));
Quadratic:二次方的緩動(dòng);
Cubic:三次方的緩動(dòng)
Quartic:四次方的緩動(dòng);
Quintic:五次方的緩動(dòng);
Sinusoidal:正弦曲線(xiàn)的緩動(dòng);
Exponential:指數(shù)曲線(xiàn)的緩動(dòng);
Circular:圓形曲線(xiàn)的緩動(dòng);
Elastic:指數(shù)衰減的正弦曲線(xiàn)緩動(dòng);
Back:超過(guò)范圍的三次方緩動(dòng));
Bounce:指數(shù)衰減的反彈緩動(dòng)。
每個(gè)效果都分三個(gè)緩動(dòng)方式(方法),分別是:
easeIn:從0開(kāi)始加速的運(yùn)動(dòng);
easeOut:減速到0的運(yùn)動(dòng);
easeInOut:前半段從0開(kāi)始加速,后半段減速到0的運(yùn)動(dòng)。
函數(shù)的四個(gè)參數(shù)分別代表:
t--- current time(當(dāng)前時(shí)間);
b--- beginning value(初始值);
c--- change in value(變化量);
d---duration(持續(xù)時(shí)間)
運(yùn)算的結(jié)果就是當(dāng)前的運(yùn)動(dòng)路程。
Tween.js如下:
Tween = { Linear: function(t,b,c,d){ return c*t/d + b; }, Quad: { easeIn: function(t,b,c,d){ return c*(t/=d)*t + b; }, easeOut: function(t,b,c,d){ return -c *(t/=d)*(t-2) + b; }, easeInOut: function(t,b,c,d){ if ((t/=d/2) < 1) return c/2*t*t + b; return -c/2 * ((--t)*(t-2) - 1) + b; } }, Cubic: { easeIn: function(t,b,c,d){ return c*(t/=d)*t*t + b; }, easeOut: function(t,b,c,d){ return c*((t=t/d-1)*t*t + 1) + b; }, easeInOut: function(t,b,c,d){ if ((t/=d/2) < 1) return c/2*t*t*t + b; return c/2*((t-=2)*t*t + 2) + b; } }, Quart: { easeIn: function(t,b,c,d){ return c*(t/=d)*t*t*t + b; }, easeOut: function(t,b,c,d){ return -c * ((t=t/d-1)*t*t*t - 1) + b; }, easeInOut: function(t,b,c,d){ if ((t/=d/2) < 1) return c/2*t*t*t*t + b; return -c/2 * ((t-=2)*t*t*t - 2) + b; } }, Quint: { easeIn: function(t,b,c,d){ return c*(t/=d)*t*t*t*t + b; }, easeOut: function(t,b,c,d){ return c*((t=t/d-1)*t*t*t*t + 1) + b; }, easeInOut: function(t,b,c,d){ if ((t/=d/2) < 1) return c/2*t*t*t*t*t + b; return c/2*((t-=2)*t*t*t*t + 2) + b; } }, Sine: { easeIn: function(t,b,c,d){ return -c * Math.cos(t/d * (Math.PI/2)) + c + b; }, easeOut: function(t,b,c,d){ return c * Math.sin(t/d * (Math.PI/2)) + b; }, easeInOut: function(t,b,c,d){ return -c/2 * (Math.cos(Math.PI*t/d) - 1) + b; } }, Expo: { easeIn: function(t,b,c,d){ return (t==0) ? b : c * Math.pow(2, 10 * (t/d - 1)) + b; }, easeOut: function(t,b,c,d){ return (t==d) ? b+c : c * (-Math.pow(2, -10 * t/d) + 1) + b; }, easeInOut: function(t,b,c,d){ if (t==0) return b; if (t==d) return b+c; if ((t/=d/2) < 1) return c/2 * Math.pow(2, 10 * (t - 1)) + b; return c/2 * (-Math.pow(2, -10 * --t) + 2) + b; } }, Circ: { easeIn: function(t,b,c,d){ return -c * (Math.sqrt(1 - (t/=d)*t) - 1) + b; }, easeOut: function(t,b,c,d){ return c * Math.sqrt(1 - (t=t/d-1)*t) + b; }, easeInOut: function(t,b,c,d){ if ((t/=d/2) < 1) return -c/2 * (Math.sqrt(1 - t*t) - 1) + b; return c/2 * (Math.sqrt(1 - (t-=2)*t) + 1) + b; } }, Elastic: { easeIn: function(t,b,c,d,a,p){ if (t==0) return b; if ((t/=d)==1) return b+c; if (!p) p=d*.3; if (!a || a < Math.abs(c)) { a=c; var s=p/4; } else var s = p/(2*Math.PI) * Math.asin (c/a); return -(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b; }, easeOut: function(t,b,c,d,a,p){ if (t==0) return b; if ((t/=d)==1) return b+c; if (!p) p=d*.3; if (!a || a < Math.abs(c)) { a=c; var s=p/4; } else var s = p/(2*Math.PI) * Math.asin (c/a); return (a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b); }, easeInOut: function(t,b,c,d,a,p){ if (t==0) return b; if ((t/=d/2)==2) return b+c; if (!p) p=d*(.3*1.5); if (!a || a < Math.abs(c)) { a=c; var s=p/4; } else var s = p/(2*Math.PI) * Math.asin (c/a); if (t < 1) return -.5*(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b; return a*Math.pow(2,-10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )*.5 + c + b; } }, Back: { easeIn: function(t,b,c,d,s){ if (s == undefined) s = 1.70158; return c*(t/=d)*t*((s+1)*t - s) + b; }, easeOut: function(t,b,c,d,s){ if (s == undefined) s = 1.70158; return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b; }, easeInOut: function(t,b,c,d,s){ if (s == undefined) s = 1.70158; if ((t/=d/2) < 1) return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b; return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b; } }, Bounce: { easeIn: function(t,b,c,d){ return c - Tween.Bounce.easeOut(d-t, 0, c, d) + b; }, easeOut: function(t,b,c,d){ if ((t/=d) < (1/2.75)) { return c*(7.5625*t*t) + b; } else if (t < (2/2.75)) { return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b; } else if (t < (2.5/2.75)) { return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b; } else { return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b; } }, easeInOut: function(t,b,c,d){ if (t < d/2) return Tween.Bounce.easeIn(t*2, 0, c, d) * .5 + b; else return Tween.Bounce.easeOut(t*2-d, 0, c, d) * .5 + c*.5 + b; } } }
希望本文所述對(duì)大家的javascript程序設(shè)計(jì)有所幫助。
- PHP 雙鏈表(SplDoublyLinkedList)簡(jiǎn)介和使用實(shí)例
- 10分鐘教你用python動(dòng)畫(huà)演示深度優(yōu)先算法搜尋逃出迷宮的路徑
- tween.js緩動(dòng)補(bǔ)間動(dòng)畫(huà)算法示例
- 利用JavaScript在網(wǎng)頁(yè)實(shí)現(xiàn)八數(shù)碼啟發(fā)式A*算法動(dòng)畫(huà)效果
- JavaScript排序算法動(dòng)畫(huà)演示效果的實(shí)現(xiàn)方法
- 用隊(duì)列模擬jquery的動(dòng)畫(huà)算法實(shí)例
- 看動(dòng)畫(huà)學(xué)算法之Java實(shí)現(xiàn)doublyLinkedList
相關(guān)文章
javascript數(shù)據(jù)結(jié)構(gòu)之二叉搜索樹(shù)實(shí)現(xiàn)方法
這篇文章主要介紹了javascript數(shù)據(jù)結(jié)構(gòu)之二叉搜索樹(shù)實(shí)現(xiàn)方法,較為詳細(xì)的分析了二叉搜索樹(shù)的概念、原理與JavaScript實(shí)現(xiàn)二叉搜索樹(shù)的方法,對(duì)于學(xué)習(xí)JavaScript數(shù)據(jù)結(jié)構(gòu)具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-11-11JS尾遞歸的實(shí)現(xiàn)方法及代碼優(yōu)化技巧
這篇文章主要介紹了JS尾遞歸的實(shí)現(xiàn)方法及代碼優(yōu)化技巧,結(jié)合實(shí)例形式分析了尾遞歸的原理、JS實(shí)現(xiàn)方法及優(yōu)化技巧,需要的朋友可以參考下2019-01-01uniapp如何實(shí)現(xiàn)tabBar之間傳參
這篇文章主要給大家介紹了關(guān)于uniapp如何實(shí)現(xiàn)tabBar之間傳參的相關(guān)資料,文中通過(guò)代碼示例介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2023-08-08Js 利用正則表達(dá)式和replace函數(shù)獲取string中所有被匹配到的文本(推薦)
這篇文章主要介紹了Js 利用正則表達(dá)式和replace函數(shù)獲取string中所有被匹配到的文本,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2018-10-10原生Js實(shí)現(xiàn)按的數(shù)據(jù)源均分時(shí)間點(diǎn)幻燈片效果(已封裝)
騰訊新聞詳情頁(yè)有一個(gè)事件進(jìn)展效果, 覺(jué)得挺有意思. 于是, 就有了本文的效果: 按數(shù)據(jù)源均分時(shí)間點(diǎn)幻燈. 花了三個(gè)多小時(shí)寫(xiě)的, 當(dāng)然, 包括樣式與調(diào)試. 兼容主流。2010-12-12JS中頁(yè)面與頁(yè)面之間超鏈接跳轉(zhuǎn)中文亂碼問(wèn)題的解決辦法
在原頁(yè)面一張圖片上添加了一個(gè)鏈接,鏈接中有中文,于是在跳轉(zhuǎn)過(guò)程中出現(xiàn)中文亂碼問(wèn)題,下面給大家分享下解決方案2016-12-12