@tweenjs/tween.js 18.6.4 → 19.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/README.md +2 -4
  2. package/dist/tween.amd.js +95 -38
  3. package/dist/tween.cjs.js +95 -38
  4. package/dist/tween.d.ts +57 -126
  5. package/dist/tween.esm.js +95 -38
  6. package/dist/tween.umd.js +95 -38
  7. package/package.json +4 -2
package/dist/tween.d.ts CHANGED
@@ -1,62 +1,28 @@
1
1
  declare type EasingFunction = (amount: number) => number;
2
+ declare type EasingFunctionGroup = {
3
+ In: EasingFunction;
4
+ Out: EasingFunction;
5
+ InOut: EasingFunction;
6
+ };
2
7
  /**
3
8
  * The Ease class provides a collection of easing functions for use with tween.js.
4
9
  */
5
- declare const Easing: {
6
- Linear: {
7
- None: (amount: number) => number;
8
- };
9
- Quadratic: {
10
- In: (amount: number) => number;
11
- Out: (amount: number) => number;
12
- InOut: (amount: number) => number;
13
- };
14
- Cubic: {
15
- In: (amount: number) => number;
16
- Out: (amount: number) => number;
17
- InOut: (amount: number) => number;
18
- };
19
- Quartic: {
20
- In: (amount: number) => number;
21
- Out: (amount: number) => number;
22
- InOut: (amount: number) => number;
23
- };
24
- Quintic: {
25
- In: (amount: number) => number;
26
- Out: (amount: number) => number;
27
- InOut: (amount: number) => number;
28
- };
29
- Sinusoidal: {
30
- In: (amount: number) => number;
31
- Out: (amount: number) => number;
32
- InOut: (amount: number) => number;
33
- };
34
- Exponential: {
35
- In: (amount: number) => number;
36
- Out: (amount: number) => number;
37
- InOut: (amount: number) => number;
38
- };
39
- Circular: {
40
- In: (amount: number) => number;
41
- Out: (amount: number) => number;
42
- InOut: (amount: number) => number;
43
- };
44
- Elastic: {
45
- In: (amount: number) => number;
46
- Out: (amount: number) => number;
47
- InOut: (amount: number) => number;
48
- };
49
- Back: {
50
- In: (amount: number) => number;
51
- Out: (amount: number) => number;
52
- InOut: (amount: number) => number;
53
- };
54
- Bounce: {
55
- In: (amount: number) => number;
56
- Out: (amount: number) => number;
57
- InOut: (amount: number) => number;
58
- };
59
- };
10
+ declare const Easing: Readonly<{
11
+ Linear: Readonly<EasingFunctionGroup & {
12
+ None: EasingFunction;
13
+ }>;
14
+ Quadratic: Readonly<EasingFunctionGroup>;
15
+ Cubic: Readonly<EasingFunctionGroup>;
16
+ Quartic: Readonly<EasingFunctionGroup>;
17
+ Quintic: Readonly<EasingFunctionGroup>;
18
+ Sinusoidal: Readonly<EasingFunctionGroup>;
19
+ Exponential: Readonly<EasingFunctionGroup>;
20
+ Circular: Readonly<EasingFunctionGroup>;
21
+ Elastic: Readonly<EasingFunctionGroup>;
22
+ Back: Readonly<EasingFunctionGroup>;
23
+ Bounce: Readonly<EasingFunctionGroup>;
24
+ generatePow(power?: number): EasingFunctionGroup;
25
+ }>;
60
26
 
