//obj运动对象
//attr运动元素
//target运动目标点
//duration 运动时间
//fx 运动方式
//callBack回调函数
function mTween(obj,attr,target,duration,fx,callBack){
//获取起始位置
var begin = parseFloat(getComputedStyle(obj)[attr]);
//算出总距离
var count = target - begin;
//var time = new Date().getTime();
//记录时间
var time = +new Date();
//防止定时器冲突，所以每次开启先清除。
clearInterval(obj[attr])
obj[attr] = setInterval(function(){
//获取已过去的时间
var t = +new Date() - time ;
// console.log(1);
//已过去时间超出总时间代表运动结束
if(t>=duration){
t = duration;
//清除定时器
clearInterval(obj[attr]);
}
//var value = count*t/duration + begin;
//根据传入的运动方式算出obj应该运动的值
var value = Tween[fx](t,begin,count,duration);
obj.style[attr] = value + 'px';
if(t == duration){
//如果有回调函数就执行回调
callBack&&callBack();
}
},16)
}
/*
* t : time 已过时间
* b : begin 起始值
* c : count 总的运动值
* d : duration 持续时间
*
* 曲线方程
*
* http://www.cnblogs.com/bluedream2009/archive/2010/06/19/1760909.html
* */
/**
* @param {number} t 已过时间
* @param {number} b 起始值
* @param {number} c 总的运动值
* @param {number} d 持续时间
*/
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
这里写图片描述
