首页 > 代码库 > JavaScript实现动画插件
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完成后调用此函数，当计数器满调用callback102 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>
JavaScript实现动画插件
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。