61
27
  /**
62
28
  *
@@ -99,6 +65,8 @@ declare class Tween<T extends UnknownProps> {
99
65
  private _chainedTweens;
100
66
  private _onStartCallback?;
101
67
  private _onStartCallbackFired;
68
+ private _onEveryStartCallback?;
69
+ private _onEveryStartCallbackFired;
102
70
  private _onUpdateCallback?;
103
71
  private _onRepeatCallback?;
104
72
  private _onCompleteCallback?;
@@ -110,27 +78,29 @@ declare class Tween<T extends UnknownProps> {
110
78
  isPlaying(): boolean;
111
79
  isPaused(): boolean;
112
80
  to(properties: UnknownProps, duration?: number): this;
113
- duration(d: number): this;
114
- start(time?: number): this;
81
+ duration(d?: number): this;
82
+ start(time?: number, overrideStartingValues?: boolean): this;
83
+ startFromCurrentValues(time?: number): this;
115
84
  private _setupProperties;
116
85
  stop(): this;
117
86
  end(): this;
118
87
  pause(time?: number): this;
119
88
  resume(time?: number): this;
120
89
  stopChainedTweens(): this;
121
- group(group: Group): this;
122
- delay(amount: number): this;
123
- repeat(times: number): this;
124
- repeatDelay(amount: number): this;
125
- yoyo(yoyo: boolean): this;
126
- easing(easingFunction: EasingFunction): this;
127
- interpolation(interpolationFunction: InterpolationFunction): this;
128
- chain(...tweens: Array<Tween<UnknownProps>>): this;
129
- onStart(callback: (object: T) => void): this;
130
- onUpdate(callback: (object: T, elapsed: number) => void): this;
131
- onRepeat(callback: (object: T) => void): this;
132
- onComplete(callback: (object: T) => void): this;
133
- onStop(callback: (object: T) => void): this;
90
+ group(group?: Group): this;
91
+ delay(amount?: number): this;
92
+ repeat(times?: number): this;
93
+ repeatDelay(amount?: number): this;
94
+ yoyo(yoyo?: boolean): this;
95
+ easing(easingFunction?: EasingFunction): this;
96
+ interpolation(interpolationFunction?: InterpolationFunction): this;
97
+ chain(...tweens: Array<Tween<any>>): this;
98
+ onStart(callback?: (object: T) => void): this;
99
+ onEveryStart(callback?: (object: T) => void): this;
100
+ onUpdate(callback?: (object: T, elapsed: number) => void): this;
101
+ onRepeat(callback?: (object: T) => void): this;
102
+ onComplete(callback?: (object: T) => void): this;
103
+ onStop(callback?: (object: T) => void): this;
134
104
  private _goToEnd;
135
105
  /**
136
106
  * @returns true if the tween is still playing after the update, false
@@ -170,7 +140,7 @@ declare class Sequence {
170
140
  static nextId(): number;
171
141
  }
172
142
 
173
- declare const VERSION = "18.6.4";
143
+ declare const VERSION = "19.0.0";
174
144
 
175
145
  declare const nextId: typeof Sequence.nextId;
176
146
  declare const getAll: () => Tween<Record<string, any>>[];
@@ -179,61 +149,22 @@ declare const add: (tween: Tween<Record<string, any>>) => void;
179
149
  declare const remove: (tween: Tween<Record<string, any>>) => void;
180
150
  declare const update: (time?: number, preserve?: boolean) => boolean;
181
151
  declare const exports: {
182
- Easing: {
183
- Linear: {
184
- None: (amount: number) => number;
185
- };
186
- Quadratic: {
187
- In: (amount: number) => number;
188
- Out: (amount: number) => number;
189
- InOut: (amount: number) => number;
190
- };
191
- Cubic: {
192
- In: (amount: number) => number;
193
- Out: (amount: number) => number;
194
- InOut: (amount: number) => number;
195
- };
196
- Quartic: {
197
- In: (amount: number) => number;
198
- Out: (amount: number) => number;
199
- InOut: (amount: number) => number;
200
- };
201
- Quintic: {
202
- In: (amount: number) => number;
203
- Out: (amount: number) => number;
204
- InOut: (amount: number) => number;
205
- };
206
- Sinusoidal: {
207
- In: (amount: number) => number;
208
- Out: (amount: number) => number;
209
- InOut: (amount: number) => number;
210
- };
211
- Exponential: {
212
- In: (amount: number) => number;
213
- Out: (amount: number) => number;
214
- InOut: (amount: number) => number;
215
- };
216
- Circular: {
217
- In: (amount: number) => number;
218
- Out: (amount: number) => number;
219
- InOut: (amount: number) => number;
220
- };
221
- Elastic: {
222
- In: (amount: number) => number;
223
- Out: (amount: number) => number;
224
- InOut: (amount: number) => number;
225
- };
226
- Back: {
227
- In: (amount: number) => number;
228
- Out: (amount: number) => number;
229
- InOut: (amount: number) => number;
230
- };
231
- Bounce: {
232
- In: (amount: number) => number;
233
- Out: (amount: number) => number;
234
- InOut: (amount: number) => number;
235
- };
236
- };
152
+ Easing: Readonly<{
153
+ Linear: Readonly<EasingFunctionGroup & {
154
+ None: EasingFunction;
155
+ }>;
156
+ Quadratic: Readonly<EasingFunctionGroup>;
157
+ Cubic: Readonly<EasingFunctionGroup>;
158
+ Quartic: Readonly<EasingFunctionGroup>;
159
+ Quintic: Readonly<EasingFunctionGroup>;
160
+ Sinusoidal: Readonly<EasingFunctionGroup>;
161
+ Exponential: Readonly<EasingFunctionGroup>;
162
+ Circular: Readonly<EasingFunctionGroup>;
163
+ Elastic: Readonly<EasingFunctionGroup>;
164
+ Back: Readonly<EasingFunctionGroup>;
165
+ Bounce: Readonly<EasingFunctionGroup>;
166
+ generatePow(power?: number): EasingFunctionGroup;
167
+ }>;
237
168
  Group: typeof Group;
238
169
  Interpolation: {
239
170
  Linear: (v: number[], k: number) => number;
package/dist/tween.esm.js CHANGED
@@ -1,13 +1,22 @@
1
1
  /**
2
2
  * The Ease class provides a collection of easing functions for use with tween.js.
3
3
  */
