//obj運(yùn)動(dòng)對(duì)象
//attr運(yùn)動(dòng)元素
//target運(yùn)動(dòng)目標(biāo)點(diǎn)
//duration 運(yùn)動(dòng)時(shí)間
//fx 運(yùn)動(dòng)方式
//callBack回調(diào)函數(shù)
function mTween(obj,attr,target,duration,fx,callBack){
//獲取起始位置
var begin = parseFloat(getComputedStyle(obj)[attr]);
//算出總距離
var count = target - begin;
//var time = new Date().getTime();
//記錄時(shí)間
var time = +new Date();
//防止定時(shí)器沖突汁展，所以每次開啟先清除。
clearInterval(obj[attr])
obj[attr] = setInterval(function(){
//獲取已過(guò)去的時(shí)間
var t = +new Date() - time ;
// console.log(1);
//已過(guò)去時(shí)間超出總時(shí)間代表運(yùn)動(dòng)結(jié)束
if(t>=duration){
t = duration;
//清除定時(shí)器
clearInterval(obj[attr]);
}
//var value = count*t/duration + begin;
//根據(jù)傳入的運(yùn)動(dòng)方式算出obj應(yīng)該運(yùn)動(dòng)的值
var value = Tween[fx](t,begin,count,duration);
obj.style[attr] = value + 'px';
if(t == duration){
//如果有回調(diào)函數(shù)就執(zhí)行回調(diào)
callBack&&callBack();
}
},16)
}
/*
* t : time 已過(guò)時(shí)間
* b : begin 起始值
* c : count 總的運(yùn)動(dòng)值
* d : duration 持續(xù)時(shí)間
*
* 曲線方程
*
* http://www.cnblogs.com/bluedream2009/archive/2010/06/19/1760909.html
* */
/**
* @param {number} t 已過(guò)時(shí)間
* @param {number} b 起始值
* @param {number} c 總的運(yùn)動(dòng)值
* @param {number} d 持續(xù)時(shí)間
*/
var tweenPathFunc = {
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 * 0.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 * 0.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 * (0.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 -0.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) * 0.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 + 0.75) + b;
} else if (t < 2.5 / 2.75) {
return c * (7.5625 * (t -= 2.25 / 2.75) * t + 0.9375) + b;
} else {
return c * (7.5625 * (t -= 2.625 / 2.75) * t + 0.984375) + b;
}
},
easeInOut: function(t, b, c, d) {
if (t < d / 2) return Tween.Bounce.easeIn(t * 2, 0, c, d) * 0.5 + b;
else return Tween.Bounce.easeOut(t * 2 - d, 0, c, d) * 0.5 + c * 0.5 + b;
}
}
};
linearTween
這里寫圖片描述
easeInQuad
這里寫圖片描述
easeOutQuad
這里寫圖片描述
easeInOutQuad
這里寫圖片描述
easeInCubic
這里寫圖片描述
easeOutCubic
這里寫圖片描述
easeInOutCubic
這里寫圖片描述
easeInQuart
這里寫圖片描述
easeOutQuart
這里寫圖片描述
easeInOutQuart
這里寫圖片描述
easeInQuint
這里寫圖片描述
easeOutQuint
這里寫圖片描述
easeInOutQuint
這里寫圖片描述
easeInExpo
這里寫圖片描述
easeOutExpo
這里寫圖片描述
easeInOutExpo
這里寫圖片描述
easeInCirc
這里寫圖片描述
easeOutCirc
這里寫圖片描述
easeInOutCirc
這里寫圖片描述
easeInSine
這里寫圖片描述
easeOutSine
這里寫圖片描述
easeInOutSine
這里寫圖片描述
easeInBack
這里寫圖片描述
easeOutBack
這里寫圖片描述
easeInOutBack
這里寫圖片描述
easeInElastio
這里寫圖片描述
easeOutElastio
這里寫圖片描述
easeInOutElastio
這里寫圖片描述
easeInBounce
這里寫圖片描述
easeOutBounce
這里寫圖片描述
easeInOutBounce
這里寫圖片描述
