js學(xué)習(xí)心得_一個(gè)簡單的動(dòng)畫庫封裝tween.js
公司主營業(yè)務(wù)：成都做網(wǎng)站、網(wǎng)站設(shè)計(jì)、移動(dòng)網(wǎng)站開發(fā)等業(yè)務(wù)。幫助企業(yè)客戶真正實(shí)現(xiàn)互聯(lián)網(wǎng)宣傳，提高企業(yè)的競爭能力。創(chuàng)新互聯(lián)建站是一支青春激揚(yáng)、勤奮敬業(yè)、活力青春激揚(yáng)、勤奮敬業(yè)、活力澎湃、和諧高效的團(tuán)隊(duì)。公司秉承以“開放、自由、嚴(yán)謹(jǐn)、自律”為核心的企業(yè)文化，感謝他們對(duì)我們的高要求，感謝他們從不同領(lǐng)域給我們帶來的挑戰(zhàn)，讓我們激情的團(tuán)隊(duì)有機(jī)會(huì)用頭腦與智慧不斷的給客戶帶來驚喜。創(chuàng)新互聯(lián)建站推出水城免費(fèi)做網(wǎng)站回饋大家。
具體代碼如下：
~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: {//正弦曲線的緩動(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ù)曲線的緩動(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: {//圓形曲線的緩動(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ù)衰減的正弦曲線緩動(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: {//超過范圍的三次方緩動(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)畫
/*
curEle:當(dāng)前要運(yùn)動(dòng)的元素
target:當(dāng)前動(dòng)畫的目標(biāo)位置,存儲(chǔ)的是每一個(gè)方向的目標(biāo)位置{left:xxx,top:xxx...}
duration:當(dāng)前動(dòng)畫的總時(shí)間
*/
//effect支持以下的情況
/*
*/
function move(curEle,target,duration,effect,callback){
//處理我們需要的動(dòng)畫效果
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)來的函數(shù)應(yīng)該是回調(diào)函數(shù)的值
callback = effect;
}
//在每一次執(zhí)行方法之前，首先把當(dāng)前元素之前正在運(yùn)行的動(dòng)畫結(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)畫
var time = 0;
curEle.timer = window.setInterval(function(){
time+=10;
//到達(dá)目標(biāo)：結(jié)束動(dòng)畫，讓當(dāng)前元素的樣式值等于目標(biāo)樣式值
if(time>=duration){
utils.css(curEle,target);
window.clearInterval(curEle.timer);
//在動(dòng)畫結(jié)束的時(shí)候，如果用戶把回調(diào)函數(shù)傳遞給我了，我就把用戶傳遞的回調(diào)函數(shù)執(zhí)行,不僅執(zhí)行還把this的指向改為當(dāng)前操作的元素
typeof callback === "function" ? callback.call(curEle) : null;
//或者callback && callback()
return;
}
//沒到達(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è)簡單的動(dòng)畫庫封裝tween.js就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持創(chuàng)新互聯(lián)。
網(wǎng)站名稱：js學(xué)習(xí)心得_一個(gè)簡單的動(dòng)畫庫封裝tween.js
轉(zhuǎn)載注明：http://chinadenli.net/article32/jgjpsc.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供云服務(wù)器、、建站公司、ChatGPT、電子商務(wù)、網(wǎng)站策劃
聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)
- 定制一個(gè)微信小程序費(fèi)用多少 2022-11-05
- 上海如何快速微信小程序定制開發(fā) 2020-12-17
- 運(yùn)營干貨：美容美發(fā)店接入微信小程序該怎么玩？ 2021-05-29
- 微信小程序的優(yōu)勢有哪些？ 2016-07-27
- 為什么說移動(dòng)端網(wǎng)站建設(shè)比微信小程序更有生命力 2022-05-22
- 微信小程序已經(jīng)普及了 2021-02-03
- 微信小程序有哪些優(yōu)勢？ 2022-04-30
- 微信小程序?qū)儆蛎_放，8元搶購 2022-06-10
- 做一個(gè)微信小程序需要花費(fèi)多少錢？ 2022-11-29
- 為什么要做微信小程序，小程序?qū)ζ髽I(yè)有什么好處？ 2021-01-29
- 微信小程序的市場的市場規(guī)模有多大呢？ 2016-10-25
- 微信小程序給電商提供的6點(diǎn)支持 2021-02-20