js學(xué)習(xí)心得_一個(gè)簡(jiǎn)單的動(dòng)畫(huà)庫(kù)封裝tween.js
更新時(shí)間：2017年07月14日 08:06:43 投稿：jingxian
下面小編就為大家?guī)?lái)一篇js學(xué)習(xí)心得_一個(gè)簡(jiǎn)單的動(dòng)畫(huà)庫(kù)封裝tween.js。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
具體代碼如下：
~function(){
var myEffect = {
Linear:function(t,b,c,d){
return c*t/d+b
},
Quad: {//二次方的緩動(dòng)（t^2）；
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: {//三次方的緩動(dòng)（t^3）
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: {//四次方的緩動(dòng)（t^4）；
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: {//5次方的緩動(dòng)（t^5）；
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: {//正弦曲線(xiàn)的緩動(dòng)（sin(t)）
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: {//指數(shù)曲線(xiàn)的緩動(dòng)（2^t）；
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: {//圓形曲線(xiàn)的緩動(dòng)（sqrt(1-t^2)）；
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: {//指數(shù)衰減的正弦曲線(xiàn)緩動(dòng)；
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: {//超過(guò)范圍的三次方緩動(dòng)（(s+1)*t^3 - s*t^2）；
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;
}
},
zfBounce: {//指數(shù)衰減的反彈緩動(dòng)。
easeIn: function(t,b,c,d){
return c - zhufengEffect.zfBounce.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 zhufengEffect.zfBounce.easeIn(t*2, 0, c, d) * .5 + b;
else return zhufengEffect.zfBounce.easeOut(t*2-d, 0, c, d) * .5 + c*.5 + b;
}
}
};
//move:實(shí)現(xiàn)多方向的運(yùn)動(dòng)動(dòng)畫(huà)
/*
curEle:當(dāng)前要運(yùn)動(dòng)的元素
target:當(dāng)前動(dòng)畫(huà)的目標(biāo)位置,存儲(chǔ)的是每一個(gè)方向的目標(biāo)位置{left:xxx,top:xxx...}
duration:當(dāng)前動(dòng)畫(huà)的總時(shí)間
*/
//effect支持以下的情況
/*
*/
function move(curEle,target,duration,effect,callback){
//處理我們需要的動(dòng)畫(huà)效果
var tempEffect = myEffect.Linear;
if(typeof effect === "number"){
switch(effect){
case 0:
tempEffect = myEffect.Linear;
break;
case 1:
tempEffect = myEffect.Circ.easeInOut;
break;
case 2:
tempEffect = myEffect.Elastic.easeOut;
break;
case 3:
tempEffect = myEffect.Back.easeOut;
break;
case 4:
tempEffect = myEffect.Bounce.easeOut;
break;
case 5:
tempEffect = myEffect.Expo.easeIn;
}
}else if(effect instanceof Array){
tempEffect = effect.length>=2 ? myEffect[effect[0]][effect[1]] : myEffect[effect[0]]
}else if(typeof effect === "function"){
//我們的實(shí)際意義應(yīng)該是:effect是不傳遞值的，傳遞進(jìn)來(lái)的函數(shù)應(yīng)該是回調(diào)函數(shù)的值
callback = effect;
}
//在每一次執(zhí)行方法之前，首先把當(dāng)前元素之前正在運(yùn)行的動(dòng)畫(huà)結(jié)束掉
window.clearInterval(curEle.timer);
//根據(jù)target獲取每一個(gè)方向的起始值begin和總距離change
var begin = {},change = {};
for(var key in target){
if(target.hasOwnProperty(key)){
begin[key] = utils.css(curEle,key)
change[key] = target[key] - begin[key];
}
}
//實(shí)現(xiàn)多方向的運(yùn)動(dòng)動(dòng)畫(huà)
var time = 0;
curEle.timer = window.setInterval(function(){
time+=10;
//到達(dá)目標(biāo)：結(jié)束動(dòng)畫(huà)，讓當(dāng)前元素的樣式值等于目標(biāo)樣式值
if(time>=duration){
utils.css(curEle,target);
window.clearInterval(curEle.timer);
//在動(dòng)畫(huà)結(jié)束的時(shí)候，如果用戶(hù)把回調(diào)函數(shù)傳遞給我了，我就把用戶(hù)傳遞的回調(diào)函數(shù)執(zhí)行,不僅執(zhí)行還把this的指向改為當(dāng)前操作的元素
typeof callback === "function" ? callback.call(curEle) : null;
//或者callback && callback()
return;
}
//沒(méi)到達(dá)目標(biāo):分別獲取每一個(gè)方向的當(dāng)前位置，給當(dāng)前位置設(shè)置樣式即可。
for(var key in target){
if(target.hasOwnProperty(key)){
var curPos = tempEffect(time,begin[key],change[key],duration);
utils.css(curEle,key,curPos);
}
}
},10)
}
window.myAnimate = move;
}()
以上這篇js學(xué)習(xí)心得_一個(gè)簡(jiǎn)單的動(dòng)畫(huà)庫(kù)封裝tween.js就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- JS使用tween.js動(dòng)畫(huà)庫(kù)實(shí)現(xiàn)輪播圖并且有切換功能
- tween.js緩動(dòng)補(bǔ)間動(dòng)畫(huà)算法示例
- 詳解tween.js 中文使用指南
- 詳解tween.js的使用教程
- 原生JS實(shí)現(xiàn)移動(dòng)端web輪播圖詳解（結(jié)合Tween算法造輪子）
- JavaScript實(shí)現(xiàn)的Tween算法及緩沖特效實(shí)例代碼
- JavaScript Tween算法及緩動(dòng)效果
- JS Tween 顏色漸變
- JS+HTML5手機(jī)開(kāi)發(fā)之滾動(dòng)和慣性緩動(dòng)實(shí)現(xiàn)方法分析
- javascript中的緩動(dòng)效果實(shí)現(xiàn)程序
- tweenjs緩動(dòng)算法的使用實(shí)例分析
相關(guān)文章
詳解js產(chǎn)生對(duì)象的3種基本方式（工廠模式，構(gòu)造函數(shù)模式，原型模式）
本篇文章主要介紹了js產(chǎn)生對(duì)象的3種基本方式（工廠模式，構(gòu)造函數(shù)模式，原型模式） ，具有一定的參考價(jià)值，有興趣的可以了解一下2017-01-01
HTML+JS實(shí)現(xiàn)經(jīng)典推箱子游戲
今天，這篇文章將利用HTML，CSS，JS的知識(shí)編寫(xiě)一個(gè)童年經(jīng)典游戲?-?推箱子，文中的示例代碼講解詳細(xì)，感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2022-11-11
這篇文章主要介紹了JavaScript中的對(duì)象序列化介紹,JavaScript中的對(duì)象序列化是通過(guò)JSON.stringify()來(lái)實(shí)現(xiàn)的,而反序列化則通過(guò)JSON.parse()來(lái)實(shí)現(xiàn),需要的朋友可以參考下2014-12-12
這篇文章主要介紹了Typescript3.9 常用新特性一覽，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-05-05
JavaScript實(shí)現(xiàn)垂直向上無(wú)縫滾動(dòng)特效代碼
下面小編就為大家?guī)?lái)一篇JavaScript實(shí)現(xiàn)垂直向上無(wú)縫滾動(dòng)特效代碼。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-11-11
可以根據(jù)按的鍵盤(pán)上的鍵，顯示鍵盤(pán)動(dòng)作，并顯示keyCode值等2008-06-06
深入理解Canvas模糊問(wèn)題產(chǎn)生的原因與解決辦法
我們?cè)谑褂肅anvas進(jìn)行繪圖時(shí),經(jīng)常會(huì)出現(xiàn)繪制的文字或者圖片比較模糊,這篇文章我們就來(lái)討論一下Canvas模糊問(wèn)題產(chǎn)生的原因與解決辦法吧2024-04-04
js 創(chuàng)建一個(gè)浮動(dòng)div的代碼
js 創(chuàng)建一個(gè)浮動(dòng)div的代碼，一般用來(lái)指導(dǎo)用戶(hù)下面的操作與多條件選擇。點(diǎn)擊一下就可顯示，具體的大家可以自由發(fā)揮。2009-12-12
gulpjs是一個(gè)前端構(gòu)建工具，與gruntjs相比，gulpjs無(wú)需寫(xiě)一大堆繁雜的配置參數(shù)，API也非常簡(jiǎn)單，學(xué)習(xí)起來(lái)很容易，下面這篇文章主要給大家介紹了關(guān)于前端構(gòu)建工具之gulp的配置與搭建的相關(guān)資料，需要的朋友可以參考下。2017-06-06
js全選實(shí)現(xiàn)和判斷是否有復(fù)選框選中的方法
這篇文章主要介紹了js全選實(shí)現(xiàn)和判斷是否有復(fù)選框選中的方法,涉及javascript操作復(fù)選框的技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-02-02