javascript简易动画类
2010-07-04 13:29 BlueDream 阅读(1168) 评论(0) 编辑 收藏 举报【实例演示】
【程序源码】
function Animate(el, prop, opts) { this.el = el; this.prop = prop; this.from = opts.from; this.to = opts.to; this.time = opts.time; this.callback = opts.callback; this.animDiff = this.to - this.from; } Animate.prototype._setStyle = function(val) { switch(this.prop) { case 'opacity': this.el.style[this.prop] = val; this.el.style.filter = 'alpha(opacity=' + val * 100 + ')'; break; default: this.el.style[this.prop] = val + 'px'; break; } } Animate.prototype._animate = function() { var that = this; this.now = new Date(); this.diff = this.now - this.startTime; if (this.diff > this.time) { this._setStyle(this.to); if (this.callback) { this.callback.call(this); } clearInterval(this.timer); return; } this.percentage = (Math.floor((this.diff / this.time) * 100) / 100); this.val = (this.animDiff * this.percentage) + this.from; this._setStyle(this.val); } Animate.prototype.start = function() { var that = this; this.startTime = new Date(); clearInterval(this.timer); this.timer = setInterval(function() { that._animate.call(that); }, 4); } Animate.canTransition = function() { var el = document.createElement('foo'); el.style.cssText = '-webkit-transition: all .5s linear;'; return !!el.style.webkitTransitionProperty; }();
【使用方法】
// 透明度渐变 function changeOpacity() { // 透明度渐变 从1 - 0 渐变时间1000ms var fx = 'opacity', from = 1, to = 0, time = 1000; // 渐变完毕执行的回调函数 var callback = function() { from = 0; to = 1; new Animate(demo, fx, { from: from, to: to, time: time, callback: resetButton}).start(); } // 实例化渐变函数 new Animate(demo, fx, { from: from, to: to, time: time, callback: callback }).start(); }
【源码下载】