js anim小框架完善的问题
<!DOCTYPE HTML><html> <head> <meta charset="gb2312" /> <title></title> <style> .a { position:absolute; left:100px; top:100px; width:100px; height:100px; border:1px solid red; background:#ddd; opacity:1; } </style> </head> <body> <div id="a" class="a">a</div> <div id="b">b</div> <button id="pause">pause</button> <button id="move">move</button> <script> function $(o){return document.getElementById(o)} var Easing = { 'linear' : function(t){ return t; }, 'easeIn' : function(t){ return t * t; }, 'easeOut' : function(t) { return ( 2 - t) * t; }, 'easeBoth' : function(t){ return (t *= 2) < 1 ? .5 * t * t : .5 * (1 - (--t) * (t - 2)); }, 'easeInStrong' : function(t){ return t * t * t * t; }, 'easeOutStrong' : function(t){ return 1 - (--t) * t * t * t; }, 'easeBothStrong' : function(t){ return (t *= 2) < 1 ? .5 * t * t * t * t : .5 * (2 - (t -= 2) * t * t * t); }, 'elasticIn' : function(t){ var p = .3, s = p / 4; if (t === 0 || t === 1) return t; return -(Math.pow(2, 10 * (t -= 1)) * Math.sin((t - s) * (2 * Math.PI) / p)); }, 'elasticOut' : function(t){ var p = .3, s = p / 4; if (t === 0 || t === 1) return t; return Math.pow(2, -10 * t) * Math.sin((t - s) * (2 * Math.PI) / p) + 1; }, 'elasticBoth' : function(t){ var p = .45, s = p / 4; if (t === 0 || (t *= 2) === 2) return t; if (t < 1) { return -.5 * (Math.pow(2, 10 * (t -= 1)) * Math.sin((t - s) * (2 * Math.PI) / p)); } return Math.pow(2, -10 * (t -= 1)) * Math.sin((t - s) * (2 * Math.PI) / p) * .5 + 1; }, 'backIn' : function(t){ if (t === 1) t -= .001; return t * t * ((BACK_CONST + 1) * t - BACK_CONST); }, 'backOut' : function(t){ return (t -= 1) * t * ((BACK_CONST + 1) * t + BACK_CONST) + 1; }, 'backBoth' : function(t){ if ((t *= 2 ) < 1) { return .5 * (t * t * (((BACK_CONST *= (1.525)) + 1) * t - BACK_CONST)); } return .5 * ((t -= 2) * t * (((BACK_CONST *= (1.525)) + 1) * t + BACK_CONST) + 2); }, 'bounceIn' : function(t){ return 1 - Easing.bounceOut(1 - t); }, 'bounceOut' : function(t){ var s = 7.5625, r; if (t < (1 / 2.75)) { r = s * t * t; } else if (t < (2 / 2.75)) { r = s * (t -= (1.5 / 2.75)) * t + .75; } else if (t < (2.5 / 2.75)) { r = s * (t -= (2.25 / 2.75)) * t + .9375; } else { r = s * (t -= (2.625 / 2.75)) * t + .984375; } return r; }, 'bounceBoth' : function(t){ if (t < .5) { return Easing.bounceIn(t * 2) * .5; } return Easing.bounceOut(t * 2 - 1) * .5 + .5; } }; var Anim = function(el, json, options){ this.fps = 30; this.el = typeof el == 'string' ? document.getElementById(el) : el; this.json = json || {}; options = options || {}; this.duration = options.duration || 700; this.easing = options.easing || 'linear'; this.start = options.start || function(){}; this.complete = options.complete || function(){}; this.init(); } Anim.prototype = { init: function(){ clearInterval(this.timer); var _this = this; this.timer = setInterval(function(){ _this.start(_this.el); _this.doMove(); }, this.fps); }, css: function(attr, value){ if (value != null){ attr == "opacity" ? (this.el.style.filter = "alpha(opacity=" + value + ")", this.el.style.opacity = value / 100) : this.el.style[attr] = value + "px"; } else { var a = parseFloat(window.getComputedStyle ? getComputedStyle(this.el, null)[attr] : this.el.currentStyle[attr]); return a || 0; } }, doMove: function(){ var opt = this.json; var bComplete = true; for(var p in opt){ var iCur = p == "opacity" ? parseInt(this.css(p).toFixed(2) * 100) : this.css(p); var iSpeed = (opt[p] - iCur) / 5; iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed); iCur != opt[p] && (bComplete = false, this.css(p, iSpeed + iCur)); bComplete && (clearInterval(this.timer), this.complete(this.el)); } //console.log( bComplete ) }, pause: function(){ clearInterval(this.timer); }, move: function(){ this.init(); } } var a = new Anim('a', {left: 400, opacity: 40}, { duration: 1000, easing: 'bounceBoth', start: function(o){ o.innerHTML = 'start...'; }, complete: function(o){ o.innerHTML = 'complete...'; } }) $('pause').onmouseover = function(){ a.pause(); } $('move').onmouseover = function(){ a.move(); } </script> </body></html>