/** * obj: DOM id 或 DOM 对象 * prop: 样式属性，如left、width、opacity * v1: 初始值 * v2: 最终值 * obj: { duration: 动画时长(毫秒), tweenType: 缓动类型, callBack: 回调 } * 用法：var t = new Tween('obj', 'left', 0, 800); t.run(); */ var Tween = (function() { /** * t: current time 当前时间 * b: begin value 初始值 * c: changing value 变化量 * d: duration 持续时间 * 都是曲线函数的一些参数，画个图就好理解了 * t是x轴的单位、b是y轴的初始值、b+c是y轴的最终值、d是x轴的最终值，计算出来的结果就是y轴各时刻的值 */ var _tween = { Linear: { easeIn: function(t,b,c,d) { return c*t/d + b; }, easeOut: 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; } }, 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; } }, 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; } }, 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; } }, 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; } }, 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; } } }; var _interval = 10; var _Tween = function(obj, prop, v1, v2, opt) { this.obj = typeof(obj) === 'string' ? document.getElementById(obj) : obj; this.prop = prop; this.v1 = v1; this.v2 = v2; opt = opt || {}; this.duration = (opt.duration || 1000) / _interval; //默认1秒 this.tweenType = opt.tweenType || 'Quart'; this.currentTime = 0; this.callBack = opt.callBack || function(){}; }; _Tween.prototype = { _checkParam : function() { return this.obj && this.prop && _tween[this.tweenType] && (typeof this.v1 !== 'undefined') && (typeof this.v2 !== 'undefined'); }, easeIn : function() { this._calculate('easeIn'); }, easeOut : function() { this._calculate('easeOut'); }, _calculate : function(type) { var t = this; if (!this._checkParam()) { return; } var result = _tween[this.tweenType][type](this.currentTime, this.v1, this.v2 - this.v1, this.duration); if (this.prop == 'opacity') { this.obj.style.opacity = result.toFixed(2); this.obj.style.filter = 'alpha(opacity=' + Math.ceil(result * 100) + ')'; } else { this.obj.style[this.prop] = Math.ceil(result) + 'px'; } if (this.currentTime++ < this.duration) { this.timeoutId = setTimeout(function(){ t._calculate(type) }, _interval); } else { this.currentTime = 0; this.callBack(); } }, cancel : function() { clearTimeout(this.timeoutId); } }; _Tween.prototype.run = _Tween.prototype.easeIn; return _Tween; })(); 