4
- var Easing = {
5
- Linear: {
4
+ var Easing = Object.freeze({
5
+ Linear: Object.freeze({
6
6
  None: function (amount) {
7
7
  return amount;
8
8
  },
9
- },
10
- Quadratic: {
9
+ In: function (amount) {
10
+ return this.None(amount);
11
+ },
12
+ Out: function (amount) {
13
+ return this.None(amount);
14
+ },
15
+ InOut: function (amount) {
16
+ return this.None(amount);
17
+ },
18
+ }),
19
+ Quadratic: Object.freeze({
11
20
  In: function (amount) {
12
21
  return amount * amount;
13
22
  },
@@ -20,8 +29,8 @@ var Easing = {
20
29
  }
21
30
  return -0.5 * (--amount * (amount - 2) - 1);
22
31
  },
23
- },
24
- Cubic: {
32
+ }),
33
+ Cubic: Object.freeze({
25
34
  In: function (amount) {
26
35
  return amount * amount * amount;
27
36
  },
@@ -34,8 +43,8 @@ var Easing = {
34
43
  }
35
44
  return 0.5 * ((amount -= 2) * amount * amount + 2);
36
45
  },
37
- },
38
- Quartic: {
46
+ }),
47
+ Quartic: Object.freeze({
39
48
  In: function (amount) {
40
49
  return amount * amount * amount * amount;
41
50
  },
@@ -48,8 +57,8 @@ var Easing = {
48
57
  }
49
58
  return -0.5 * ((amount -= 2) * amount * amount * amount - 2);
50
59
  },
51
- },
52
- Quintic: {
60
+ }),
61
+ Quintic: Object.freeze({
53
62
  In: function (amount) {
54
63
  return amount * amount * amount * amount * amount;
55
64
  },
@@ -62,19 +71,19 @@ var Easing = {
62
71
  }
63
72
  return 0.5 * ((amount -= 2) * amount * amount * amount * amount + 2);
64
73
  },
65
- },
66
- Sinusoidal: {
74
+ }),
75
+ Sinusoidal: Object.freeze({
67
76
  In: function (amount) {
68
- return 1 - Math.cos((amount * Math.PI) / 2);
77
+ return 1 - Math.sin(((1.0 - amount) * Math.PI) / 2);
69
78
  },
70
79
  Out: function (amount) {
71
80
  return Math.sin((amount * Math.PI) / 2);
72
81
  },
73
82
  InOut: function (amount) {
74
- return 0.5 * (1 - Math.cos(Math.PI * amount));
83
+ return 0.5 * (1 - Math.sin(Math.PI * (0.5 - amount)));
75
84
  },
76
- },
77
- Exponential: {
85
+ }),
86
+ Exponential: Object.freeze({
78
87
  In: function (amount) {
79
88
  return amount === 0 ? 0 : Math.pow(1024, amount - 1);
80
89
  },
@@ -93,8 +102,8 @@ var Easing = {
93
102
  }
94
103
  return 0.5 * (-Math.pow(2, -10 * (amount - 1)) + 2);
95
104
  },
96
- },
97
- Circular: {
105
+ }),
106
+ Circular: Object.freeze({
98
107
  In: function (amount) {
99
108
  return 1 - Math.sqrt(1 - amount * amount);
100
109
  },
@@ -107,8 +116,8 @@ var Easing = {
107
116
  }
108
117
  return 0.5 * (Math.sqrt(1 - (amount -= 2) * amount) + 1);
109
118
  },
110
- },
111
- Elastic: {
119
+ }),
120
+ Elastic: Object.freeze({
112
121
  In: function (amount) {
113
122
  if (amount === 0) {
114
123
  return 0;
@@ -140,15 +149,15 @@ var Easing = {
140
149
  }
141
150
  return 0.5 * Math.pow(2, -10 * (amount - 1)) * Math.sin((amount - 1.1) * 5 * Math.PI) + 1;
142
151
  },
143
- },
144
- Back: {
152
+ }),
153
+ Back: Object.freeze({
145
154
  In: function (amount) {
146
155
  var s = 1.70158;
147
- return amount * amount * ((s + 1) * amount - s);
156
+ return amount === 1 ? 1 : amount * amount * ((s + 1) * amount - s);
148
157
  },
149
158
  Out: function (amount) {
150
159
  var s = 1.70158;
151
- return --amount * amount * ((s + 1) * amount + s) + 1;
160
+ return amount === 0 ? 0 : --amount * amount * ((s + 1) * amount + s) + 1;
152
161
  },
153
162
  InOut: function (amount) {
154
163
  var s = 1.70158 * 1.525;
@@ -157,8 +166,8 @@ var Easing = {
157
166
  }
158
167
  return 0.5 * ((amount -= 2) * amount * ((s + 1) * amount + s) + 2);
159
168
  },
160
- },
161
- Bounce: {
169
+ }),
170
+ Bounce: Object.freeze({
162
171
  In: function (amount) {
163
172
  return 1 - Easing.Bounce.Out(1 - amount);
164
173
  },
@@ -182,8 +191,27 @@ var Easing = {
182
191
  }
183
192
  return Easing.Bounce.Out(amount * 2 - 1) * 0.5 + 0.5;
184
193
  },
194
+ }),
195
+ generatePow: function (power) {
196
+ if (power === void 0) { power = 4; }
197
+ power = power < Number.EPSILON ? Number.EPSILON : power;
198
+ power = power > 10000 ? 10000 : power;
199
+ return {
200
+ In: function (amount) {
201
+ return Math.pow(amount, power);
202
+ },
203
+ Out: function (amount) {
204
+ return 1 - Math.pow((1 - amount), power);
205
+ },
206
+ InOut: function (amount) {
207
+ if (amount < 0.5) {
208
+ return Math.pow((amount * 2), power) / 2;
209
+ }
210
+ return (1 - Math.pow((2 - amount * 2), power)) / 2 + 0.5;
211
+ },
212
+ };
185
213
  },
