animejs 4.1.3 → 4.2.0-beta.0

package/dist/modules/animation/composition.js

@@ -0,0 +1,377 @@
+/**
+ * Anime.js - animation - ESM
+ * @version v4.2.0
+ * @license MIT
+ * @copyright 2025 - Julian Garnier
+ */
+
+import { minValue, compositionTypes, tweenTypes } from '../core/consts.js';
+import { forEachChildren, removeChild, isUnd, addChild, round, cloneArray } from '../core/helpers.js';
+import { sanitizePropertyName } from '../core/styles.js';
+import { engine } from '../engine/engine.js';
+import { addAdditiveAnimation, additive } from './additive.js';
+
+/**
+ * @import {
+ *   TweenReplaceLookups,
+ *   TweenAdditiveLookups,
+ *   TweenPropertySiblings,
+ *   Tween,
+ *   Target,
+ *   TargetsArray,
+ *   Renderable,
+ * } from '../types/index.js'
+ *
+ * @import {
+ *   JSAnimation,
+ * } from '../animation/animation.js'
+*/
+
+const lookups = {
+  /** @type {TweenReplaceLookups} */
+  _rep: new WeakMap(),
+  /** @type {TweenAdditiveLookups} */
+  _add: new Map(),
+};
+
+/**
+ * @param  {Target} target
+ * @param  {String} property
+ * @param  {String} lookup
+ * @return {TweenPropertySiblings}
+ */
+const getTweenSiblings = (target, property, lookup = '_rep') => {
+  const lookupMap = lookups[lookup];
+  let targetLookup = lookupMap.get(target);
+  if (!targetLookup) {
+    targetLookup = {};
+    lookupMap.set(target, targetLookup);
+  }
+  return targetLookup[property] ? targetLookup[property] : targetLookup[property] = {
+    _head: null,
+    _tail: null,
+  }
+};
+
+/**
+ * @param  {Tween} p
+ * @param  {Tween} c
+ * @return {Number|Boolean}
+ */
+const addTweenSortMethod = (p, c) => {
+  return p._isOverridden || p._absoluteStartTime > c._absoluteStartTime;
+};
+
+/**
+ * @param {Tween} tween
+ */
+const overrideTween = tween => {
+  tween._isOverlapped = 1;
+  tween._isOverridden = 1;
+  tween._changeDuration = minValue;
+  tween._currentTime = minValue;
+};
+
+/**
+ * @param  {Tween} tween
+ * @param  {TweenPropertySiblings} siblings
+ * @return {Tween}
+ */
+const composeTween = (tween, siblings) => {
+
+  const tweenCompositionType = tween._composition;
+
+  // Handle replaced tweens
+
+  if (tweenCompositionType === compositionTypes.replace) {
+
+    const tweenAbsStartTime = tween._absoluteStartTime;
+
+    addChild(siblings, tween, addTweenSortMethod, '_prevRep', '_nextRep');
+
+    const prevSibling = tween._prevRep;
+
+    // Update the previous siblings for composition replace tweens
+
+    if (prevSibling) {
+
+      const prevParent = prevSibling.parent;
+      const prevAbsEndTime = prevSibling._absoluteStartTime + prevSibling._changeDuration;
+
+      // Handle looped animations tween
+
+      if (
+        // Check if the previous tween is from a different animation
+        tween.parent.id !== prevParent.id &&
+        // Check if the animation has loops
+        prevParent.iterationCount> 1 &&
+        // Check if _absoluteChangeEndTime of last loop overlaps the current tween
+        prevAbsEndTime + (prevParent.duration - prevParent.iterationDuration) > tweenAbsStartTime
+      ) {
+
+        // TODO: Find a way to only override the iterations overlapping with the tween
+        overrideTween(prevSibling);
+
+        let prevPrevSibling = prevSibling._prevRep;
+
+        // If the tween was part of a set of keyframes, override its siblings
+        while (prevPrevSibling && prevPrevSibling.parent.id === prevParent.id) {
+          overrideTween(prevPrevSibling);
+          prevPrevSibling = prevPrevSibling._prevRep;
+        }
+
+      }
+
+      const absoluteUpdateStartTime = tweenAbsStartTime - tween._delay;
+
+      if (prevAbsEndTime > absoluteUpdateStartTime) {
+
+        const prevChangeStartTime = prevSibling._startTime;
+        const prevTLOffset = prevAbsEndTime - (prevChangeStartTime + prevSibling._updateDuration);
+        // Rounding is necessary here to minimize floating point errors when working in seconds
+        const updatedPrevChangeDuration = round(absoluteUpdateStartTime - prevTLOffset - prevChangeStartTime, 12);
+
+        prevSibling._changeDuration = updatedPrevChangeDuration;
+        prevSibling._currentTime = updatedPrevChangeDuration;
+        prevSibling._isOverlapped = 1;
+
+        // Override the previous tween if its new _changeDuration is lower than minValue
+        // TODO: See if it's even neceseeary to test against minValue, checking for 0 might be enough
+        if (updatedPrevChangeDuration < minValue) {
+          overrideTween(prevSibling);
+        }
+      }
+
+      // Pause (and cancel) the parent if it only contains overlapped tweens
+
+      let pausePrevParentAnimation = true;
+
+      forEachChildren(prevParent, (/** @type Tween */t) => {
+        if (!t._isOverlapped) pausePrevParentAnimation = false;
+      });
+
+      if (pausePrevParentAnimation) {
+        const prevParentTL = prevParent.parent;
+        if (prevParentTL) {
+          let pausePrevParentTL = true;
+          forEachChildren(prevParentTL, (/** @type JSAnimation */a) => {
+            if (a !== prevParent) {
+              forEachChildren(a, (/** @type Tween */t) => {
+                if (!t._isOverlapped) pausePrevParentTL = false;
+              });
+            }
+          });
+          if (pausePrevParentTL) {
+            prevParentTL.cancel();
+          }
+        } else {
+          prevParent.cancel();
+          // Previously, calling .cancel() on a timeline child would affect the render order of other children
+          // Worked around this by marking it as .completed and using .pause() for safe removal in the engine loop
+          // This is no longer needed since timeline tween composition is now handled separately
+          // Keeping this here for reference
+          // prevParent.completed = true;
+          // prevParent.pause();
+        }
+      }
+
+    }
+
+    // let nextSibling = tween._nextRep;
+
+    // // All the next siblings are automatically overridden
+
+    // if (nextSibling && nextSibling._absoluteStartTime >= tweenAbsStartTime) {
+    //   while (nextSibling) {
+    //     overrideTween(nextSibling);
+    //     nextSibling = nextSibling._nextRep;
+    //   }
+    // }
+
+    // if (nextSibling && nextSibling._absoluteStartTime < tweenAbsStartTime) {
+    //   while (nextSibling) {
+    //     overrideTween(nextSibling);
+    //     console.log(tween.id, nextSibling.id);
+    //     nextSibling = nextSibling._nextRep;
+    //   }
+    // }
+
+  // Handle additive tweens composition
+
+  } else if (tweenCompositionType === compositionTypes.blend) {
+
+    const additiveTweenSiblings = getTweenSiblings(tween.target, tween.property, '_add');
+    const additiveAnimation = addAdditiveAnimation(lookups._add);
+
+    let lookupTween = additiveTweenSiblings._head;
+
+    if (!lookupTween) {
+      lookupTween = { ...tween };
+      lookupTween._composition = compositionTypes.replace;
+      lookupTween._updateDuration = minValue;
+      lookupTween._startTime = 0;
+      lookupTween._numbers = cloneArray(tween._fromNumbers);
+      lookupTween._number = 0;
+      lookupTween._next = null;
+      lookupTween._prev = null;
+      addChild(additiveTweenSiblings, lookupTween);
+      addChild(additiveAnimation, lookupTween);
+    }
+
+    // Convert the values of TO to FROM and set TO to 0
+
+    const toNumber = tween._toNumber;
+    tween._fromNumber = lookupTween._fromNumber - toNumber;
+    tween._toNumber = 0;
+    tween._numbers = cloneArray(tween._fromNumbers);
+    tween._number = 0;
+    lookupTween._fromNumber = toNumber;
+
+    if (tween._toNumbers) {
+      const toNumbers = cloneArray(tween._toNumbers);
+      if (toNumbers) {
+        toNumbers.forEach((value, i) => {
+          tween._fromNumbers[i] = lookupTween._fromNumbers[i] - value;
+          tween._toNumbers[i] = 0;
+        });
+      }
+      lookupTween._fromNumbers = toNumbers;
+    }
+
+    addChild(additiveTweenSiblings, tween, null, '_prevAdd', '_nextAdd');
+
+  }
+
+  return tween;
+
+};
+
+/**
+ * @param  {Tween} tween
+ * @return {Tween}
+ */
+const removeTweenSliblings = tween => {
+  const tweenComposition = tween._composition;
+  if (tweenComposition !== compositionTypes.none) {
+    const tweenTarget = tween.target;
+    const tweenProperty = tween.property;
+    const replaceTweensLookup = lookups._rep;
+    const replaceTargetProps = replaceTweensLookup.get(tweenTarget);
+    const tweenReplaceSiblings = replaceTargetProps[tweenProperty];
+    removeChild(tweenReplaceSiblings, tween, '_prevRep', '_nextRep');
+    if (tweenComposition === compositionTypes.blend) {
+      const addTweensLookup = lookups._add;
+      const addTargetProps = addTweensLookup.get(tweenTarget);
+      if (!addTargetProps) return;
+      const additiveTweenSiblings = addTargetProps[tweenProperty];
+      const additiveAnimation = additive.animation;
+      removeChild(additiveTweenSiblings, tween, '_prevAdd', '_nextAdd');
+      // If only one tween is left in the additive lookup, it's the tween lookup
+      const lookupTween = additiveTweenSiblings._head;
+      if (lookupTween && lookupTween === additiveTweenSiblings._tail) {
+        removeChild(additiveTweenSiblings, lookupTween, '_prevAdd', '_nextAdd');
+        removeChild(additiveAnimation, lookupTween);
+        let shouldClean = true;
+        for (let prop in addTargetProps) {
+          if (addTargetProps[prop]._head) {
+            shouldClean = false;
+            break;
+          }
+        }
+        if (shouldClean) {
+          addTweensLookup.delete(tweenTarget);
+        }
+      }
+    }
+  }
+  return tween;
+};
+
+/**
+ * @param  {TargetsArray} targetsArray
+ * @param  {JSAnimation} animation
+ * @param  {String} [propertyName]
+ * @return {Boolean}
+ */
+const removeTargetsFromJSAnimation = (targetsArray, animation, propertyName) => {
+  let tweensMatchesTargets = false;
+  forEachChildren(animation, (/**@type {Tween} */tween) => {
+    const tweenTarget = tween.target;
+    if (targetsArray.includes(tweenTarget)) {
+      const tweenName = tween.property;
+      const tweenType = tween._tweenType;
+      const normalizePropName = sanitizePropertyName(propertyName, tweenTarget, tweenType);
+      if (!normalizePropName || normalizePropName && normalizePropName === tweenName) {
+        // Make sure to flag the previous CSS transform tween to renderTransform
+        if (tween.parent._tail === tween &&
+            tween._tweenType === tweenTypes.TRANSFORM &&
+            tween._prev &&
+            tween._prev._tweenType === tweenTypes.TRANSFORM
+        ) {
+          tween._prev._renderTransforms = 1;
+        }
+        // Removes the tween from the selected animation
+        removeChild(animation, tween);
+        // Detach the tween from its siblings to make sure blended tweens are correctlly removed
+        removeTweenSliblings(tween);
+        tweensMatchesTargets = true;
+      }
+    }
+  }, true);
+  return tweensMatchesTargets;
+};
+
+/**
+ * @param  {TargetsArray} targetsArray
+ * @param  {Renderable} [renderable]
+ * @param  {String} [propertyName]
+ */
+const removeTargetsFromRenderable = (targetsArray, renderable, propertyName) => {
+  const parent = /** @type {Renderable|typeof engine} **/(renderable ? renderable : engine);
+  let removeMatches;
+  if (parent._hasChildren) {
+    let iterationDuration = 0;
+    forEachChildren(parent, (/** @type {Renderable} */child) => {
+      if (!child._hasChildren) {
+        removeMatches = removeTargetsFromJSAnimation(targetsArray, /** @type {JSAnimation} */(child), propertyName);
+        // Remove the child from its parent if no tweens and no children left after the removal
+        if (removeMatches && !child._head) {
+          child.cancel();
+          removeChild(parent, child);
+        } else {
+          // Calculate the new iterationDuration value to handle onComplete with last child in render()
+          const childTLOffset = child._offset + child._delay;
+          const childDur = childTLOffset + child.duration;
+          if (childDur > iterationDuration) {
+            iterationDuration = childDur;
+          }
+        }
+      }
+      // Make sure to also remove engine's children targets
+      // NOTE: Avoid recursion?
+      if (child._head) {
+        removeTargetsFromRenderable(targetsArray, child, propertyName);
+      } else {
+        child._hasChildren = false;
+      }
+    }, true);
+    // Update iterationDuration value to handle onComplete with last child in render()
+    if (!isUnd(/** @type {Renderable} */(parent).iterationDuration)) {
+      /** @type {Renderable} */(parent).iterationDuration = iterationDuration;
+    }
+  } else {
+    removeMatches = removeTargetsFromJSAnimation(
+      targetsArray,
+      /** @type {JSAnimation} */(parent),
+      propertyName
+    );
+  }
+  if (removeMatches && !parent._head) {
+    parent._hasChildren = false;
+    // Cancel the parent if there are no tweens and no children left after the removal
+    // We have to check if the .cancel() method exist to handle cases where the parent is the engine itself
+    if (/** @type {Renderable} */(parent).cancel) /** @type {Renderable} */(parent).cancel();
+  }
+};
+
+export { composeTween, getTweenSiblings, overrideTween, removeTargetsFromRenderable, removeTweenSliblings };

