tweenjs缓动算法使用小实例
Posted 造轮子
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了tweenjs缓动算法使用小实例相关的知识，希望对你有一定的参考价值。
这里的tweenjs不是依托于createjs的tewwnjs，而是一系列缓动算法集合。因为本身是算法，可以用在各个业务场景中，这也正是总结学习它的价值所在。tweenjs代码详情：
1 /* 2 * Tween.js 3 * t: current time（当前时间）； 4 * b: beginning value（初始值）； 5 * c: change in value（变化量）； 6 * d: duration（持续时间）。 7 * you can visit ‘http://easings.net/zh-cn‘ to get effect 8 */ 9 var Tween = { 10 Linear: function(t, b, c, d) { 11 return c * t / d + b; 12 }, 13 Quad: { 14 easeIn: function(t, b, c, d) { 15 return c * (t /= d) * t + b; 16 }, 17 easeOut: function(t, b, c, d) { 18 return -c *(t /= d)*(t-2) + b; 19 }, 20 easeInOut: function(t, b, c, d) { 21 if ((t /= d / 2) < 1) return c / 2 * t * t + b; 22 return -c / 2 * ((--t) * (t-2) - 1) + b; 23 } 24 }, 25 Cubic: { 26 easeIn: function(t, b, c, d) { 27 return c * (t /= d) * t * t + b; 28 }, 29 easeOut: function(t, b, c, d) { 30 return c * ((t = t/d - 1) * t * t + 1) + b; 31 }, 32 easeInOut: function(t, b, c, d) { 33 if ((t /= d / 2) < 1) return c / 2 * t * t*t + b; 34 return c / 2*((t -= 2) * t * t + 2) + b; 35 } 36 }, 37 Quart: { 38 easeIn: function(t, b, c, d) { 39 return c * (t /= d) * t * t*t + b; 40 }, 41 easeOut: function(t, b, c, d) { 42 return -c * ((t = t/d - 1) * t * t*t - 1) + b; 43 }, 44 easeInOut: function(t, b, c, d) { 45 if ((t /= d / 2) < 1) return c / 2 * t * t * t * t + b; 46 return -c / 2 * ((t -= 2) * t * t*t - 2) + b; 47 } 48 }, 49 Quint: { 50 easeIn: function(t, b, c, d) { 51 return c * (t /= d) * t * t * t * t + b; 52 }, 53 easeOut: function(t, b, c, d) { 54 return c * ((t = t/d - 1) * t * t * t * t + 1) + b; 55 }, 56 easeInOut: function(t, b, c, d) { 57 if ((t /= d / 2) < 1) return c / 2 * t * t * t * t * t + b; 58 return c / 2*((t -= 2) * t * t * t * t + 2) + b; 59 } 60 }, 61 Sine: { 62 easeIn: function(t, b, c, d) { 63 return -c * Math.cos(t/d * (Math.PI/2)) + c + b; 64 }, 65 easeOut: function(t, b, c, d) { 66 return c * Math.sin(t/d * (Math.PI/2)) + b; 67 }, 68 easeInOut: function(t, b, c, d) { 69 return -c / 2 * (Math.cos(Math.PI * t/d) - 1) + b; 70 } 71 }, 72 Expo: { 73 easeIn: function(t, b, c, d) { 74 return (t==0) ? b : c * Math.pow(2, 10 * (t/d - 1)) + b; 75 }, 76 easeOut: function(t, b, c, d) { 77 return (t==d) ? b + c : c * (-Math.pow(2, -10 * t/d) + 1) + b; 78 }, 79 easeInOut: function(t, b, c, d) { 80 if (t==0) return b; 81 if (t==d) return b+c; 82 if ((t /= d / 2) < 1) return c / 2 * Math.pow(2, 10 * (t - 1)) + b; 83 return c / 2 * (-Math.pow(2, -10 * --t) + 2) + b; 84 } 85 }, 86 Circ: { 87 easeIn: function(t, b, c, d) { 88 return -c * (Math.sqrt(1 - (t /= d) * t) - 1) + b; 89 }, 90 easeOut: function(t, b, c, d) { 91 return c * Math.sqrt(1 - (t = t/d - 1) * t) + b; 92 }, 93 easeInOut: function(t, b, c, d) { 94 if ((t /= d / 2) < 1) return -c / 2 * (Math.sqrt(1 - t * t) - 1) + b; 95 return c / 2 * (Math.sqrt(1 - (t -= 2) * t) + 1) + b; 96 } 97 }, 98 Elastic: { 99 easeIn: function(t, b, c, d, a, p) { 100 var s; 101 if (t==0) return b; 102 if ((t /= d) == 1) return b + c; 103 if (typeof p == "undefined") p = d * .3; 104 if (!a || a < Math.abs(c)) { 105 s = p / 4; 106 a = c; 107 } else { 108 s = p / (2 * Math.PI) * Math.asin(c / a); 109 } 110 return -(a * Math.pow(2, 10 * (t -= 1)) * Math.sin((t * d - s) * (2 * Math.PI) / p)) + b; 111 }, 112 easeOut: function(t, b, c, d, a, p) { 113 var s; 114 if (t==0) return b; 115 if ((t /= d) == 1) return b + c; 116 if (typeof p == "undefined") p = d * .3; 117 if (!a || a < Math.abs(c)) { 118 a = c; 119 s = p / 4; 120 } else { 121 s = p/(2*Math.PI) * Math.asin(c/a); 122 } 123 return (a * Math.pow(2, -10 * t) * Math.sin((t * d - s) * (2 * Math.PI) / p) + c + b); 124 }, 125 easeInOut: function(t, b, c, d, a, p) { 126 var s; 127 if (t==0) return b; 128 if ((t /= d / 2) == 2) return b+c; 129 if (typeof p == "undefined") p = d * (.3 * 1.5); 130 if (!a || a < Math.abs(c)) { 131 a = c; 132 s = p / 4; 133 } else { 134 s = p / (2 *Math.PI) * Math.asin(c / a); 135 } 136 if (t < 1) return -.5 * (a * Math.pow(2, 10* (t -=1 )) * Math.sin((t * d - s) * (2 * Math.PI) / p)) + b; 137 return a * Math.pow(2, -10 * (t -= 1)) * Math.sin((t * d - s) * (2 * Math.PI) / p ) * .5 + c + b; 138 } 139 }, 140 Back: { 141 easeIn: function(t, b, c, d, s) { 142 if (typeof s == "undefined") s = 1.70158; 143 return c * (t /= d) * t * ((s + 1) * t - s) + b; 144 }, 145 easeOut: function(t, b, c, d, s) { 146 if (typeof s == "undefined") s = 1.70158; 147 return c * ((t = t/d - 1) * t * ((s + 1) * t + s) + 1) + b; 148 }, 149 easeInOut: function(t, b, c, d, s) { 150 if (typeof s == "undefined") s = 1.70158; 151 if ((t /= d / 2) < 1) return c / 2 * (t * t * (((s *= (1.525)) + 1) * t - s)) + b; 152 return c / 2*((t -= 2) * t * (((s *= (1.525)) + 1) * t + s) + 2) + b; 153 } 154 }, 155 Bounce: { 156 easeIn: function(t, b, c, d) { 157 return c - Tween.Bounce.easeOut(d-t, 0, c, d) + b; 158 }, 159 easeOut: function(t, b, c, d) { 160 if ((t /= d) < (1 / 2.75)) { 161 return c * (7.5625 * t * t) + b; 162 } else if (t < (2 / 2.75)) { 163 return c * (7.5625 * (t -= (1.5 / 2.75)) * t + .75) + b; 164 } else if (t < (2.5 / 2.75)) { 165 return c * (7.5625 * (t -= (2.25 / 2.75)) * t + .9375) + b; 166 } else { 167 return c * (7.5625 * (t -= (2.625 / 2.75)) * t + .984375) + b; 168 } 169 }, 170 easeInOut: function(t, b, c, d) { 171 if (t < d / 2) { 172 return Tween.Bounce.easeIn(t * 2, 0, c, d) * .5 + b; 173 } else { 174 return Tween.Bounce.easeOut(t * 2 - d, 0, c, d) * .5 + c * .5 + b; 175 } 176 } 177 } 178 } 179 Math.tween = Tween;
具体每种算法的操作实例，可以看大神张鑫旭的博客实例：http://www.zhangxinxu.com/study/201612/how-to-use-tween-js.html
当然，以上这些算法仅仅是一个状态，需要配合时间上的变化，才能实现缓动，这里使用的是requestAnimationFrame，具体代码好吧，也是拿来主义
1 (function() { 2 var lastTime = 0; 3 var vendors = [‘ms‘, ‘moz‘, ‘webkit‘, ‘o‘]; 4 for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) { 5 window.requestAnimationFrame = window[vendors[x]+‘RequestAnimationFrame‘]; 6 window.cancelAnimationFrame = window[vendors[x]+‘CancelAnimationFrame‘] 7 || window[vendors[x]+‘CancelRequestAnimationFrame‘]; 8 } 9 10 if (!window.requestAnimationFrame) 11 window.requestAnimationFrame = function(callback, element) { 12 var currTime = new Date().getTime(); 13 var timeToCall = Math.max(0, 16 - (currTime - lastTime)); 14 var id = window.setTimeout(function() { callback(currTime + timeToCall); }, 15 timeToCall); 16 lastTime = currTime + timeToCall; 17 return id; 18 }; 19 20 if (!window.cancelAnimationFrame) 21 window.cancelAnimationFrame = function(id) { 22 clearTimeout(id); 23 }; 24 }());
最后是简单的实例应用，很简单，
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <title>使用tweenjs</title> 7 <style type="text/css"> 8 div { 9 width: 100px; 10 height: 100px; 11 border: 1px solid red; 12 text-align: center; 13 line-height: 100px; 14 position: absolute; 15 } 16 </style> 17 </head> 18 19 <body> 20 <div id="test"> 21 这是测试 22 </div> 23 <script type="text/javascript" src="RequestAnimationFrame.js"></script> 24 <script type="text/javascript" src="tween.js"></script> 25 <script type="text/javascript"> 26 var DOM=document.getElementById("test"); 27 var t = 0,//开始时间 28 b = 0,//开始位置 29 c = 1000,//变化值 30 d = 100;//持续时间 31 var step = function() { 32 var value = Tween.Bounce.easeOut(t, b, c, d); 33 DOM.style.left = value + ‘px‘; 34 35 t++; 36 if (t <= d) { 37 // 继续运动 38 requestAnimationFrame(step); 39 } else { 40 // 动画结束 41 } 42 }; 43 step(); 44 </script> 45 </body> 46 47 </html>
具体使用中，需要参数以及控制好结束条件即可。
以上是关于tweenjs缓动算法使用小实例的主要内容，如果未能解决你的问题，请参考以下文章