186
- };
214
+ });
187
215
 
188
216
  var now;
189
217
  // Include a performance.now polyfill.
@@ -396,8 +424,10 @@ var Tween = /** @class */ (function () {
396
424
  this._startTime = 0;
397
425
  this._easingFunction = Easing.Linear.None;
398
426
  this._interpolationFunction = Interpolation.Linear;
427
+ // eslint-disable-next-line
399
428
  this._chainedTweens = [];
400
429
  this._onStartCallbackFired = false;
430
+ this._onEveryStartCallbackFired = false;
401
431
  this._id = Sequence.nextId();
402
432
  this._isChainStopped = false;
403
433
  this._goToEnd = false;
@@ -423,10 +453,13 @@ var Tween = /** @class */ (function () {
423
453
  return this;
424
454
  };
425
455
  Tween.prototype.duration = function (d) {
456
+ if (d === void 0) { d = 1000; }
426
457
  this._duration = d;
427
458
  return this;
428
459
  };
429
- Tween.prototype.start = function (time) {
460
+ Tween.prototype.start = function (time, overrideStartingValues) {
461
+ if (time === void 0) { time = now$1(); }
462
+ if (overrideStartingValues === void 0) { overrideStartingValues = false; }
430
463
  if (this._isPlaying) {
431
464
  return this;
432
465
  }
@@ -445,13 +478,17 @@ var Tween = /** @class */ (function () {
445
478
  this._isPlaying = true;
446
479
  this._isPaused = false;
447
480
  this._onStartCallbackFired = false;
481
+ this._onEveryStartCallbackFired = false;
448
482
  this._isChainStopped = false;
449
- this._startTime = time !== undefined ? (typeof time === 'string' ? now$1() + parseFloat(time) : time) : now$1();
483
+ this._startTime = time;
450
484
  this._startTime += this._delayTime;
451
- this._setupProperties(this._object, this._valuesStart, this._valuesEnd, this._valuesStartRepeat);
485
+ this._setupProperties(this._object, this._valuesStart, this._valuesEnd, this._valuesStartRepeat, overrideStartingValues);
452
486
  return this;
453
487
  };
454
- Tween.prototype._setupProperties = function (_object, _valuesStart, _valuesEnd, _valuesStartRepeat) {
488
+ Tween.prototype.startFromCurrentValues = function (time) {
489
+ return this.start(time, true);
490
+ };
491
+ Tween.prototype._setupProperties = function (_object, _valuesStart, _valuesEnd, _valuesStartRepeat, overrideStartingValues) {
455
492
  for (var property in _valuesEnd) {
456
493
  var startValue = _object[property];
457
494
  var startValueIsArray = Array.isArray(startValue);
@@ -471,7 +508,9 @@ var Tween = /** @class */ (function () {
471
508
  // handle an array of relative values
472
509
  endValues = endValues.map(this._handleRelativeValue.bind(this, startValue));
473
510
  // Create a local copy of the Array with the start value at the front
474
- _valuesEnd[property] = [startValue].concat(endValues);
511
+ if (_valuesStart[property] === undefined) {
512
+ _valuesEnd[property] = [startValue].concat(endValues);
513
+ }
475
514
  }
476
515
  // handle the deepness of the values
477
516
  if ((propType === 'object' || startValueIsArray) && startValue && !isInterpolationList) {
@@ -485,11 +524,11 @@ var Tween = /** @class */ (function () {
485
524
  _valuesStartRepeat[property] = startValueIsArray ? [] : {}; // TODO? repeat nested values? And yoyo? And array values?
486
525
  // eslint-disable-next-line
487
526
  // @ts-ignore FIXME?
488
- this._setupProperties(startValue, _valuesStart[property], _valuesEnd[property], _valuesStartRepeat[property]);
527
+ this._setupProperties(startValue, _valuesStart[property], _valuesEnd[property], _valuesStartRepeat[property], overrideStartingValues);
489
528
  }
490
529
  else {
491
- // Save the starting value, but only once.
492
- if (typeof _valuesStart[property] === 'undefined') {
530
+ // Save the starting value, but only once unless override is requested.
531
+ if (typeof _valuesStart[property] === 'undefined' || overrideStartingValues) {
493
532
  _valuesStart[property] = startValue;
494
533
  }
495
534
  if (!startValueIsArray) {
@@ -560,14 +599,17 @@ var Tween = /** @class */ (function () {
560
599
  return this;
561
600
  };
562
601
  Tween.prototype.group = function (group) {
602
+ if (group === void 0) { group = mainGroup; }
563
603
  this._group = group;
564
604
  return this;
565
605
  };
566
606
  Tween.prototype.delay = function (amount) {
607
+ if (amount === void 0) { amount = 0; }
567
608
  this._delayTime = amount;
568
609
  return this;
569
610
  };
570
611
  Tween.prototype.repeat = function (times) {
612
+ if (times === void 0) { times = 0; }
571
613
  this._initialRepeat = times;
572
614
  this._repeat = times;
573
615
  return this;
@@ -577,17 +619,21 @@ var Tween = /** @class */ (function () {
577
619
  return this;
578
620
  };
579
621
  Tween.prototype.yoyo = function (yoyo) {
622
+ if (yoyo === void 0) { yoyo = false; }
580
623
  this._yoyo = yoyo;
581
624
  return this;
582
625
  };
583
626
  Tween.prototype.easing = function (easingFunction) {
627
+ if (easingFunction === void 0) { easingFunction = Easing.Linear.None; }
584
628
  this._easingFunction = easingFunction;
585
629
  return this;
586
630
  };
587
631
  Tween.prototype.interpolation = function (interpolationFunction) {
632
+ if (interpolationFunction === void 0) { interpolationFunction = Interpolation.Linear; }
588
633
  this._interpolationFunction = interpolationFunction;
589
634
  return this;
590
635
  };
636
+ // eslint-disable-next-line
591
637
  Tween.prototype.chain = function () {
592
638
  var tweens = [];
593
639
  for (var _i = 0; _i < arguments.length; _i++) {
@@ -600,6 +646,10 @@ var Tween = /** @class */ (function () {
600
646
  this._onStartCallback = callback;
601
647
  return this;
602
648
  };
649
+ Tween.prototype.onEveryStart = function (callback) {
650
+ this._onEveryStartCallback = callback;
651
+ return this;
652
+ };
603
653
  Tween.prototype.onUpdate = function (callback) {
604
654
  this._onUpdateCallback = callback;
605
655
  return this;
@@ -633,7 +683,7 @@ var Tween = /** @class */ (function () {
633
683
  if (time > endTime)
634
684
  return false;
635
685
  if (autoStart)
636
- this.start(time);
686
+ this.start(time, true);
637
687
  }
638
688
  this._goToEnd = false;
639
689
  if (time < this._startTime) {
@@ -645,6 +695,12 @@ var Tween = /** @class */ (function () {
645
695
  }
646
696
  this._onStartCallbackFired = true;
647
697
  }
698
+ if (this._onEveryStartCallbackFired === false) {
699
+ if (this._onEveryStartCallback) {
700
+ this._onEveryStartCallback(this._object);
701
+ }
702
+ this._onEveryStartCallbackFired = true;
703
+ }
648
704
  elapsed = (time - this._startTime) / this._duration;
649
705
  elapsed = this._duration === 0 || elapsed > 1 ? 1 : elapsed;
650
706
  var value = this._easingFunction(elapsed);
@@ -683,6 +739,7 @@ var Tween = /** @class */ (function () {
683
739
  if (this._onRepeatCallback) {
684
740
  this._onRepeatCallback(this._object);
685
741
  }
742
+ this._onEveryStartCallbackFired = false;
686
743
  return true;
687
744
  }
688
745
  else {
@@ -692,7 +749,7 @@ var Tween = /** @class */ (function () {
692
749
  for (var i = 0, numChainedTweens = this._chainedTweens.length; i < numChainedTweens; i++) {
693
750
  // Make the chained tweens start exactly at the time they should,
694
751
  // even if the `update()` method was called way past the duration of the tween
695
- this._chainedTweens[i].start(this._startTime + this._duration);
752
+ this._chainedTweens[i].start(this._startTime + this._duration, false);
696
753
  }
697
754
  this._isPlaying = false;
698
755
  return false;
@@ -756,7 +813,7 @@ var Tween = /** @class */ (function () {
756
813
  return Tween;
757
814
  }());
758
815
 
759
- var VERSION = '18.6.4';
816
+ var VERSION = '19.0.0';
760
817
 
761
818
  /**
762
819
  * Tween.js - Licensed under the MIT license