这里的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>
具体使用中，需要参数以及控制好结束条件即可。
原文地址：https://www.cnblogs.com/zhensg123/p/8872210.html
时间： 2024-10-11 05:34:24