JavaScript实现动画插件
在这之前，大家应该了解了缓动函数（Easing Functions）的概念：
动画的每一帧需要计算一次元素样式，如果样式改变则需要重绘屏幕。细一点讲，当我们每调用一次计时器函数，需要通过向缓动函数传入一些动画上下文变量，从而获取到元素的某个样式在当前帧合理的值。
我所了解的缓动函数实现方式有两种，一种是tbcd方式（Robert Penner's Easing Functons）
function(t,b,c,d){ return c*t/d + b; }
t: timestamp 以毫秒（ms）为单位，指从第一帧到当前帧所经历的时间
b: beginning position，变量初始值
c: change 变量改变量（即在整个动画过程中，变量将从 b 变到 b + c）
d: duration 动画时间
另一种是mootools的单参数方式，由于我没了解过，这里就不说了，这里主要说一下第一种方式。
整个动画模块为Animation，其接受多个参数（元素， 动画样式， 持续时间[， 缓动函数名][， 回调函数]），是一个构造函数，调用方式为：
var animation = new Animation(test, {width: {value: "500px"}, 500, "sin", function(){ console.log("complete"); });
animation.stop();
其中，每个样式属性可单独指定持续时间与缓动函数名，但回调函数必须等到所有动画结束才调用。
Animaion模块定义如下：
1 var Animation = function(){ 2 3 var debug = false, //如果debug，遇到异常将抛出 4 unit = {}, //样式存取函数，详见下方each函数 5 fx = { //缓动函数 6 linear: function(currentTime, initialDistance, totalDistance, duration){ //自带一个线性缓动函数 7 return initialDistance + (currentTime / duration * totalDistance); 8 } 9 }, 10 getTime = function(){ //获取当前时间（ms或更精确） 11 return window.performance.now && performance.now() || new Date().getTime(); 12 }, 13 executorCanceler = window.cancelAnimationFrame, //取消帧函数 14 executor = window.requestAnimationFrame //帧执行函数 15 || window.webkitRequestAnimationFrame 16 || window.msRequestAnimationFrame 17 || window.mozRequestAnimationFrame 18 || window.oRequestAnimationFrame 19 || function(){ 20 var callbacks = []; 21 22 !function frame(){ 23 var oldTime = getTime(), 24 tmp = callbacks; 25 26 callbacks = []; 27 28 for(var i = 0, length = tmp.length; i < length; i++){ 29 tmp[i].callback(oldTime); 30 } 31 32 var currentTime = getTime(), 33 delayTime = Math.max(16.66 - currentTime + oldTime, 0); 34 35 setTimeout(frame, delayTime); 36 }(); 37 38 executorCanceler = function(id){ 39 for(var i = 0, length = callbacks.length; i < length; i++){ 40 if(callbacks[i].id === id) callbacks.splice(i, 1); 41 } 42 } 43 44 return function(callback){ 45 var context = {callback: callback, id: Math.random()}; 46 callbacks.push(context); 47 return context.id; 48 } 49 }(), 50 /* 51 * 为每个属性运行此函数，类似于启动一个线程（虽然不是真正的线程） 52 */ 53 animate = function(element, attribute, distances, duration, timingFunction, completeCallback){ 54 var oldTime = getTime(), 55 animationPassedTime = 0, 56 executorReference = executor(function anonymous(currentTimeStamp){ 57 animationPassedTime = currentTimeStamp - oldTime; 58 59 var computedValues = []; //computedValues为缓动函数计算值，可能返回数值或者数组（按动画属性不同，比如rgb） 60 61 if(animationPassedTime >= duration){ 62 if(distances.length > 1){ 63 for(var j = 0, length = distances.length; j < length; j++){ 64 computedValues.push(distances[j][0] + distances[j][1]); 65 } 66 } else { 67 computedValues = distances[0][0] + distances[0][1]; 68 } 69 70 stop(); 71 } else { 72 if(distances.length > 1){ 73 for(var i = 0, length = distances.length; i < length; i++){ 74 computedValues.push(fx[timingFunction](animationPassedTime, distances[i][0], distances[i][1], duration)); 75 } 76 } else { 77 computedValues = fx[timingFunction](animationPassedTime, distances[0][0], distances[0][1], duration); 78 } 79 80 animationPassedTime = getTime() - oldTime; 81 executorReference = executor(anonymous); 82 } 83 unit[attribute].setter(element, computedValues); 84 }, Math.random()), 85 completed = false, 86 stop = function(){ 87 executorCanceler(executorReference); 88 completeCallback(); //执行回调函数 89 }; 90 91 return { 92 stop: stop 93 } 94 }, 95 /* 96 * Animation 引用的函数，此函数返回一个包含所有动画属性的控制对象（如停止操作），因此可以采取函数调用或者new的方式创建一个动画对象 97 */ 98 init = function(element, animationVars, duration, timingFunction, callback){ 99 100 var animateQueue = {}, animationCount = 0, animationCompletedCount = 0, completeCallback = function(){ 101 return function(){ //每个animate完成后调用此函数，当计数器满调用callback 102 animationCompletedCount ++; 103 104 if(animationCount === animationCompletedCount){ 105 typeof timingFunction === "function" ? timingFunction() : callback && callback(); 106 } 107 } 108 }(); 109 110 if(!element.nodeType){ 111 if(debug) 112 throw "an htmlElement is required"; 113 return; 114 } 115 116 for(var attribute in animationVars){ 117 if(!(attribute in unit)){ 118 if(debug){ 119 throw "no attribute handler"; 120 } 121 122 return; 123 } 124 125 try { 126 var initialDistance = unit[attribute].getter(element), 127 finalDistance = unit[attribute].getter(animationVars[attribute].value || animationVars[attribute]), 128 distances = []; 129 130 if(typeof initialDistance === "number"){ 131 distances.push([initialDistance, finalDistance - initialDistance]); 132 } else { 133 for(var i = 0, length = initialDistance.length; i < length; i++){ 134 distances.push([initialDistance[i], finalDistance[i] - initialDistance[i]]); 135 } 136 } 137 /* 138 * 可以为每个属性指定缓动函数与时间 139 */ 140 animateQueue[attribute] = animate(element, attribute, distances, animationVars[attribute].duration || duration, animationVars[attribute].timingFunction || (typeof timingFunction === "string" ? timingFunction : false) || "linear", completeCallback); 141 } catch (e) { 142 if(debug) { 143 throw "an error occurred: " + e.stack; 144 } 145 146 return; 147 } 148 149 animationCount ++; 150 } 151 152 animateQueue.stop = function() { 153 for(var attribute in animateQueue) { 154 animateQueue[attribute].stop && animateQueue[attribute].stop(); 155 } 156 } 157 158 return animateQueue; 159 }; 160 161 init.config = function(configVars){ 162 if(configVars){ 163 if(configVars.fx) { 164 for(var fxName in configVars.fx){ 165 if(typeof configVars.fx[fxName] === "function"){ 166 fx[fxName] = configVars.fx[fxName]; 167 } 168 } 169 } 170 171 if(configVars.unit) { 172 for(var unitName in configVars.unit){ 173 if(typeof configVars.unit[unitName] === "object"){ 174 unit[unitName] = configVars.unit[unitName]; 175 } 176 } 177 } 178 179 if(configVars.debug) { 180 debug = configVars.debug || false; 181 } 182 } 183 }; 184 185 init.each = function(array, handler){ 186 if(typeof handler === "function"){ 187 for(var i = 0, length = array.length; i < length; i++){ 188 handler.call(array[i], i, array); 189 } 190 } 191 }; 192 193 /* 194 * 赠送几个单位存取函数（暂时实现行内样式读取，单位px -。-） 195 */ 196 init.each("width, height, left, right, top, bottom, marginLeft, marginTop".split(/\s*,\s*/), function(index, array){ 197 var attributeName = this; 198 unit[attributeName] = { 199 getter: function(element){ 200 return parseInt((element.nodeType && element.style[attributeName] || element)["match"](/\d+/)[0]); 201 }, 202 setter: function(element, value){ 203 element.style[attributeName] = value + "px"; 204 } 205 } 206 }); 207 208 return init; 209 210 }();
测试如下（需引入Animation）：
详见：http://runjs.cn/code/lgrfeykn
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title></title> 5 <script type="text/javascript"> 6 7 8 function init(){ 9 10 Animation.config({ //可以在这里设置或扩充功能 11 debug: true, 12 fps: 60, 13 fx: { 14 easeOutElastic: function(t,b,c,d){ 15 var s=1.70158;var p=0;var a=c; 16 if (t==0) return b; if ((t/=d)==1) return b+c; if (!p) p=d*.3; 17 if (a < Math.abs(c)) { a=c; var s=p/4; } 18 else var s = p/(2*Math.PI) * Math.asin (c/a); 19 return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b; 20 } 21 }, 22 unit: { 23 backgroundColor: { // 24 getter: function(element){ 25 var backgroundColor = (element.nodeType && element.style.backgroundColor || element)["match"](/rgb\((\d+),\s*(\d+),\s*(\d+)\)/); 26 return [parseInt(backgroundColor[1]), parseInt(backgroundColor[2]), parseInt(backgroundColor[3])]; 27 }, 28 setter: function(element, value){ 29 element.style.backgroundColor = "rgb(" + parseInt(value[0]) + ", " + parseInt(value[1]) + ", " + parseInt(value[2]) + ")"; 30 } 31 } 32 } 33 }); 34 35 36 37 var animation = new Animation(test, {width: {value: "100px"}, height: {value: "100px"}, marginLeft: {value: "50px"}, marginTop: {value: "50px"}, backgroundColor: {value: "rgb(203,215,255)"}}, 1000, "easeOutElastic", function(){ 38 console.log("complete"); 39 }); 40 41 } 42 43 </script> 44 </head> 45 <body onload="init();"> 46 47 <div id="test" style="width: 200px; height: 200px; background: rgb(255,104,228);margin-left: 0; margin-top: 0"></div> 48 49 </body> 50 </html>
