js 动画封装

/*------------------------------------------------------------------------------------ * 动画类 * @param {object}   dom       执行动画的dom * @param {object}   list      css样式列表，如{marginLeft:'200px',width:'500px'} * @param {number}   time      执行时间 * @param {string}   tweenType 缓动类型 * @param {Function} callback  动画执行完毕后的回调函数------------------------------------------------------------------------------------*/window.requestAnimFrame = (function(){return window.requestAnimationFrame    ||window.webkitRequestAnimationFrame ||window.mozRequestAnimationFrame    ||window.oRequestAnimationFrame      ||window.msRequestAnimationFrame     ||function(/* function */ callback, /* DOMElement */ element){window.setTimeout(callback, 1000 / 60);};})();M.Animate = function(dom , list , time , tweenType ,callback){return new M.Animate.prototype.init( dom , list , time , tweenType ,callback );};M.Animate.prototype = {init:function(dom , list , time , tweenType ,callback){this.dom  = dom;this.time = time || 300;this.preTime = 10;this.list = list;this.callback = callback;this.tweenType = tweenType || "easeInOut";this._d = Math.ceil( this.time / this.preTime );this._t=0;this._c = {};this._b = {};for(var k in this.list){this._b[k] = parseFloat( this.currentStyle()[k] ) || 0;this._c[k] = parseFloat( this.list[k] ) -  this._b[k];}if( this.dom._animate ){this.dom._animate.stop();}this.run();this.dom._animate = this;},currentStyle:function(){var element = this.dom;return element.currentStyle || document.defaultView.getComputedStyle(element, null);},run:function(){if( this._t > this._d ){if( M.typeOf(this.callback) == "function" ){this.callback();}return;}else if(this._stop){return;}else{for(var k in this.list){var r = this.tween[ this.tweenType ]( this._t , this._b[k] , this._c[k] ,this._d ) + ( ("opacity|".indexOf(k+"|")>-1)?"":"px");this.dom.style[k] = r;}this._t++;requestAnimFrame( M.bindFunction(this,this.run) ,this.preTime );}},stop:function(){this._stop = true;},tween : {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;},linear: function(t,b,c,d){ return c*t/d + b; }}}M.Animate.prototype.init.prototype = M.Animate.prototype;

版权所有：www.meilele.com