package/dist/modules/animation/index.cjs

@@ -0,0 +1,15 @@
+/**
+ * Anime.js - animation - CJS
+ * @version v4.2.0
+ * @license MIT
+ * @copyright 2025 - Julian Garnier
+ */
+
+'use strict';
+
+var animation = require('./animation.cjs');
+
+
+
+exports.JSAnimation = animation.JSAnimation;
+exports.animate = animation.animate;

package/dist/modules/animation/index.d.ts

@@ -0,0 +1 @@
+export * from "./animation.js";

package/dist/modules/animation/index.js

@@ -0,0 +1,8 @@
+/**
+ * Anime.js - animation - ESM
+ * @version v4.2.0
+ * @license MIT
+ * @copyright 2025 - Julian Garnier
+ */
+
+export { JSAnimation, animate } from './animation.js';

package/dist/modules/core/clock.cjs

@@ -0,0 +1,110 @@
+/**
+ * Anime.js - core - CJS
+ * @version v4.2.0
+ * @license MIT
+ * @copyright 2025 - Julian Garnier
+ */
+
+'use strict';
+
+var consts = require('./consts.cjs');
+var helpers = require('./helpers.cjs');
+
+/**
+ * @import {
+ *   Tickable,
+ *   Tween,
+ * } from '../types/index.js'
+*/
+
+/*
+ * Base class to control framerate and playback rate.
+ * Inherited by Engine, Timer, Animation and Timeline.
+ */
+class Clock {
+
+  /** @param {Number} [initTime] */
+  constructor(initTime = 0) {
+    /** @type {Number} */
+    this.deltaTime = 0;
+    /** @type {Number} */
+    this._currentTime = initTime;
+    /** @type {Number} */
+    this._elapsedTime = initTime;
+    /** @type {Number} */
+    this._startTime = initTime;
+    /** @type {Number} */
+    this._lastTime = initTime;
+    /** @type {Number} */
+    this._scheduledTime = 0;
+    /** @type {Number} */
+    this._frameDuration = helpers.round(consts.K / consts.maxFps, 0);
+    /** @type {Number} */
+    this._fps = consts.maxFps;
+    /** @type {Number} */
+    this._speed = 1;
+    /** @type {Boolean} */
+    this._hasChildren = false;
+    /** @type {Tickable|Tween} */
+    this._head = null;
+    /** @type {Tickable|Tween} */
+    this._tail = null;
+  }
+
+  get fps() {
+    return this._fps;
+  }
+
+  set fps(frameRate) {
+    const previousFrameDuration = this._frameDuration;
+    const fr = +frameRate;
+    const fps = fr < consts.minValue ? consts.minValue : fr;
+    const frameDuration = helpers.round(consts.K / fps, 0);
+    this._fps = fps;
+    this._frameDuration = frameDuration;
+    this._scheduledTime += frameDuration - previousFrameDuration;
+  }
+
+  get speed() {
+    return this._speed;
+  }
+
+  set speed(playbackRate) {
+    const pbr = +playbackRate;
+    this._speed = pbr < consts.minValue ? consts.minValue : pbr;
+  }
+
+  /**
+   * @param  {Number} time
+   * @return {tickModes}
+   */
+  requestTick(time) {
+    const scheduledTime = this._scheduledTime;
+    const elapsedTime = this._elapsedTime;
+    this._elapsedTime += (time - elapsedTime);
+    // If the elapsed time is lower than the scheduled time
+    // this means not enough time has passed to hit one frameDuration
+    // so skip that frame
+    if (elapsedTime < scheduledTime) return consts.tickModes.NONE;
+    const frameDuration = this._frameDuration;
+    const frameDelta = elapsedTime - scheduledTime;
+    // Ensures that _scheduledTime progresses in steps of at least 1 frameDuration.
+    // Skips ahead if the actual elapsed time is higher.
+    this._scheduledTime += frameDelta < frameDuration ? frameDuration : frameDelta;
+    return consts.tickModes.AUTO;
+  }
+
+  /**
+   * @param  {Number} time
+   * @return {Number}
+   */
+  computeDeltaTime(time) {
+    const delta = time - this._lastTime;
+    this.deltaTime = delta;
+    this._lastTime = time;
+    return delta;
+  }
+
+}
+
+exports.Clock = Clock;

