javascript简易动画类

【实例演示】

 

【程序源码】

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56

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; }();

【使用方法】

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

// 透明度渐变 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();                }

 

【源码下载】 

fx