js 动画补间 Tween
作者：互联网
1 /* RunningList (触发过程中可以安全的删除自己)
2 如果触发过程中删除(回调函数中删除正在遍历的数组), 不仅 len 没有变(遍历前定义的len没有变, 真实的len随之减少), 而且还会漏掉一个key;
3
4 */
5 class RunningList{
6
7 static getProxy(runName){
8
9 return new Proxy(new RunningList(runName), {
10
11 get(tar, key){
12
13 },
14
15 set(tar, key, val){
16
17 }
18
19 });
20
21 }
22
23 constructor(runName = 'update'){
24 this._running = false;
25 this._list = [];
26 this._delList = [];
27 this._runName = runName;
28
29 }
30
31 get length(){
32 return this._list.length;
33 }
34
35 push(v){
36 this._list.push(v);
37
38 }
39
40 splice(v){
41 if(this._running === true) this._delList.push(v);
42
43 else{
44 const i = this._list.indexOf(v);
45 if(i !== -1) this._list.splice(i, 1);
46 }
47
48 }
49
50 update(){
51 var k, len = this._list.length;
52
53 this._running = true;
54 for(k = 0; k < len; k++) this._list[k][this._runName]();
55 this._running = false;
56
57 len = this._delList.length;
58 for(k = 0; k < len; k++) this.splice(this._delList[k]);
59 this._delList.length = 0;
60
61 }
62
63 }
64
65
66
67
68 /* TweenValue (从 原点 以规定的时间到达 终点)
69
70 parameter: origin, end, time, onUpdate, onEnd;
71
72 attribute:
73 origin: Object; //原点(起点)
74 end: Object; //终点
75 time: Number; //origin 到 end 花费的时间
76 onUpdate: Function; //更新回调; 一个回调参数 origin; 默认null;
77 onEnd: Function; //结束回调; 没有回调参数; 默认null; (如果返回的是true将不从队列删除, 你可以在onEnd中更新.end不间断的继续补间)
78
79 method:
80 reset(origin, end: Object): undefined; //更换 .origin, .end; 它会清除其它对象的缓存属性
81 reverse(): undefined; //this.end 复制 this.origin 的原始值
82 update(): undefined; //Tween 通过此方法统一更新 TweenValue
83
84 demo:
85 //init Tween:
86 const tween = new Tween(),
87 animate = function (){
88 requestAnimationFrame(animate);
89 tween.update();
90 }
91
92 //init TweenValue:
93 const v1 = new Tween.Value({x:0, y:0}, {x:5, y:10}, 1000, v => console.log(v));
94
95 animate();
96 tween.start(v1);
97
98 */
99 class TweenValue{
100
101 constructor(origin = {}, end = {}, time = 500, onUpdate = null, onEnd = null, onStart = null){
102 this.origin = origin;
103 this.end = end;
104 this.time = time;
105
106 this.onUpdate = onUpdate;
107 this.onEnd = onEnd;
108 this.onStart = onStart;
109
110 //以下属性不能直接设置
111 this._r = null;
112 this._t = 0;
113 this._v = Object.create(null);
114
115 }
116
117 _start(){
118 var v = "";
119 for(v in this.origin) this._v[v] = this.origin[v];
120
121 this._t = Date.now();
122 //this.update();
123
124 }
125
126 reset(origin, end){
127 this.origin = origin;
128 this.end = end;
129 this._v = Object.create(null);
130
131 }
132
133 reverse(){
134 var n = "";
135 for(n in this.origin) this.end[n] = this._v[n];
136
137 }
138
139 update(){
140 if(this["_r"] !== null){
141
142 var ted = Date["now"]() - this["_t"];
143
144 if(ted >= this["time"]){
145
146 for(ted in this["origin"]) this["origin"][ted] = this["end"][ted];
147 if(this["onUpdate"] !== null) this["onUpdate"](this["origin"]);
148
149 if(this["onEnd"] !== null){
150
151 if(this["onEnd"]() !== true){
152 if(this["_r"] !== null) this["_r"]["stop"](this);
153 }
154
155 else this["_start"]();
156
157 }
158
159 else this["_r"]["stop"](this);
160
161 }
162
163 else{
164 let n = "";
165 ted = ted / this["time"];
166 for(n in this["origin"]) this["origin"][n] = ted * (this["end"][n] - this["_v"][n]) + this["_v"][n];
167 if(this["onUpdate"] !== null) this["onUpdate"](this["origin"]);
168
169 }
170
171 }
172
173 }
174
175 }
176
177 Object.defineProperties(TweenValue.prototype, {
178
179 isTweenValue: {
180 configurable: false,
181 enumerable: false,
182 writable: false,
183 value: true,
184 }
185
186 });
187
188
189
190
191 /* TweenAlone (相对于 TweenValue 此类可以独立补间, 不需要 Tween)
192
193 demo:
194 const v1 = new TweenAlone({x:0, y:0}, {x:5, y:10}, 1000, v => console.log(v)),
195 animate = function (){
196 requestAnimationFrame(animate);
197 v1.update();
198 }
199
200 animate();
201 v1.start();
202
203 */
204 class TweenAlone extends TweenValue{
205
206 constructor(origin, end, time, onUpdate, onEnd, onStart){
207 super(origin, end, time, onUpdate, onEnd, onStart);
208
209 }
210
211 start(){
212 if(this.onStart !== null) this.onStart();
213 this._r = this;
214 this._start();
215
216 }
217
218 stop(){
219 this._r = null;
220
221 }
222
223 }
224
225
226
227
228
229 /* Tween 动画补间 (TweenValue 的root, 可以管理多个TweenValue)
230
231 parameter:
232 attribute:
233 method:
234 start(value: TweenValue): undefined;
235 stop(value: TweenValue): undefined;
236
237 static:
238 Value: TweenValue;
239
240 demo:
241 //init Tween:
242 const tween = new Tween(),
243 animate = function (){
244 requestAnimationFrame(animate);
245 tween.update();
246 }
247
248 //init TweenValue:
249 const v2 = new Tween.Value({x:0, y:0}, {x:5, y:10}, 1000, v => console.log(v), v => {
250 v2.reverse(); //v2.end 复制起始值
251 return true; //返回true表示不删除队列, 需要继续补间
252 });
253
254 animate();
255 tween.start(v2);
256
257 */
258 class Tween extends RunningList{
259
260 static Value = TweenValue;
261
262 constructor(){
263 super();
264
265 }
266
267 start(value){
268 if(value.onStart !== null) value.onStart();
269 if(value._r === null) this.push(value);
270 value._r = this;
271 value._start(this);
272
273 }
274
275 stop(value){
276 if(value._r !== null) this.splice(value);
277 value._r = null;
278
279 }
280
281 }
282
283
284
285
286 /* TweenTargetChange 朝着轴插值(有效的跟踪动态目标)
287 parameter:
288 v1 = {x: 0},
289 v2 = {x: 100},
290 distance = 1, //每次移动的距离
291 onUpdate = null, //
292 onEnd = null
293
294 attribute:
295 v1: Object; //起点
296 v2: Object; //终点
297 onUpdate: Function; //
298 onEnd: Function; //
299
300 method:
301 update(): undefined; //一般在动画循环里执行此方法
302 updateAxis(): undefined; //更新v1至v2的方向轴 (初始化时构造器自动调用一次)
303 setDistance(distance: Number): undefined; //设置每次移动的距离 (初始化时构造器自动调用一次)
304
305 demo:
306 const ttc = new TweenTargetChange({x:0, y:0}, {x:100, y:100}, 10),
307
308 //计时器模拟动画循环函数, 每秒执行一次.update()
309 timer = new Timer(() => {
310 ttc.update();
311 console.log('update: ', ttc.v1);
312
313 }, 1000, Infinity);
314
315 ttc.onEnd = v => {
316 timer.stop();
317 console.log('end: ', v);
318 }
319
320 timer.start();
321 console.log(ttc);
322
323 */
324 class TweenTargetChange{
325
326 #distance = 1;
327 #distancePow2 = 1;
328 #axis = {};
329
330 constructor(v1 = {x: 0}, v2 = {x: 100}, distance, onUpdate = null, onEnd = null){
331 this.v1 = v1;
332 this.v2 = v2;
333 this.onUpdate = onUpdate;
334 this.onEnd = onEnd;
335
336 this.setDistance(distance);
337 this.updateAxis();
338 }
339
340 setDistance(v = 1){
341 this.#distance = v;
342 this.#distancePow2 = Math.pow(v, 2);
343
344 }
345
346 updateAxis(){ //更新轴
347 var n, v, len = 0;
348
349 for(n in this.v1){
350 v = this.v2[n] - this.v1[n];
351 len += v * v;
352 this.#axis[n] = v;
353
354 }
355
356 len = Math.sqrt(len);
357
358 if(len !== 0){
359
360 for(n in this.v1) this.#axis[n] *= 1 / len;
361
362 }
363
364 }
365
366 update(){
367 var n, len = 0;
368
369 for(n in this.v1) len += Math.pow(this.v1[n] - this.v2[n], 2);
370
371 if(len > this.#distancePow2){
372
373 for(n in this.v1) this.v1[n] += this.#axis[n] * this.#distance;
374 if(this.onUpdate !== null) this.onUpdate(this.v1);
375
376 }
377
378 else{
379 for(n in this.v1) this.v1[n] = this.v2[n];
380 if(this.onEnd !== null) this.onEnd(this.v1);
381
382 }
383
384 }
385
386 }
完整代码
TweenValue (从 原点 以规定的时间到达 终点)
parameter: origin, end, time, onUpdate, onEnd;
attribute: origin: Object; //原点(起点) end: Object; //终点 time: Number; //origin 到 end 花费的时间 onUpdate: Function; //更新回调; 一个回调参数 origin; 默认null; onEnd: Function; //结束回调; 没有回调参数; 默认null; (如果返回的是true将不从队列删除, 你可以在onEnd中更新.end不间断的继续补间)
method: reset(origin, end: Object): undefined; //更换 .origin, .end; 它会清除其它对象的缓存属性 reverse(): undefined; //this.end 复制 this.origin 的原始值 update(): undefined; //Tween 通过此方法统一更新 TweenValue
demo: //init Tween: const tween = new Tween(), animate = function (){ requestAnimationFrame(animate); tween.update(); }
//init TweenValue: const v1 = new Tween.Value({x:0, y:0}, {x:5, y:10}, 1000, v => console.log(v)); animate(); tween.start(v1); TweenAlone (相对于 TweenValue 此类可以独立补间, 不需要 Tween)
demo: const v1 = new TweenAlone({x:0, y:0}, {x:5, y:10}, 1000, v => console.log(v)), animate = function (){ requestAnimationFrame(animate); v1.update(); }
animate(); v1.start(); Tween 动画补间 (TweenValue 的root, 可以管理多个TweenValue)
parameter: attribute: method: start(value: TweenValue): undefined; stop(value: TweenValue): undefined;
static: Value: TweenValue;
demo: //init Tween: const tween = new Tween(), animate = function (){ requestAnimationFrame(animate); tween.update(); }
//init TweenValue: const v2 = new Tween.Value({x:0, y:0}, {x:5, y:10}, 1000, v => console.log(v), v => { v2.reverse(); //v2.end 复制起始值 return true; //返回true表示不删除队列, 需要继续补间 }); animate(); tween.start(v2); TweenTargetChange 朝着轴插值(有效的跟踪动态目标) parameter: v1 = {x: 0}, v2 = {x: 100}, distance = 1, //每次移动的距离 onUpdate = null, // onEnd = null
attribute: v1: Object; //起点 v2: Object; //终点 onUpdate: Function; // onEnd: Function; //
method: update(): undefined; //一般在动画循环里执行此方法 updateAxis(): undefined; //更新v1至v2的方向轴 (初始化时构造器自动调用一次) setDistance(distance: Number): undefined; //设置每次移动的距离 (初始化时构造器自动调用一次)
demo: const ttc = new TweenTargetChange({x:0, y:0}, {x:100, y:100}, 10),
//计时器模拟动画循环函数, 每秒执行一次.update() timer = new Timer(() => { ttc.update(); console.log('update: ', ttc.v1);
}, 1000, Infinity);
ttc.onEnd = v => { timer.stop(); console.log('end: ', v); }
timer.start(); console.log(ttc);
标签：origin,end,js,Tween,v1,._,补间,null,onEnd 来源： https://www.cnblogs.com/weihexinCode/p/16320661.html