source: imaps-frontend/node_modules/konva/lib/Tween.js@ d565449

main
Last change on this file since d565449 was d565449, checked in by stefan toskovski <stefantoska84@…>, 4 weeks ago

Update repo after prototype presentation
  • Property mode set to 100644
File size: 15.1 KB
RevLine 
[d565449]1"use strict";
2Object.defineProperty(exports, "__esModule", { value: true });
3exports.Easings = exports.Tween = void 0;
4const Util_1 = require("./Util");
5const Animation_1 = require("./Animation");
6const Node_1 = require("./Node");
7const Global_1 = require("./Global");
8var blacklist = {
9 node: 1,
10 duration: 1,
11 easing: 1,
12 onFinish: 1,
13 yoyo: 1,
14}, PAUSED = 1, PLAYING = 2, REVERSING = 3, idCounter = 0, colorAttrs = ['fill', 'stroke', 'shadowColor'];
15class TweenEngine {
16 constructor(prop, propFunc, func, begin, finish, duration, yoyo) {
17 this.prop = prop;
18 this.propFunc = propFunc;
19 this.begin = begin;
20 this._pos = begin;
21 this.duration = duration;
22 this._change = 0;
23 this.prevPos = 0;
24 this.yoyo = yoyo;
25 this._time = 0;
26 this._position = 0;
27 this._startTime = 0;
28 this._finish = 0;
29 this.func = func;
30 this._change = finish - this.begin;
31 this.pause();
32 }
33 fire(str) {
34 var handler = this[str];
35 if (handler) {
36 handler();
37 }
38 }
39 setTime(t) {
40 if (t > this.duration) {
41 if (this.yoyo) {
42 this._time = this.duration;
43 this.reverse();
44 }
45 else {
46 this.finish();
47 }
48 }
49 else if (t < 0) {
50 if (this.yoyo) {
51 this._time = 0;
52 this.play();
53 }
54 else {
55 this.reset();
56 }
57 }
58 else {
59 this._time = t;
60 this.update();
61 }
62 }
63 getTime() {
64 return this._time;
65 }
66 setPosition(p) {
67 this.prevPos = this._pos;
68 this.propFunc(p);
69 this._pos = p;
70 }
71 getPosition(t) {
72 if (t === undefined) {
73 t = this._time;
74 }
75 return this.func(t, this.begin, this._change, this.duration);
76 }
77 play() {
78 this.state = PLAYING;
79 this._startTime = this.getTimer() - this._time;
80 this.onEnterFrame();
81 this.fire('onPlay');
82 }
83 reverse() {
84 this.state = REVERSING;
85 this._time = this.duration - this._time;
86 this._startTime = this.getTimer() - this._time;
87 this.onEnterFrame();
88 this.fire('onReverse');
89 }
90 seek(t) {
91 this.pause();
92 this._time = t;
93 this.update();
94 this.fire('onSeek');
95 }
96 reset() {
97 this.pause();
98 this._time = 0;
99 this.update();
100 this.fire('onReset');
101 }
102 finish() {
103 this.pause();
104 this._time = this.duration;
105 this.update();
106 this.fire('onFinish');
107 }
108 update() {
109 this.setPosition(this.getPosition(this._time));
110 this.fire('onUpdate');
111 }
112 onEnterFrame() {
113 var t = this.getTimer() - this._startTime;
114 if (this.state === PLAYING) {
115 this.setTime(t);
116 }
117 else if (this.state === REVERSING) {
118 this.setTime(this.duration - t);
119 }
120 }
121 pause() {
122 this.state = PAUSED;
123 this.fire('onPause');
124 }
125 getTimer() {
126 return new Date().getTime();
127 }
128}
129class Tween {
130 constructor(config) {
131 var that = this, node = config.node, nodeId = node._id, duration, easing = config.easing || exports.Easings.Linear, yoyo = !!config.yoyo, key;
132 if (typeof config.duration === 'undefined') {
133 duration = 0.3;
134 }
135 else if (config.duration === 0) {
136 duration = 0.001;
137 }
138 else {
139 duration = config.duration;
140 }
141 this.node = node;
142 this._id = idCounter++;
143 var layers = node.getLayer() ||
144 (node instanceof Global_1.Konva['Stage'] ? node.getLayers() : null);
145 if (!layers) {
146 Util_1.Util.error('Tween constructor have `node` that is not in a layer. Please add node into layer first.');
147 }
148 this.anim = new Animation_1.Animation(function () {
149 that.tween.onEnterFrame();
150 }, layers);
151 this.tween = new TweenEngine(key, function (i) {
152 that._tweenFunc(i);
153 }, easing, 0, 1, duration * 1000, yoyo);
154 this._addListeners();
155 if (!Tween.attrs[nodeId]) {
156 Tween.attrs[nodeId] = {};
157 }
158 if (!Tween.attrs[nodeId][this._id]) {
159 Tween.attrs[nodeId][this._id] = {};
160 }
161 if (!Tween.tweens[nodeId]) {
162 Tween.tweens[nodeId] = {};
163 }
164 for (key in config) {
165 if (blacklist[key] === undefined) {
166 this._addAttr(key, config[key]);
167 }
168 }
169 this.reset();
170 this.onFinish = config.onFinish;
171 this.onReset = config.onReset;
172 this.onUpdate = config.onUpdate;
173 }
174 _addAttr(key, end) {
175 var node = this.node, nodeId = node._id, start, diff, tweenId, n, len, trueEnd, trueStart, endRGBA;
176 tweenId = Tween.tweens[nodeId][key];
177 if (tweenId) {
178 delete Tween.attrs[nodeId][tweenId][key];
179 }
180 start = node.getAttr(key);
181 if (Util_1.Util._isArray(end)) {
182 diff = [];
183 len = Math.max(end.length, start.length);
184 if (key === 'points' && end.length !== start.length) {
185 if (end.length > start.length) {
186 trueStart = start;
187 start = Util_1.Util._prepareArrayForTween(start, end, node.closed());
188 }
189 else {
190 trueEnd = end;
191 end = Util_1.Util._prepareArrayForTween(end, start, node.closed());
192 }
193 }
194 if (key.indexOf('fill') === 0) {
195 for (n = 0; n < len; n++) {
196 if (n % 2 === 0) {
197 diff.push(end[n] - start[n]);
198 }
199 else {
200 var startRGBA = Util_1.Util.colorToRGBA(start[n]);
201 endRGBA = Util_1.Util.colorToRGBA(end[n]);
202 start[n] = startRGBA;
203 diff.push({
204 r: endRGBA.r - startRGBA.r,
205 g: endRGBA.g - startRGBA.g,
206 b: endRGBA.b - startRGBA.b,
207 a: endRGBA.a - startRGBA.a,
208 });
209 }
210 }
211 }
212 else {
213 for (n = 0; n < len; n++) {
214 diff.push(end[n] - start[n]);
215 }
216 }
217 }
218 else if (colorAttrs.indexOf(key) !== -1) {
219 start = Util_1.Util.colorToRGBA(start);
220 endRGBA = Util_1.Util.colorToRGBA(end);
221 diff = {
222 r: endRGBA.r - start.r,
223 g: endRGBA.g - start.g,
224 b: endRGBA.b - start.b,
225 a: endRGBA.a - start.a,
226 };
227 }
228 else {
229 diff = end - start;
230 }
231 Tween.attrs[nodeId][this._id][key] = {
232 start: start,
233 diff: diff,
234 end: end,
235 trueEnd: trueEnd,
236 trueStart: trueStart,
237 };
238 Tween.tweens[nodeId][key] = this._id;
239 }
240 _tweenFunc(i) {
241 var node = this.node, attrs = Tween.attrs[node._id][this._id], key, attr, start, diff, newVal, n, len, end;
242 for (key in attrs) {
243 attr = attrs[key];
244 start = attr.start;
245 diff = attr.diff;
246 end = attr.end;
247 if (Util_1.Util._isArray(start)) {
248 newVal = [];
249 len = Math.max(start.length, end.length);
250 if (key.indexOf('fill') === 0) {
251 for (n = 0; n < len; n++) {
252 if (n % 2 === 0) {
253 newVal.push((start[n] || 0) + diff[n] * i);
254 }
255 else {
256 newVal.push('rgba(' +
257 Math.round(start[n].r + diff[n].r * i) +
258 ',' +
259 Math.round(start[n].g + diff[n].g * i) +
260 ',' +
261 Math.round(start[n].b + diff[n].b * i) +
262 ',' +
263 (start[n].a + diff[n].a * i) +
264 ')');
265 }
266 }
267 }
268 else {
269 for (n = 0; n < len; n++) {
270 newVal.push((start[n] || 0) + diff[n] * i);
271 }
272 }
273 }
274 else if (colorAttrs.indexOf(key) !== -1) {
275 newVal =
276 'rgba(' +
277 Math.round(start.r + diff.r * i) +
278 ',' +
279 Math.round(start.g + diff.g * i) +
280 ',' +
281 Math.round(start.b + diff.b * i) +
282 ',' +
283 (start.a + diff.a * i) +
284 ')';
285 }
286 else {
287 newVal = start + diff * i;
288 }
289 node.setAttr(key, newVal);
290 }
291 }
292 _addListeners() {
293 this.tween.onPlay = () => {
294 this.anim.start();
295 };
296 this.tween.onReverse = () => {
297 this.anim.start();
298 };
299 this.tween.onPause = () => {
300 this.anim.stop();
301 };
302 this.tween.onFinish = () => {
303 var node = this.node;
304 var attrs = Tween.attrs[node._id][this._id];
305 if (attrs.points && attrs.points.trueEnd) {
306 node.setAttr('points', attrs.points.trueEnd);
307 }
308 if (this.onFinish) {
309 this.onFinish.call(this);
310 }
311 };
312 this.tween.onReset = () => {
313 var node = this.node;
314 var attrs = Tween.attrs[node._id][this._id];
315 if (attrs.points && attrs.points.trueStart) {
316 node.points(attrs.points.trueStart);
317 }
318 if (this.onReset) {
319 this.onReset();
320 }
321 };
322 this.tween.onUpdate = () => {
323 if (this.onUpdate) {
324 this.onUpdate.call(this);
325 }
326 };
327 }
328 play() {
329 this.tween.play();
330 return this;
331 }
332 reverse() {
333 this.tween.reverse();
334 return this;
335 }
336 reset() {
337 this.tween.reset();
338 return this;
339 }
340 seek(t) {
341 this.tween.seek(t * 1000);
342 return this;
343 }
344 pause() {
345 this.tween.pause();
346 return this;
347 }
348 finish() {
349 this.tween.finish();
350 return this;
351 }
352 destroy() {
353 var nodeId = this.node._id, thisId = this._id, attrs = Tween.tweens[nodeId], key;
354 this.pause();
355 for (key in attrs) {
356 delete Tween.tweens[nodeId][key];
357 }
358 delete Tween.attrs[nodeId][thisId];
359 }
360}
361exports.Tween = Tween;
362Tween.attrs = {};
363Tween.tweens = {};
364Node_1.Node.prototype.to = function (params) {
365 var onFinish = params.onFinish;
366 params.node = this;
367 params.onFinish = function () {
368 this.destroy();
369 if (onFinish) {
370 onFinish();
371 }
372 };
373 var tween = new Tween(params);
374 tween.play();
375};
376exports.Easings = {
377 BackEaseIn(t, b, c, d) {
378 var s = 1.70158;
379 return c * (t /= d) * t * ((s + 1) * t - s) + b;
380 },
381 BackEaseOut(t, b, c, d) {
382 var s = 1.70158;
383 return c * ((t = t / d - 1) * t * ((s + 1) * t + s) + 1) + b;
384 },
385 BackEaseInOut(t, b, c, d) {
386 var s = 1.70158;
387 if ((t /= d / 2) < 1) {
388 return (c / 2) * (t * t * (((s *= 1.525) + 1) * t - s)) + b;
389 }
390 return (c / 2) * ((t -= 2) * t * (((s *= 1.525) + 1) * t + s) + 2) + b;
391 },
392 ElasticEaseIn(t, b, c, d, a, p) {
393 var s = 0;
394 if (t === 0) {
395 return b;
396 }
397 if ((t /= d) === 1) {
398 return b + c;
399 }
400 if (!p) {
401 p = d * 0.3;
402 }
403 if (!a || a < Math.abs(c)) {
404 a = c;
405 s = p / 4;
406 }
407 else {
408 s = (p / (2 * Math.PI)) * Math.asin(c / a);
409 }
410 return (-(a *
411 Math.pow(2, 10 * (t -= 1)) *
412 Math.sin(((t * d - s) * (2 * Math.PI)) / p)) + b);
413 },
414 ElasticEaseOut(t, b, c, d, a, p) {
415 var s = 0;
416 if (t === 0) {
417 return b;
418 }
419 if ((t /= d) === 1) {
420 return b + c;
421 }
422 if (!p) {
423 p = d * 0.3;
424 }
425 if (!a || a < Math.abs(c)) {
426 a = c;
427 s = p / 4;
428 }
429 else {
430 s = (p / (2 * Math.PI)) * Math.asin(c / a);
431 }
432 return (a * Math.pow(2, -10 * t) * Math.sin(((t * d - s) * (2 * Math.PI)) / p) +
433 c +
434 b);
435 },
436 ElasticEaseInOut(t, b, c, d, a, p) {
437 var s = 0;
438 if (t === 0) {
439 return b;
440 }
441 if ((t /= d / 2) === 2) {
442 return b + c;
443 }
444 if (!p) {
445 p = d * (0.3 * 1.5);
446 }
447 if (!a || a < Math.abs(c)) {
448 a = c;
449 s = p / 4;
450 }
451 else {
452 s = (p / (2 * Math.PI)) * Math.asin(c / a);
453 }
454 if (t < 1) {
455 return (-0.5 *
456 (a *
457 Math.pow(2, 10 * (t -= 1)) *
458 Math.sin(((t * d - s) * (2 * Math.PI)) / p)) +
459 b);
460 }
461 return (a *
462 Math.pow(2, -10 * (t -= 1)) *
463 Math.sin(((t * d - s) * (2 * Math.PI)) / p) *
464 0.5 +
465 c +
466 b);
467 },
468 BounceEaseOut(t, b, c, d) {
469 if ((t /= d) < 1 / 2.75) {
470 return c * (7.5625 * t * t) + b;
471 }
472 else if (t < 2 / 2.75) {
473 return c * (7.5625 * (t -= 1.5 / 2.75) * t + 0.75) + b;
474 }
475 else if (t < 2.5 / 2.75) {
476 return c * (7.5625 * (t -= 2.25 / 2.75) * t + 0.9375) + b;
477 }
478 else {
479 return c * (7.5625 * (t -= 2.625 / 2.75) * t + 0.984375) + b;
480 }
481 },
482 BounceEaseIn(t, b, c, d) {
483 return c - exports.Easings.BounceEaseOut(d - t, 0, c, d) + b;
484 },
485 BounceEaseInOut(t, b, c, d) {
486 if (t < d / 2) {
487 return exports.Easings.BounceEaseIn(t * 2, 0, c, d) * 0.5 + b;
488 }
489 else {
490 return exports.Easings.BounceEaseOut(t * 2 - d, 0, c, d) * 0.5 + c * 0.5 + b;
491 }
492 },
493 EaseIn(t, b, c, d) {
494 return c * (t /= d) * t + b;
495 },
496 EaseOut(t, b, c, d) {
497 return -c * (t /= d) * (t - 2) + b;
498 },
499 EaseInOut(t, b, c, d) {
500 if ((t /= d / 2) < 1) {
501 return (c / 2) * t * t + b;
502 }
503 return (-c / 2) * (--t * (t - 2) - 1) + b;
504 },
505 StrongEaseIn(t, b, c, d) {
506 return c * (t /= d) * t * t * t * t + b;
507 },
508 StrongEaseOut(t, b, c, d) {
509 return c * ((t = t / d - 1) * t * t * t * t + 1) + b;
510 },
511 StrongEaseInOut(t, b, c, d) {
512 if ((t /= d / 2) < 1) {
513 return (c / 2) * t * t * t * t * t + b;
514 }
515 return (c / 2) * ((t -= 2) * t * t * t * t + 2) + b;
516 },
517 Linear(t, b, c, d) {
518 return (c * t) / d + b;
519 },
520};
Note: See TracBrowser for help on using the repository browser.