package/dist/modules/core/clock.d.ts

@@ -0,0 +1,51 @@
+/**
+ * @import {
+ *   Tickable,
+ *   Tween,
+ * } from '../types/index.js'
+*/
+export class Clock {
+    /** @param {Number} [initTime] */
+    constructor(initTime?: number);
+    /** @type {Number} */
+    deltaTime: number;
+    /** @type {Number} */
+    _currentTime: number;
+    /** @type {Number} */
+    _elapsedTime: number;
+    /** @type {Number} */
+    _startTime: number;
+    /** @type {Number} */
+    _lastTime: number;
+    /** @type {Number} */
+    _scheduledTime: number;
+    /** @type {Number} */
+    _frameDuration: number;
+    /** @type {Number} */
+    _fps: number;
+    /** @type {Number} */
+    _speed: number;
+    /** @type {Boolean} */
+    _hasChildren: boolean;
+    /** @type {Tickable|Tween} */
+    _head: Tickable | Tween;
+    /** @type {Tickable|Tween} */
+    _tail: Tickable | Tween;
+    set fps(frameRate: number);
+    get fps(): number;
+    set speed(playbackRate: number);
+    get speed(): number;
+    /**
+     * @param  {Number} time
+     * @return {tickModes}
+     */
+    requestTick(time: number): tickModes;
+    /**
+     * @param  {Number} time
+     * @return {Number}
+     */
+    computeDeltaTime(time: number): number;
+}
+import type { Tickable } from '../types/index.js';
+import type { Tween } from '../types/index.js';
+import { tickModes } from './consts.js';

