js 动画封装

最新推荐文章于 2023-09-21 08:00:19 发布

8427003

最新推荐文章于 2023-09-21 08:00:19 发布

阅读量930

点赞数

分类专栏： web前端

本文链接：https://blog.csdn.net/qq8427003/article/details/17786585

版权

web前端专栏收录该内容

65 篇文章 0 订阅

订阅专栏

/*------------------------------------------------------------------------------------
 * 动画类
 * @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;