animejs 4.2.0-beta.0 → 4.2.1
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.
- package/README.md +6 -1
- package/dist/bundles/anime.esm.js +543 -304
- package/dist/bundles/anime.esm.min.js +2 -2
- package/dist/bundles/anime.umd.js +544 -305
- package/dist/bundles/anime.umd.min.js +2 -2
- package/dist/modules/animatable/animatable.cjs +4 -4
- package/dist/modules/animatable/animatable.js +3 -3
- package/dist/modules/animatable/index.cjs +1 -1
- package/dist/modules/animatable/index.js +1 -1
- package/dist/modules/animation/additive.cjs +1 -1
- package/dist/modules/animation/additive.js +1 -1
- package/dist/modules/animation/animation.cjs +28 -17
- package/dist/modules/animation/animation.d.ts +8 -5
- package/dist/modules/animation/animation.js +27 -16
- package/dist/modules/animation/composition.cjs +1 -1
- package/dist/modules/animation/composition.js +1 -1
- package/dist/modules/animation/index.cjs +1 -1
- package/dist/modules/animation/index.js +1 -1
- package/dist/modules/core/clock.cjs +1 -1
- package/dist/modules/core/clock.js +1 -1
- package/dist/modules/core/colors.cjs +1 -1
- package/dist/modules/core/colors.js +1 -1
- package/dist/modules/core/consts.cjs +7 -2
- package/dist/modules/core/consts.d.ts +2 -0
- package/dist/modules/core/consts.js +6 -3
- package/dist/modules/core/globals.cjs +3 -2
- package/dist/modules/core/globals.js +3 -2
- package/dist/modules/core/helpers.cjs +1 -1
- package/dist/modules/core/helpers.js +1 -1
- package/dist/modules/core/render.cjs +4 -2
- package/dist/modules/core/render.js +4 -2
- package/dist/modules/core/styles.cjs +8 -8
- package/dist/modules/core/styles.js +10 -10
- package/dist/modules/core/targets.cjs +1 -1
- package/dist/modules/core/targets.js +1 -1
- package/dist/modules/core/transforms.cjs +1 -1
- package/dist/modules/core/transforms.js +1 -1
- package/dist/modules/core/units.cjs +1 -1
- package/dist/modules/core/units.js +1 -1
- package/dist/modules/core/values.cjs +17 -6
- package/dist/modules/core/values.js +19 -8
- package/dist/modules/draggable/draggable.cjs +32 -19
- package/dist/modules/draggable/draggable.d.ts +3 -1
- package/dist/modules/draggable/draggable.js +28 -15
- package/dist/modules/draggable/index.cjs +1 -1
- package/dist/modules/draggable/index.js +1 -1
- package/dist/modules/easings/{cubic-bezier.cjs → cubic-bezier/index.cjs} +4 -4
- package/dist/modules/easings/{cubic-bezier.d.ts → cubic-bezier/index.d.ts} +1 -1
- package/dist/modules/easings/{cubic-bezier.js → cubic-bezier/index.js} +4 -4
- package/dist/modules/easings/eases/index.cjs +14 -0
- package/dist/modules/easings/eases/index.d.ts +1 -0
- package/dist/modules/easings/eases/index.js +8 -0
- package/dist/modules/easings/{eases.cjs → eases/parser.cjs} +69 -27
- package/dist/modules/easings/{eases.d.ts → eases/parser.d.ts} +31 -17
- package/dist/modules/easings/{eases.js → eases/parser.js} +60 -21
- package/dist/modules/easings/index.cjs +15 -13
- package/dist/modules/easings/index.d.ts +6 -6
- package/dist/modules/easings/index.js +7 -7
- package/dist/modules/easings/{irregular.cjs → irregular/index.cjs} +5 -5
- package/dist/modules/easings/{irregular.d.ts → irregular/index.d.ts} +1 -1
- package/dist/modules/easings/{irregular.js → irregular/index.js} +4 -4
- package/dist/modules/easings/{linear.cjs → linear/index.cjs} +4 -4
- package/dist/modules/easings/{linear.d.ts → linear/index.d.ts} +1 -1
- package/dist/modules/easings/{linear.js → linear/index.js} +4 -4
- package/dist/modules/easings/none.cjs +1 -1
- package/dist/modules/easings/none.js +1 -1
- package/dist/modules/easings/spring/index.cjs +255 -0
- package/dist/modules/{spring/spring.d.ts → easings/spring/index.d.ts} +21 -5
- package/dist/modules/easings/spring/index.js +251 -0
- package/dist/modules/easings/{steps.cjs → steps/index.cjs} +3 -3
- package/dist/modules/easings/{steps.d.ts → steps/index.d.ts} +1 -1
- package/dist/modules/easings/{steps.js → steps/index.js} +3 -3
- package/dist/modules/engine/engine.cjs +1 -1
- package/dist/modules/engine/engine.js +1 -1
- package/dist/modules/engine/index.cjs +1 -1
- package/dist/modules/engine/index.js +1 -1
- package/dist/modules/events/index.cjs +1 -1
- package/dist/modules/events/index.js +1 -1
- package/dist/modules/events/scroll.cjs +17 -9
- package/dist/modules/events/scroll.d.ts +4 -0
- package/dist/modules/events/scroll.js +16 -8
- package/dist/modules/index.cjs +15 -16
- package/dist/modules/index.d.ts +0 -1
- package/dist/modules/index.js +7 -8
- package/dist/modules/scope/index.cjs +1 -1
- package/dist/modules/scope/index.js +1 -1
- package/dist/modules/scope/scope.cjs +1 -1
- package/dist/modules/scope/scope.js +1 -1
- package/dist/modules/svg/drawable.cjs +1 -1
- package/dist/modules/svg/drawable.js +1 -1
- package/dist/modules/svg/helpers.cjs +1 -1
- package/dist/modules/svg/helpers.js +1 -1
- package/dist/modules/svg/index.cjs +1 -1
- package/dist/modules/svg/index.js +1 -1
- package/dist/modules/svg/morphto.cjs +12 -2
- package/dist/modules/svg/morphto.js +12 -2
- package/dist/modules/svg/motionpath.cjs +18 -11
- package/dist/modules/svg/motionpath.d.ts +1 -1
- package/dist/modules/svg/motionpath.js +18 -11
- package/dist/modules/text/index.cjs +1 -1
- package/dist/modules/text/index.js +1 -1
- package/dist/modules/text/split.cjs +1 -1
- package/dist/modules/text/split.js +1 -1
- package/dist/modules/timeline/index.cjs +1 -1
- package/dist/modules/timeline/index.js +1 -1
- package/dist/modules/timeline/position.cjs +1 -1
- package/dist/modules/timeline/position.js +1 -1
- package/dist/modules/timeline/timeline.cjs +11 -7
- package/dist/modules/timeline/timeline.d.ts +8 -3
- package/dist/modules/timeline/timeline.js +10 -6
- package/dist/modules/timer/index.cjs +1 -1
- package/dist/modules/timer/index.js +1 -1
- package/dist/modules/timer/timer.cjs +17 -14
- package/dist/modules/timer/timer.d.ts +12 -7
- package/dist/modules/timer/timer.js +17 -14
- package/dist/modules/types/index.d.ts +35 -14
- package/dist/modules/utils/chainable.cjs +1 -1
- package/dist/modules/utils/chainable.js +1 -1
- package/dist/modules/utils/index.cjs +1 -1
- package/dist/modules/utils/index.js +1 -1
- package/dist/modules/utils/number.cjs +1 -1
- package/dist/modules/utils/number.js +1 -1
- package/dist/modules/utils/random.cjs +1 -1
- package/dist/modules/utils/random.js +1 -1
- package/dist/modules/utils/stagger.cjs +4 -4
- package/dist/modules/utils/stagger.js +3 -3
- package/dist/modules/utils/target.cjs +1 -1
- package/dist/modules/utils/target.js +1 -1
- package/dist/modules/utils/time.cjs +1 -1
- package/dist/modules/utils/time.js +1 -1
- package/dist/modules/waapi/composition.cjs +11 -5
- package/dist/modules/waapi/composition.d.ts +1 -1
- package/dist/modules/waapi/composition.js +11 -5
- package/dist/modules/waapi/index.cjs +1 -1
- package/dist/modules/waapi/index.js +1 -1
- package/dist/modules/waapi/waapi.cjs +58 -36
- package/dist/modules/waapi/waapi.d.ts +12 -7
- package/dist/modules/waapi/waapi.js +59 -37
- package/package.json +48 -13
- package/dist/modules/easings/parser.cjs +0 -59
- package/dist/modules/easings/parser.d.ts +0 -21
- package/dist/modules/easings/parser.js +0 -55
- package/dist/modules/spring/index.cjs +0 -15
- package/dist/modules/spring/index.d.ts +0 -1
- package/dist/modules/spring/index.js +0 -8
- package/dist/modules/spring/spring.cjs +0 -133
- package/dist/modules/spring/spring.js +0 -130
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* Anime.js - timeline - CJS
|
|
3
|
-
* @version v4.2.
|
|
3
|
+
* @version v4.2.1
|
|
4
4
|
* @license MIT
|
|
5
5
|
* @copyright 2025 - Julian Garnier
|
|
6
6
|
*/
|
|
@@ -17,7 +17,7 @@ var styles = require('../core/styles.cjs');
|
|
|
17
17
|
var composition = require('../animation/composition.cjs');
|
|
18
18
|
var animation = require('../animation/animation.cjs');
|
|
19
19
|
var timer = require('../timer/timer.cjs');
|
|
20
|
-
var
|
|
20
|
+
var parser = require('../easings/eases/parser.cjs');
|
|
21
21
|
var position = require('./position.cjs');
|
|
22
22
|
|
|
23
23
|
/**
|
|
@@ -81,7 +81,7 @@ function addTlChild(childParams, tl, timePosition, targets, index, length) {
|
|
|
81
81
|
const tlChild = targets ?
|
|
82
82
|
new animation.JSAnimation(targets,/** @type {AnimationParams} */(childParams), tl, adjustedPosition, false, index, length) :
|
|
83
83
|
new timer.Timer(/** @type {TimerParams} */(childParams), tl, adjustedPosition);
|
|
84
|
-
tlChild.init(
|
|
84
|
+
tlChild.init(true);
|
|
85
85
|
// TODO: Might be better to insert at a position relative to startTime?
|
|
86
86
|
helpers.addChild(tl, tlChild);
|
|
87
87
|
helpers.forEachChildren(tl, (/** @type {Renderable} */child) => {
|
|
@@ -111,7 +111,7 @@ class Timeline extends timer.Timer {
|
|
|
111
111
|
/** @type {Callback<this>} */
|
|
112
112
|
this.onRender = parameters.onRender || globalDefaults.onRender;
|
|
113
113
|
const tlPlaybackEase = values.setValue(parameters.playbackEase, globalDefaults.playbackEase);
|
|
114
|
-
this._ease = tlPlaybackEase ?
|
|
114
|
+
this._ease = tlPlaybackEase ? parser.parseEase(tlPlaybackEase) : null;
|
|
115
115
|
/** @type {Number} */
|
|
116
116
|
this.iterationDuration = 0;
|
|
117
117
|
}
|
|
@@ -185,7 +185,7 @@ class Timeline extends timer.Timer {
|
|
|
185
185
|
position.parseTimelinePosition(this,a2),
|
|
186
186
|
);
|
|
187
187
|
}
|
|
188
|
-
return this.init(
|
|
188
|
+
return this.init(true);
|
|
189
189
|
}
|
|
190
190
|
}
|
|
191
191
|
|
|
@@ -294,8 +294,12 @@ class Timeline extends timer.Timer {
|
|
|
294
294
|
}
|
|
295
295
|
|
|
296
296
|
/**
|
|
297
|
-
* @
|
|
298
|
-
|
|
297
|
+
* @typedef {this & {then: null}} ResolvedTimeline
|
|
298
|
+
*/
|
|
299
|
+
|
|
300
|
+
/**
|
|
301
|
+
* @param {Callback<ResolvedTimeline>} [callback]
|
|
302
|
+
* @return Promise<this>
|
|
299
303
|
*/
|
|
300
304
|
then(callback) {
|
|
301
305
|
return super.then(callback);
|
|
@@ -144,10 +144,15 @@ export class Timeline extends Timer {
|
|
|
144
144
|
*/
|
|
145
145
|
revert(): this;
|
|
146
146
|
/**
|
|
147
|
-
* @
|
|
148
|
-
* @return {Promise}
|
|
147
|
+
* @typedef {this & {then: null}} ResolvedTimeline
|
|
149
148
|
*/
|
|
150
|
-
|
|
149
|
+
/**
|
|
150
|
+
* @param {Callback<ResolvedTimeline>} [callback]
|
|
151
|
+
* @return Promise<this>
|
|
152
|
+
*/
|
|
153
|
+
then(callback?: Callback<this & {
|
|
154
|
+
then: null;
|
|
155
|
+
}>): Promise<any>;
|
|
151
156
|
}
|
|
152
157
|
export function createTimeline(parameters?: TimelineParams): Timeline;
|
|
153
158
|
import { Timer } from '../timer/timer.js';
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* Anime.js - timeline - ESM
|
|
3
|
-
* @version v4.2.
|
|
3
|
+
* @version v4.2.1
|
|
4
4
|
* @license MIT
|
|
5
5
|
* @copyright 2025 - Julian Garnier
|
|
6
6
|
*/
|
|
@@ -15,7 +15,7 @@ import { cleanInlineStyles } from '../core/styles.js';
|
|
|
15
15
|
import { removeTargetsFromRenderable } from '../animation/composition.js';
|
|
16
16
|
import { JSAnimation } from '../animation/animation.js';
|
|
17
17
|
import { Timer } from '../timer/timer.js';
|
|
18
|
-
import { parseEase } from '../easings/eases.js';
|
|
18
|
+
import { parseEase } from '../easings/eases/parser.js';
|
|
19
19
|
import { parseTimelinePosition } from './position.js';
|
|
20
20
|
|
|
21
21
|
/**
|
|
@@ -79,7 +79,7 @@ function addTlChild(childParams, tl, timePosition, targets, index, length) {
|
|
|
79
79
|
const tlChild = targets ?
|
|
80
80
|
new JSAnimation(targets,/** @type {AnimationParams} */(childParams), tl, adjustedPosition, false, index, length) :
|
|
81
81
|
new Timer(/** @type {TimerParams} */(childParams), tl, adjustedPosition);
|
|
82
|
-
tlChild.init(
|
|
82
|
+
tlChild.init(true);
|
|
83
83
|
// TODO: Might be better to insert at a position relative to startTime?
|
|
84
84
|
addChild(tl, tlChild);
|
|
85
85
|
forEachChildren(tl, (/** @type {Renderable} */child) => {
|
|
@@ -183,7 +183,7 @@ class Timeline extends Timer {
|
|
|
183
183
|
parseTimelinePosition(this,a2),
|
|
184
184
|
);
|
|
185
185
|
}
|
|
186
|
-
return this.init(
|
|
186
|
+
return this.init(true);
|
|
187
187
|
}
|
|
188
188
|
}
|
|
189
189
|
|
|
@@ -292,8 +292,12 @@ class Timeline extends Timer {
|
|
|
292
292
|
}
|
|
293
293
|
|
|
294
294
|
/**
|
|
295
|
-
* @
|
|
296
|
-
|
|
295
|
+
* @typedef {this & {then: null}} ResolvedTimeline
|
|
296
|
+
*/
|
|
297
|
+
|
|
298
|
+
/**
|
|
299
|
+
* @param {Callback<ResolvedTimeline>} [callback]
|
|
300
|
+
* @return Promise<this>
|
|
297
301
|
*/
|
|
298
302
|
then(callback) {
|
|
299
303
|
return super.then(callback);
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* Anime.js - timer - CJS
|
|
3
|
-
* @version v4.2.
|
|
3
|
+
* @version v4.2.1
|
|
4
4
|
* @license MIT
|
|
5
5
|
* @copyright 2025 - Julian Garnier
|
|
6
6
|
*/
|
|
@@ -57,7 +57,7 @@ const reviveTimer = timer => {
|
|
|
57
57
|
if (timer._hasChildren) {
|
|
58
58
|
helpers.forEachChildren(timer, reviveTimer);
|
|
59
59
|
} else {
|
|
60
|
-
helpers.forEachChildren(timer, (/** @type {Tween} tween*/tween) => {
|
|
60
|
+
helpers.forEachChildren(timer, (/** @type {Tween} tween */tween) => {
|
|
61
61
|
if (tween._composition !== consts.compositionTypes.none) {
|
|
62
62
|
composition.composeTween(tween, composition.getTweenSiblings(tween.target, tween.property));
|
|
63
63
|
}
|
|
@@ -114,7 +114,6 @@ class Timer extends clock.Clock {
|
|
|
114
114
|
/** @type {Number} */(timerLoop) < 0 ? Infinity :
|
|
115
115
|
/** @type {Number} */(timerLoop) + 1;
|
|
116
116
|
|
|
117
|
-
|
|
118
117
|
let offsetPosition = 0;
|
|
119
118
|
|
|
120
119
|
if (parent) {
|
|
@@ -204,7 +203,7 @@ class Timer extends clock.Clock {
|
|
|
204
203
|
}
|
|
205
204
|
|
|
206
205
|
set cancelled(cancelled) {
|
|
207
|
-
cancelled ? this.cancel() : this.reset(
|
|
206
|
+
cancelled ? this.cancel() : this.reset(true).play();
|
|
208
207
|
}
|
|
209
208
|
|
|
210
209
|
get currentTime() {
|
|
@@ -269,10 +268,10 @@ class Timer extends clock.Clock {
|
|
|
269
268
|
}
|
|
270
269
|
|
|
271
270
|
/**
|
|
272
|
-
* @param {
|
|
271
|
+
* @param {Boolean} [softReset]
|
|
273
272
|
* @return {this}
|
|
274
273
|
*/
|
|
275
|
-
reset(
|
|
274
|
+
reset(softReset = false) {
|
|
276
275
|
// If cancelled, revive the timer before rendering in order to have propertly composed tweens siblings
|
|
277
276
|
reviveTimer(this);
|
|
278
277
|
if (this._reversed && !this._reverse) this.reversed = false;
|
|
@@ -281,7 +280,7 @@ class Timer extends clock.Clock {
|
|
|
281
280
|
// NOTE: This is only required for Timelines and might be better to move to the Timeline class?
|
|
282
281
|
this._iterationTime = this.iterationDuration;
|
|
283
282
|
// Set tickMode to tickModes.FORCE to force rendering
|
|
284
|
-
render.tick(this, 0, 1,
|
|
283
|
+
render.tick(this, 0, 1, ~~softReset, consts.tickModes.FORCE);
|
|
285
284
|
// Reset timer properties after revive / render to make sure the props are not updated again
|
|
286
285
|
resetTimerProperties(this);
|
|
287
286
|
// Also reset children properties
|
|
@@ -292,16 +291,16 @@ class Timer extends clock.Clock {
|
|
|
292
291
|
}
|
|
293
292
|
|
|
294
293
|
/**
|
|
295
|
-
* @param {
|
|
294
|
+
* @param {Boolean} internalRender
|
|
296
295
|
* @return {this}
|
|
297
296
|
*/
|
|
298
|
-
init(internalRender =
|
|
297
|
+
init(internalRender = false) {
|
|
299
298
|
this.fps = this._fps;
|
|
300
299
|
this.speed = this._speed;
|
|
301
300
|
// Manually calling .init() on timelines should render all children intial state
|
|
302
301
|
// Forces all children to render once then render to 0 when reseted
|
|
303
302
|
if (!internalRender && this._hasChildren) {
|
|
304
|
-
render.tick(this, this.duration, 1, internalRender, consts.tickModes.FORCE);
|
|
303
|
+
render.tick(this, this.duration, 1, ~~internalRender, consts.tickModes.FORCE);
|
|
305
304
|
}
|
|
306
305
|
this.reset(internalRender);
|
|
307
306
|
// Make sure to set autoplay to false to child timers so it doesn't attempt to autoplay / link
|
|
@@ -355,7 +354,7 @@ class Timer extends clock.Clock {
|
|
|
355
354
|
|
|
356
355
|
/** @return {this} */
|
|
357
356
|
restart() {
|
|
358
|
-
return this.reset(
|
|
357
|
+
return this.reset().resume();
|
|
359
358
|
}
|
|
360
359
|
|
|
361
360
|
/**
|
|
@@ -458,8 +457,12 @@ class Timer extends clock.Clock {
|
|
|
458
457
|
}
|
|
459
458
|
|
|
460
459
|
/**
|
|
461
|
-
* @
|
|
462
|
-
|
|
460
|
+
* @typedef {this & {then: null}} ResolvedTimer
|
|
461
|
+
*/
|
|
462
|
+
|
|
463
|
+
/**
|
|
464
|
+
* @param {Callback<ResolvedTimer>} [callback]
|
|
465
|
+
* @return Promise<this>
|
|
463
466
|
*/
|
|
464
467
|
then(callback = consts.noop) {
|
|
465
468
|
const then = this.then;
|
|
@@ -467,7 +470,7 @@ class Timer extends clock.Clock {
|
|
|
467
470
|
// this.then = null prevents infinite recursion if returned by an async function
|
|
468
471
|
// https://github.com/juliangarnierorg/anime-beta/issues/26
|
|
469
472
|
this.then = null;
|
|
470
|
-
callback(this);
|
|
473
|
+
callback(/** @type {ResolvedTimer} */(this));
|
|
471
474
|
this.then = then;
|
|
472
475
|
this._resolve = consts.noop;
|
|
473
476
|
};
|
|
@@ -79,15 +79,15 @@ export class Timer extends Clock {
|
|
|
79
79
|
set reversed(reverse: boolean);
|
|
80
80
|
get reversed(): boolean;
|
|
81
81
|
/**
|
|
82
|
-
* @param {
|
|
82
|
+
* @param {Boolean} [softReset]
|
|
83
83
|
* @return {this}
|
|
84
84
|
*/
|
|
85
|
-
reset(
|
|
85
|
+
reset(softReset?: boolean): this;
|
|
86
86
|
/**
|
|
87
|
-
* @param {
|
|
87
|
+
* @param {Boolean} internalRender
|
|
88
88
|
* @return {this}
|
|
89
89
|
*/
|
|
90
|
-
init(internalRender?:
|
|
90
|
+
init(internalRender?: boolean): this;
|
|
91
91
|
/** @return {this} */
|
|
92
92
|
resetTime(): this;
|
|
93
93
|
/** @return {this} */
|
|
@@ -127,10 +127,15 @@ export class Timer extends Clock {
|
|
|
127
127
|
*/
|
|
128
128
|
complete(): this;
|
|
129
129
|
/**
|
|
130
|
-
* @
|
|
131
|
-
* @return {Promise}
|
|
130
|
+
* @typedef {this & {then: null}} ResolvedTimer
|
|
132
131
|
*/
|
|
133
|
-
|
|
132
|
+
/**
|
|
133
|
+
* @param {Callback<ResolvedTimer>} [callback]
|
|
134
|
+
* @return Promise<this>
|
|
135
|
+
*/
|
|
136
|
+
then(callback?: Callback<this & {
|
|
137
|
+
then: null;
|
|
138
|
+
}>): Promise<any>;
|
|
134
139
|
}
|
|
135
140
|
export function createTimer(parameters?: TimerParams): Timer;
|
|
136
141
|
import { Clock } from '../core/clock.js';
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* Anime.js - timer - ESM
|
|
3
|
-
* @version v4.2.
|
|
3
|
+
* @version v4.2.1
|
|
4
4
|
* @license MIT
|
|
5
5
|
* @copyright 2025 - Julian Garnier
|
|
6
6
|
*/
|
|
@@ -55,7 +55,7 @@ const reviveTimer = timer => {
|
|
|
55
55
|
if (timer._hasChildren) {
|
|
56
56
|
forEachChildren(timer, reviveTimer);
|
|
57
57
|
} else {
|
|
58
|
-
forEachChildren(timer, (/** @type {Tween} tween*/tween) => {
|
|
58
|
+
forEachChildren(timer, (/** @type {Tween} tween */tween) => {
|
|
59
59
|
if (tween._composition !== compositionTypes.none) {
|
|
60
60
|
composeTween(tween, getTweenSiblings(tween.target, tween.property));
|
|
61
61
|
}
|
|
@@ -112,7 +112,6 @@ class Timer extends Clock {
|
|
|
112
112
|
/** @type {Number} */(timerLoop) < 0 ? Infinity :
|
|
113
113
|
/** @type {Number} */(timerLoop) + 1;
|
|
114
114
|
|
|
115
|
-
|
|
116
115
|
let offsetPosition = 0;
|
|
117
116
|
|
|
118
117
|
if (parent) {
|
|
@@ -202,7 +201,7 @@ class Timer extends Clock {
|
|
|
202
201
|
}
|
|
203
202
|
|
|
204
203
|
set cancelled(cancelled) {
|
|
205
|
-
cancelled ? this.cancel() : this.reset(
|
|
204
|
+
cancelled ? this.cancel() : this.reset(true).play();
|
|
206
205
|
}
|
|
207
206
|
|
|
208
207
|
get currentTime() {
|
|
@@ -267,10 +266,10 @@ class Timer extends Clock {
|
|
|
267
266
|
}
|
|
268
267
|
|
|
269
268
|
/**
|
|
270
|
-
* @param {
|
|
269
|
+
* @param {Boolean} [softReset]
|
|
271
270
|
* @return {this}
|
|
272
271
|
*/
|
|
273
|
-
reset(
|
|
272
|
+
reset(softReset = false) {
|
|
274
273
|
// If cancelled, revive the timer before rendering in order to have propertly composed tweens siblings
|
|
275
274
|
reviveTimer(this);
|
|
276
275
|
if (this._reversed && !this._reverse) this.reversed = false;
|
|
@@ -279,7 +278,7 @@ class Timer extends Clock {
|
|
|
279
278
|
// NOTE: This is only required for Timelines and might be better to move to the Timeline class?
|
|
280
279
|
this._iterationTime = this.iterationDuration;
|
|
281
280
|
// Set tickMode to tickModes.FORCE to force rendering
|
|
282
|
-
tick(this, 0, 1,
|
|
281
|
+
tick(this, 0, 1, ~~softReset, tickModes.FORCE);
|
|
283
282
|
// Reset timer properties after revive / render to make sure the props are not updated again
|
|
284
283
|
resetTimerProperties(this);
|
|
285
284
|
// Also reset children properties
|
|
@@ -290,16 +289,16 @@ class Timer extends Clock {
|
|
|
290
289
|
}
|
|
291
290
|
|
|
292
291
|
/**
|
|
293
|
-
* @param {
|
|
292
|
+
* @param {Boolean} internalRender
|
|
294
293
|
* @return {this}
|
|
295
294
|
*/
|
|
296
|
-
init(internalRender =
|
|
295
|
+
init(internalRender = false) {
|
|
297
296
|
this.fps = this._fps;
|
|
298
297
|
this.speed = this._speed;
|
|
299
298
|
// Manually calling .init() on timelines should render all children intial state
|
|
300
299
|
// Forces all children to render once then render to 0 when reseted
|
|
301
300
|
if (!internalRender && this._hasChildren) {
|
|
302
|
-
tick(this, this.duration, 1, internalRender, tickModes.FORCE);
|
|
301
|
+
tick(this, this.duration, 1, ~~internalRender, tickModes.FORCE);
|
|
303
302
|
}
|
|
304
303
|
this.reset(internalRender);
|
|
305
304
|
// Make sure to set autoplay to false to child timers so it doesn't attempt to autoplay / link
|
|
@@ -353,7 +352,7 @@ class Timer extends Clock {
|
|
|
353
352
|
|
|
354
353
|
/** @return {this} */
|
|
355
354
|
restart() {
|
|
356
|
-
return this.reset(
|
|
355
|
+
return this.reset().resume();
|
|
357
356
|
}
|
|
358
357
|
|
|
359
358
|
/**
|
|
@@ -456,8 +455,12 @@ class Timer extends Clock {
|
|
|
456
455
|
}
|
|
457
456
|
|
|
458
457
|
/**
|
|
459
|
-
* @
|
|
460
|
-
|
|
458
|
+
* @typedef {this & {then: null}} ResolvedTimer
|
|
459
|
+
*/
|
|
460
|
+
|
|
461
|
+
/**
|
|
462
|
+
* @param {Callback<ResolvedTimer>} [callback]
|
|
463
|
+
* @return Promise<this>
|
|
461
464
|
*/
|
|
462
465
|
then(callback = noop) {
|
|
463
466
|
const then = this.then;
|
|
@@ -465,7 +468,7 @@ class Timer extends Clock {
|
|
|
465
468
|
// this.then = null prevents infinite recursion if returned by an async function
|
|
466
469
|
// https://github.com/juliangarnierorg/anime-beta/issues/26
|
|
467
470
|
this.then = null;
|
|
468
|
-
callback(this);
|
|
471
|
+
callback(/** @type {ResolvedTimer} */(this));
|
|
469
472
|
this.then = then;
|
|
470
473
|
this._resolve = noop;
|
|
471
474
|
};
|
|
@@ -7,6 +7,7 @@ export type DefaultsParams = {
|
|
|
7
7
|
loop?: number | boolean;
|
|
8
8
|
reversed?: boolean;
|
|
9
9
|
alternate?: boolean;
|
|
10
|
+
persist?: boolean;
|
|
10
11
|
autoplay?: boolean | ScrollObserver;
|
|
11
12
|
duration?: number | FunctionValue;
|
|
12
13
|
delay?: number | FunctionValue;
|
|
@@ -14,13 +15,13 @@ export type DefaultsParams = {
|
|
|
14
15
|
ease?: EasingParam;
|
|
15
16
|
composition?: "none" | "replace" | "blend" | compositionTypes;
|
|
16
17
|
modifier?: (v: any) => any;
|
|
17
|
-
onBegin?:
|
|
18
|
-
onBeforeUpdate?:
|
|
19
|
-
onUpdate?:
|
|
20
|
-
onLoop?:
|
|
21
|
-
onPause?:
|
|
22
|
-
onComplete?:
|
|
23
|
-
onRender?:
|
|
18
|
+
onBegin?: Callback<Tickable>;
|
|
19
|
+
onBeforeUpdate?: Callback<Tickable>;
|
|
20
|
+
onUpdate?: Callback<Tickable>;
|
|
21
|
+
onLoop?: Callback<Tickable>;
|
|
22
|
+
onPause?: Callback<Tickable>;
|
|
23
|
+
onComplete?: Callback<Tickable>;
|
|
24
|
+
onRender?: Callback<Renderable>;
|
|
24
25
|
};
|
|
25
26
|
export type Renderable = JSAnimation | Timeline;
|
|
26
27
|
export type Tickable = Timer | Renderable;
|
|
@@ -50,12 +51,14 @@ export type JSTargetsArray = Array<JSTarget>;
|
|
|
50
51
|
export type TargetsParam = Array<TargetSelector> | TargetSelector;
|
|
51
52
|
export type TargetsArray = Array<Target>;
|
|
52
53
|
export type EasingFunction = (time: number) => number;
|
|
53
|
-
export type EaseStringParamNames = ("linear" | "
|
|
54
|
+
export type EaseStringParamNames = ("linear" | "none" | "in" | "out" | "inOut" | "inQuad" | "outQuad" | "inOutQuad" | "inCubic" | "outCubic" | "inOutCubic" | "inQuart" | "outQuart" | "inOutQuart" | "inQuint" | "outQuint" | "inOutQuint" | "inSine" | "outSine" | "inOutSine" | "inCirc" | "outCirc" | "inOutCirc" | "inExpo" | "outExpo" | "inOutExpo" | "inBounce" | "outBounce" | "inOutBounce" | "inBack" | "outBack" | "inOutBack" | "inElastic" | "outElastic" | "inOutElastic" | "out(p = 1.675)" | "inOut(p = 1.675)" | "inBack(overshoot = 1.7)" | "outBack(overshoot = 1.7)" | "inOutBack(overshoot = 1.7)" | "inElastic(amplitude = 1, period = .3)" | "outElastic(amplitude = 1, period = .3)" | "inOutElastic(amplitude = 1, period = .3)");
|
|
55
|
+
export type WAAPIEaseStringParamNames = ("ease" | "ease-in" | "ease-out" | "ease-in-out" | "linear(0, 0.25, 1)" | "steps" | "steps(6, start)" | "step-start" | "step-end" | "cubic-bezier(0.42, 0, 1, 1)");
|
|
54
56
|
export type PowerEasing = (power?: number | string) => EasingFunction;
|
|
55
57
|
export type BackEasing = (overshoot?: number | string) => EasingFunction;
|
|
56
58
|
export type ElasticEasing = (amplitude?: number | string, period?: number | string) => EasingFunction;
|
|
57
59
|
export type EasingFunctionWithParams = PowerEasing | BackEasing | ElasticEasing;
|
|
58
60
|
export type EasingParam = (string & {}) | EaseStringParamNames | EasingFunction | Spring;
|
|
61
|
+
export type WAAPIEasingParam = (string & {}) | EaseStringParamNames | WAAPIEaseStringParamNames | EasingFunction | Spring;
|
|
59
62
|
export type SpringParams = {
|
|
60
63
|
/**
|
|
61
64
|
* - Mass, default 1
|
|
@@ -73,6 +76,18 @@ export type SpringParams = {
|
|
|
73
76
|
* - Initial velocity, default 0
|
|
74
77
|
*/
|
|
75
78
|
velocity?: number;
|
|
79
|
+
/**
|
|
80
|
+
* - Initial bounce, default 0
|
|
81
|
+
*/
|
|
82
|
+
bounce?: number;
|
|
83
|
+
/**
|
|
84
|
+
* - The perceived duration, default 0
|
|
85
|
+
*/
|
|
86
|
+
duration?: number;
|
|
87
|
+
/**
|
|
88
|
+
* - Callback function called when the spring currentTime hits the perceived duration
|
|
89
|
+
*/
|
|
90
|
+
onComplete?: Callback<JSAnimation>;
|
|
76
91
|
};
|
|
77
92
|
export type Callback<T> = (self: T, e?: PointerEvent) => any;
|
|
78
93
|
export type TickableCallbacks<T extends unknown> = {
|
|
@@ -131,6 +146,7 @@ export type Tween = {
|
|
|
131
146
|
_isOverlapped: number;
|
|
132
147
|
_isOverridden: number;
|
|
133
148
|
_renderTransforms: number;
|
|
149
|
+
_inlineValue: string;
|
|
134
150
|
_prevRep: Tween;
|
|
135
151
|
_nextRep: Tween;
|
|
136
152
|
_prevAdd: Tween;
|
|
@@ -238,13 +254,12 @@ export type TimelineParams = TimerOptions & TimelineOptions & TickableCallbacks<
|
|
|
238
254
|
export type WAAPITweenValue = string | number | Array<string> | Array<number>;
|
|
239
255
|
export type WAAPIFunctionValue = (target: DOMTarget, index: number, length: number) => WAAPITweenValue;
|
|
240
256
|
export type WAAPIKeyframeValue = WAAPITweenValue | WAAPIFunctionValue | Array<string | number | WAAPIFunctionValue>;
|
|
241
|
-
export type WAAPICallback = (animation: WAAPIAnimation) => void;
|
|
242
257
|
export type WAAPITweenOptions = {
|
|
243
258
|
to?: WAAPIKeyframeValue;
|
|
244
259
|
from?: WAAPIKeyframeValue;
|
|
245
260
|
duration?: number | WAAPIFunctionValue;
|
|
246
261
|
delay?: number | WAAPIFunctionValue;
|
|
247
|
-
ease?:
|
|
262
|
+
ease?: WAAPIEasingParam;
|
|
248
263
|
composition?: CompositeOperation;
|
|
249
264
|
};
|
|
250
265
|
export type WAAPIAnimationOptions = {
|
|
@@ -255,11 +270,12 @@ export type WAAPIAnimationOptions = {
|
|
|
255
270
|
playbackRate?: number;
|
|
256
271
|
duration?: number | WAAPIFunctionValue;
|
|
257
272
|
delay?: number | WAAPIFunctionValue;
|
|
258
|
-
ease?:
|
|
273
|
+
ease?: WAAPIEasingParam;
|
|
259
274
|
composition?: CompositeOperation;
|
|
260
|
-
|
|
275
|
+
persist?: boolean;
|
|
276
|
+
onComplete?: Callback<WAAPIAnimation>;
|
|
261
277
|
};
|
|
262
|
-
export type WAAPIAnimationParams = Record<string, WAAPIKeyframeValue | WAAPIAnimationOptions | boolean | ScrollObserver |
|
|
278
|
+
export type WAAPIAnimationParams = Record<string, WAAPIKeyframeValue | WAAPIAnimationOptions | boolean | ScrollObserver | Callback<WAAPIAnimation> | WAAPIEasingParam | WAAPITweenOptions> & WAAPIAnimationOptions;
|
|
263
279
|
export type AnimatablePropertySetter = (to: number | Array<number>, duration?: number, ease?: EasingParam) => AnimatableObject;
|
|
264
280
|
export type AnimatablePropertyGetter = () => number | Array<number>;
|
|
265
281
|
export type AnimatableProperty = AnimatablePropertySetter & AnimatablePropertyGetter;
|
|
@@ -323,6 +339,10 @@ export type DraggableCursorParams = {
|
|
|
323
339
|
onHover?: string;
|
|
324
340
|
onGrab?: string;
|
|
325
341
|
};
|
|
342
|
+
export type DraggableDragThresholdParams = {
|
|
343
|
+
mouse?: number;
|
|
344
|
+
touch?: number;
|
|
345
|
+
};
|
|
326
346
|
export type DraggableParams = {
|
|
327
347
|
trigger?: DOMTargetSelector;
|
|
328
348
|
container?: DOMTargetSelector | Array<number> | ((draggable: Draggable) => DOMTargetSelector | Array<number>);
|
|
@@ -334,6 +354,7 @@ export type DraggableParams = {
|
|
|
334
354
|
containerFriction?: number | ((draggable: Draggable) => number);
|
|
335
355
|
releaseContainerFriction?: number | ((draggable: Draggable) => number);
|
|
336
356
|
dragSpeed?: number | ((draggable: Draggable) => number);
|
|
357
|
+
dragThreshold?: number | DraggableDragThresholdParams | ((draggable: Draggable) => number | DraggableDragThresholdParams);
|
|
337
358
|
scrollSpeed?: number | ((draggable: Draggable) => number);
|
|
338
359
|
scrollThreshold?: number | ((draggable: Draggable) => number);
|
|
339
360
|
minVelocity?: number | ((draggable: Draggable) => number);
|
|
@@ -382,6 +403,6 @@ import type { WAAPIAnimation } from '../waapi/waapi.js';
|
|
|
382
403
|
import type { Draggable } from '../draggable/draggable.js';
|
|
383
404
|
import type { TextSplitter } from '../text/split.js';
|
|
384
405
|
import type { Scope } from '../scope/scope.js';
|
|
385
|
-
import type { Spring } from '../spring/
|
|
406
|
+
import type { Spring } from '../easings/spring/index.js';
|
|
386
407
|
import type { tweenTypes } from '../core/consts.js';
|
|
387
408
|
import type { valueTypes } from '../core/consts.js';
|