package/dist/modules/core/clock.js

@@ -0,0 +1,108 @@
+/**
+ * Anime.js - core - ESM
+ * @version v4.2.0
+ * @license MIT
+ * @copyright 2025 - Julian Garnier
+ */
+
+import { K, maxFps, minValue, tickModes } from './consts.js';
+import { round } from './helpers.js';
+
+/**
+ * @import {
+ *   Tickable,
+ *   Tween,
+ * } from '../types/index.js'
+*/
+
+/*
+ * Base class to control framerate and playback rate.
+ * Inherited by Engine, Timer, Animation and Timeline.
+ */
+class Clock {
+
+  /** @param {Number} [initTime] */
+  constructor(initTime = 0) {
+    /** @type {Number} */
+    this.deltaTime = 0;
+    /** @type {Number} */
+    this._currentTime = initTime;
+    /** @type {Number} */
+    this._elapsedTime = initTime;
+    /** @type {Number} */
+    this._startTime = initTime;
+    /** @type {Number} */
+    this._lastTime = initTime;
+    /** @type {Number} */
+    this._scheduledTime = 0;
+    /** @type {Number} */
+    this._frameDuration = round(K / maxFps, 0);
+    /** @type {Number} */
+    this._fps = maxFps;
+    /** @type {Number} */
+    this._speed = 1;
+    /** @type {Boolean} */
+    this._hasChildren = false;
+    /** @type {Tickable|Tween} */
+    this._head = null;
+    /** @type {Tickable|Tween} */
+    this._tail = null;
+  }
+
+  get fps() {
+    return this._fps;
+  }
+
+  set fps(frameRate) {
+    const previousFrameDuration = this._frameDuration;
+    const fr = +frameRate;
+    const fps = fr < minValue ? minValue : fr;
+    const frameDuration = round(K / fps, 0);
+    this._fps = fps;
+    this._frameDuration = frameDuration;
+    this._scheduledTime += frameDuration - previousFrameDuration;
+  }
+
+  get speed() {
+    return this._speed;
+  }
+
+  set speed(playbackRate) {
+    const pbr = +playbackRate;
+    this._speed = pbr < minValue ? minValue : pbr;
+  }
+
+  /**
+   * @param  {Number} time
+   * @return {tickModes}
+   */
+  requestTick(time) {
+    const scheduledTime = this._scheduledTime;
+    const elapsedTime = this._elapsedTime;
+    this._elapsedTime += (time - elapsedTime);
+    // If the elapsed time is lower than the scheduled time
+    // this means not enough time has passed to hit one frameDuration
+    // so skip that frame
+    if (elapsedTime < scheduledTime) return tickModes.NONE;
+    const frameDuration = this._frameDuration;
+    const frameDelta = elapsedTime - scheduledTime;
+    // Ensures that _scheduledTime progresses in steps of at least 1 frameDuration.
+    // Skips ahead if the actual elapsed time is higher.
+    this._scheduledTime += frameDelta < frameDuration ? frameDuration : frameDelta;
+    return tickModes.AUTO;
+  }
+
+  /**
+   * @param  {Number} time
+   * @return {Number}
+   */
+  computeDeltaTime(time) {
+    const delta = time - this._lastTime;
+    this.deltaTime = delta;
+    this._lastTime = time;
+    return delta;
+  }
+
+}
+
+export { Clock };