@freestylejs/ani-core 1.0.0 → 1.2.0

package/dist/index.js

@@ -1,4 +1,39 @@
-// src/ani/nodes/base.ts
+// src/utils/time/is_end.ts
+function isEndOfAnimation(currentT, duration, tolerance = 1e-3) {
+  return currentT === duration || currentT - duration >= tolerance;
+}
+
+// src/ani/core/engine.ts
+function calculateSegmentState(localTime, segmentDef, dt = 0) {
+  const t = Math.max(0, Math.min(localTime, segmentDef.duration));
+  const animeValues = [];
+  let allComplete = true;
+  const isMultipleTiming = Array.isArray(segmentDef.timing);
+  if (isMultipleTiming && segmentDef.timing.length !== segmentDef.from.length) {
+    throw new TypeError(
+      `[calculateSegmentState] timing does not correctly set. It requires multiple timing for ${segmentDef.from}, but received ${segmentDef.timing}`
+    );
+  }
+  for (let i = 0; i < segmentDef.from.length; i++) {
+    const timingFunction = isMultipleTiming ? segmentDef.timing[i] : segmentDef.timing;
+    const animeResponse = timingFunction.step(t, {
+      dt,
+      from: segmentDef.from[i],
+      to: segmentDef.to[i],
+      duration: segmentDef.duration
+    });
+    animeValues.push(animeResponse.value);
+    if (!animeResponse.endOfAnimation) {
+      allComplete = false;
+    }
+  }
+  return {
+    values: animeValues,
+    isComplete: allComplete || isEndOfAnimation(t, segmentDef.duration)
+  };
+}
+
+// src/nodes/base.ts
 var AnimationNode = class {
   constructor(id) {
     if (id) {
@@ -28,6 +63,113 @@ var TimingFunction = class _TimingFunction {
   }
 };
 
+// src/timing/bezier.ts
+var NEWTON_ITERATIONS = 4;
+var NEWTON_MIN_SLOPE = 1e-3;
+var SUBDIVISION_PRECISION = 1e-7;
+var SUBDIVISION_MAX_ITERATIONS = 10;
+var SAMPLE_TABLE_SIZE = 11;
+var SAMPLE_STEP_SIZE = 1 / (SAMPLE_TABLE_SIZE - 1);
+var BezierTimingFunction = class extends TimingFunction {
+  constructor(opt) {
+    super();
+    this.opt = opt;
+    this.sampleValues = null;
+    if (this.opt.p2.x !== this.opt.p2.y || this.opt.p3.x !== this.opt.p3.y) {
+      this.sampleValues = new Float32Array(SAMPLE_TABLE_SIZE);
+      for (let i = 0; i < SAMPLE_TABLE_SIZE; ++i) {
+        this.sampleValues[i] = this.calcBezier(
+          i * SAMPLE_STEP_SIZE,
+          this.opt.p2.x,
+          this.opt.p3.x
+        );
+      }
+    }
+  }
+  calcBezier(t, a1, a2) {
+    return ((1 - 3 * a2 + 3 * a1) * t + (3 * a2 - 6 * a1)) * t * t + 3 * a1 * t;
+  }
+  getSlope(t, a1, a2) {
+    return 3 * (1 - 3 * a2 + 3 * a1) * t * t + 2 * (3 * a2 - 6 * a1) * t + 3 * a1;
+  }
+  getTForX(x) {
+    const mX1 = this.opt.p2.x;
+    const mX2 = this.opt.p3.x;
+    let intervalStart = 0;
+    let currentSample = 1;
+    const lastSample = SAMPLE_TABLE_SIZE - 1;
+    for (; currentSample !== lastSample && this.sampleValues[currentSample] <= x; ++currentSample) {
+      intervalStart += SAMPLE_STEP_SIZE;
+    }
+    --currentSample;
+    const dist = (x - this.sampleValues[currentSample]) / (this.sampleValues[currentSample + 1] - this.sampleValues[currentSample]);
+    const guessForT = intervalStart + dist * SAMPLE_STEP_SIZE;
+    const initialSlope = this.getSlope(guessForT, mX1, mX2);
+    if (initialSlope >= NEWTON_MIN_SLOPE) {
+      return this.newtonRaphsonIterate(x, guessForT, mX1, mX2);
+    }
+    if (initialSlope === 0) {
+      return guessForT;
+    }
+    return this.binarySubdivide(
+      x,
+      intervalStart,
+      intervalStart + SAMPLE_STEP_SIZE,
+      mX1,
+      mX2
+    );
+  }
+  binarySubdivide(aX, aA, aB, mX1, mX2) {
+    let currentX;
+    let currentT;
+    let i = 0;
+    let currentA = aA;
+    let currentB = aB;
+    do {
+      currentT = currentA + (currentB - currentA) / 2;
+      currentX = this.calcBezier(currentT, mX1, mX2) - aX;
+      if (currentX > 0) {
+        currentB = currentT;
+      } else {
+        currentA = currentT;
+      }
+    } while (Math.abs(currentX) > SUBDIVISION_PRECISION && ++i < SUBDIVISION_MAX_ITERATIONS);
+    return currentT;
+  }
+  newtonRaphsonIterate(aX, aGuessT, mX1, mX2) {
+    let guessT = aGuessT;
+    for (let i = 0; i < NEWTON_ITERATIONS; ++i) {
+      const currentSlope = this.getSlope(guessT, mX1, mX2);
+      if (currentSlope === 0) {
+        return guessT;
+      }
+      const currentX = this.calcBezier(guessT, mX1, mX2) - aX;
+      guessT -= currentX / currentSlope;
+    }
+    return guessT;
+  }
+  step(time, context) {
+    const { duration, from, to } = context;
+    if (duration === 0) {
+      return { value: to, endOfAnimation: true };
+    }
+    const x = Math.max(0, Math.min(time / duration, 1));
+    let easedT = x;
+    if (this.opt.p2.x !== this.opt.p2.y || this.opt.p3.x !== this.opt.p3.y) {
+      if (!this.sampleValues) {
+      }
+      const t = this.getTForX(x);
+      easedT = this.calcBezier(t, this.opt.p2.y, this.opt.p3.y);
+    }
+    const value = from + (to - from) * easedT;
+    const endOfAnimation = time >= duration;
+    return {
+      value,
+      endOfAnimation
+    };
+  }
+};
+
 // src/timing/linear.ts
 var LinearTimingFunction = class extends TimingFunction {
   step(time, context) {
@@ -37,29 +179,72 @@ var LinearTimingFunction = class extends TimingFunction {
   }
 };
 
-// src/timing/bezier.ts
-var BezierTimingFunction = class extends TimingFunction {
+// src/timing/dynamic_spring.ts
+var DynamicSpringTimingFunction = class extends TimingFunction {
   constructor(opt) {
     super();
     this.opt = opt;
-    this.p1 = {
-      x: 0,
-      y: 0
-    };
-    this.p4 = {
-      x: 1,
-      y: 1
-    };
+    this.currentValue = 0;
+    this.currentVelocity = 0;
+    this.isInitialized = false;
   }
-  _bezierFunction(t, duration) {
-    const end = duration || this.p4.y;
-    return (1 - t) ** 3 * this.p1.y + 3 * (1 - t) ** 2 * t * this.opt.p2.y + 3 * (1 - t) * t ** 2 * this.opt.p3.y + t ** 3 * end;
+  init(startValue) {
+    this.currentValue = startValue;
+    this.currentVelocity = 0;
+    this.isInitialized = true;
   }
-  step(time, context) {
-    const f = this._bezierFunction(time, context.duration);
+  getDerivatives(state, to) {
+    const { m, k, c } = this.opt;
+    const displacement = state.x - to;
+    const a2 = (-k * displacement - c * state.v) / m;
+    return { dx: state.v, dv: a2 };
+  }
+  step(_time, context) {
+    if (!this.isInitialized) {
+      this.init(context.from);
+    }
+    const { to, tolerance, dt } = context;
+    if (dt === 0) {
+      return {
+        value: this.currentValue,
+        endOfAnimation: false
+        // Or check for end state
+      };
+    }
+    const x = this.currentValue;
+    const v = this.currentVelocity;
+    const k1 = this.getDerivatives({ x, v }, to);
+    const k2State = {
+      x: x + k1.dx * (dt / 2),
+      v: v + k1.dv * (dt / 2)
+    };
+    const k2 = this.getDerivatives(k2State, to);
+    const k3State = {
+      x: x + k2.dx * (dt / 2),
+      v: v + k2.dv * (dt / 2)
+    };
+    const k3 = this.getDerivatives(k3State, to);
+    const k4State = {
+      x: x + k3.dx * dt,
+      v: v + k3.dv * dt
+    };
+    const k4 = this.getDerivatives(k4State, to);
+    const avgDx = 1 / 6 * (k1.dx + 2 * k2.dx + 2 * k3.dx + k4.dx);
+    const avgDv = 1 / 6 * (k1.dv + 2 * k2.dv + 2 * k3.dv + k4.dv);
+    this.currentValue = x + avgDx * dt;
+    this.currentVelocity = v + avgDv * dt;
+    const tol = tolerance ?? 1e-3;
+    const displacement = this.currentValue - to;
+    const isMoving = Math.abs(this.currentVelocity) > tol;
+    const isDisplaced = Math.abs(displacement) > tol;
+    const endOfAnimation = !isMoving && !isDisplaced;
+    if (endOfAnimation) {
+      this.currentValue = to;
+      this.currentVelocity = 0;
+    }
     return {
-      value: f,
-      endOfAnimation: (context.duration ? time >= context.duration : time >= this.p4.x) && f >= context.to
+      value: this.currentValue,
+      endOfAnimation
     };
   }
 };
@@ -134,30 +319,62 @@ var T = {
    * Creates a new Bezier timing function instance.
    *
    * @param {Bezier.BezierTimingFunctionOpt} opt - Options for configuring the Bezier curve.
-   * A new instance of BezierTimingFunction.
    */
   bezier: (opt) => new BezierTimingFunction(opt),
   /**
    * Creates a new Spring timing function instance.
    *
-   * @param {Spring.SpringTimingFunctionOpt} opt - Options for configuring the Spring timing function.
-   * A new instance of SpringTimingFunction.
+   * @param {SpringTimingFunctionOpt} opt - Options for configuring the Spring timing function.
    */
   spring: (opt) => new SpringTimingFunction(opt),
+  /**
+   * Creates a new Dynamic Spring timing function instance.
+   *
+   * @param SpringTimingFunctionOpt} opt - Options for configuring the Spring timing function.
+   */
+  dynamicSpring: (opt) => new DynamicSpringTimingFunction(opt),
   /**
    * Creates linear timing function instance.
    */
-  linear: () => new LinearTimingFunction()
+  linear: () => new LinearTimingFunction(),
+  /**
+   * Standard CSS 'ease' timing function (0.25, 0.1, 0.25, 1.0).
+   */
+  ease: () => new BezierTimingFunction({
+    p2: { x: 0.25, y: 0.1 },
+    p3: { x: 0.25, y: 1 }
+  }),
+  /**
+   * Standard CSS 'ease-in' timing function (0.42, 0, 1.0, 1.0).
+   */
+  easeIn: () => new BezierTimingFunction({
+    p2: { x: 0.42, y: 0 },
+    p3: { x: 1, y: 1 }
+  }),
+  /**
+   * Standard CSS 'ease-out' timing function (0, 0, 0.58, 1.0).
+   */
+  easeOut: () => new BezierTimingFunction({
+    p2: { x: 0, y: 0 },
+    p3: { x: 0.58, y: 1 }
+  }),
+  /**
+   * Standard CSS 'ease-in-out' timing function (0.42, 0, 0.58, 1.0).
+   */
+  easeInOut: () => new BezierTimingFunction({
+    p2: { x: 0.42, y: 0 },
+    p3: { x: 0.58, y: 1 }
+  })
 };
 
-// src/ani/nodes/segment.ts
+// src/nodes/segment.ts
 var SegmentNode = class extends AnimationNode {
   constructor(props, id) {
     super(id);
     this.type = "SEGMENT";
     const nodeProps = {
       to: props.to,
-      duration: props.duration ?? 0,
+      duration: props.duration,
       ...props.timing !== void 0 && { timing: props.timing }
     };
     this.props = nodeProps;
@@ -177,7 +394,7 @@ function ani(props, id) {
   return new SegmentNode(props, id);
 }
 
-// src/ani/nodes/composition.ts
+// src/nodes/composition.ts
 var CompositionNode = class _CompositionNode extends AnimationNode {
   constructor(children, timing, id) {
     super(id);
@@ -206,12 +423,12 @@ var CompositionNode = class _CompositionNode extends AnimationNode {
   }
 };
 
-// src/ani/nodes/delay.ts
+// src/nodes/delay.ts
 function delay(duration, id) {
   return new SegmentNode({ to: {}, duration }, id);
 }
 
-// src/ani/nodes/loop.ts
+// src/nodes/loop.ts
 var LoopNode = class extends CompositionNode {
   constructor(child, loopCount, timing, id) {
     super([child], timing, id);
@@ -232,7 +449,7 @@ function loop(child, loopCount, timing, id) {
   return new LoopNode(child, loopCount, timing, id);
 }
 
-// src/ani/nodes/parallel.ts
+// src/nodes/parallel.ts
 var ParallelNode = class extends CompositionNode {
   constructor(children, timing, id) {
     const seenProperty = /* @__PURE__ */ new Set();
@@ -282,7 +499,7 @@ function parallel(children, timing, id) {
   return new ParallelNode(children, timing, id);
 }
 
-// src/ani/nodes/sequence.ts
+// src/nodes/sequence.ts
 var SequenceNode = class extends CompositionNode {
   constructor(children, timing, id) {
     super(children, timing, id);
@@ -301,12 +518,12 @@ function sequence(children, timing, id) {
   return new SequenceNode(children, timing, id);
 }
 
-// src/ani/nodes/stagger.ts
+// src/nodes/stagger.ts
 var StaggerNode = class extends CompositionNode {
-  constructor(children, props, id) {
-    super(children, props?.timing, id);
+  constructor(children, offset, timing, id) {
+    super(children, timing, id);
     this.type = "STAGGER";
-    this.offset = props.offset;
+    this.offset = offset;
     if (children.length === 0) {
       this.duration = 0;
     } else {
@@ -322,10 +539,81 @@ var StaggerNode = class extends CompositionNode {
     }
   }
 };
-function stagger(children, props, id) {
-  return new StaggerNode(children, props, id);
+function stagger(children, offset, timing, id) {
+  return new StaggerNode(children, offset, timing, id);
 }
 
+// src/ani/core/interface/timeline_interface.ts
+var TimelineBase = class {
+  constructor(rootNode) {
+    this.rootNode = rootNode;
+    this._currentExecutionPlan = null;
+    this.duration = rootNode.duration;
+    this._baseExecutionPlan = this._constructExecutionPlan(rootNode);
+    this.play = this.play.bind(this);
+    this.pause = this.pause.bind(this);
+    this.seek = this.seek.bind(this);
+    this.reset = this.reset.bind(this);
+    this.resume = this.resume.bind(this);
+  }
+  /**
+   * flatten the AST into a linear execution plan.
+   */
+  _constructExecutionPlan(rootNode) {
+    const plan = [];
+    rootNode.construct(plan, 0);
+    return plan;
+  }
+  /**
+   * Merges the base plan with runtime dynamic overrides.
+   */
+  _resolveExecutionPlan(keyframes, durations) {
+    if (!keyframes && !durations) {
+      return [...this._baseExecutionPlan];
+    }
+    const segmentNodes = this._baseExecutionPlan.filter(
+      (segment) => segment.node.type === "SEGMENT"
+    );
+    const segLength = segmentNodes.length;
+    if (keyframes && keyframes.length !== segLength) {
+      throw new Error(
+        `[Timeline] Keyframe mismatch: Expected ${segLength}, received ${keyframes.length}.`
+      );
+    }
+    if (durations && durations.length !== segLength) {
+      throw new Error(
+        `[Timeline] Duration mismatch: Expected ${segLength}, received ${durations.length}.`
+      );
+    }
+    const newPlan = [];
+    let keyframeIndex = 0;
+    for (const segment of this._baseExecutionPlan) {
+      if (segment.node.type === "SEGMENT") {
+        const dynamicTo = keyframes?.[keyframeIndex];
+        const dynamicDuration = durations?.[keyframeIndex];
+        const newSegmentProps = {
+          ...segment.node.props,
+          ...dynamicTo && dynamicTo !== "keep" && {
+            to: dynamicTo
+          },
+          ...dynamicDuration && dynamicDuration !== "keep" && {
+            duration: dynamicDuration
+          }
+        };
+        const newSegment = new SegmentNode(
+          newSegmentProps,
+          segment.node.id
+        );
+        newPlan.push({ ...segment, node: newSegment });
+        keyframeIndex++;
+      } else {
+        newPlan.push({ ...segment });
+      }
+    }
+    return newPlan;
+  }
+};
+
 // src/loop/clock.ts
 var AnimationClock = class _AnimationClock {
   constructor(maxDeltaTime) {
@@ -381,234 +669,174 @@ var AnimationClock = class _AnimationClock {
   }
 };
 
-// src/utils/time/is_end.ts
-function isEndOfAnimation(currentT, duration, tolerance = 1e-3) {
-  return currentT === duration || currentT - duration >= tolerance;
+// src/ani/core/resolver.ts
+function resolveGroup(group) {
+  if (Array.isArray(group)) {
+    return { keyMap: null, values: group };
+  }
+  const typedGroup = group;
+  const keys = Object.keys(typedGroup);
+  const keyMap = new Map(keys.map((key, i) => [key, i]));
+  const values = keys.map((key) => typedGroup[key]);
+  return { keyMap, values };
 }
-
-// src/ani/engine.ts
-function calculateSegmentState(localTime, segmentDef, dt = 0) {
-  const t = Math.max(0, Math.min(localTime, segmentDef.duration));
-  const animeValues = [];
-  let allComplete = true;
-  const isMultipleTiming = Array.isArray(segmentDef.timing);
-  if (isMultipleTiming && segmentDef.timing.length !== segmentDef.from.length) {
-    throw new TypeError(
-      `[calculateSegmentState] timing does not correctly set. It requires multiple timing for ${segmentDef.from}, but received ${segmentDef.timing}`
-    );
+function resolveStateToGroup(state, keyMap) {
+  if (!keyMap) {
+    return state;
   }
-  for (let i = 0; i < segmentDef.from.length; i++) {
-    const timingFunction = isMultipleTiming ? segmentDef.timing[i] : segmentDef.timing;
-    const animeResponse = timingFunction.step(t, {
-      dt,
-      from: segmentDef.from[i],
-      to: segmentDef.to[i],
-      duration: segmentDef.duration
-    });
-    animeValues.push(animeResponse.value);
-    if (!animeResponse.endOfAnimation) {
-      allComplete = false;
+  const group = {};
+  for (const [key, index] of keyMap.entries()) {
+    group[key] = state[index];
+  }
+  return group;
+}
+function resolvePlanState(plan, initialValues, keyMap, targetTime, dt = 0) {
+  const nextState = [...initialValues];
+  let stateAtLastStartTime = [...initialValues];
+  for (const segment of plan) {
+    if (targetTime < segment.startTime) {
+      continue;
+    }
+    stateAtLastStartTime = [...nextState];
+    const { keyMap: segKeyMap, values: toValues } = resolveGroup(
+      segment.node.props.to
+    );
+    const isRecordAni = keyMap !== null;
+    let fromValues = [];
+    const timings = [];
+    const t = segment.node.props.timing;
+    const isRecordTiming = t && !(t instanceof TimingFunction);
+    if (isRecordAni) {
+      for (const key of segKeyMap.keys()) {
+        const index = keyMap.get(key);
+        fromValues.push(stateAtLastStartTime[index]);
+        if (isRecordTiming) {
+          timings.push(t[key]);
+        }
+      }
+    } else {
+      fromValues = stateAtLastStartTime;
+    }
+    const localTime = targetTime - segment.startTime;
+    const segmentDef = {
+      from: fromValues,
+      to: toValues,
+      duration: segment.node.duration,
+      // default fallback = linear
+      timing: isRecordAni && isRecordTiming ? timings : t ?? T.linear()
+    };
+    const result = calculateSegmentState(localTime, segmentDef, dt);
+    const finalValues = result.isComplete ? toValues : result.values;
+    if (isRecordAni) {
+      let i = 0;
+      for (const key of segKeyMap.keys()) {
+        const stateIndex = keyMap.get(key);
+        if (stateIndex !== void 0 && stateIndex !== -1) {
+          nextState[stateIndex] = finalValues[i];
+        }
+        i++;
+      }
+    } else {
+      for (let i = 0; i < finalValues.length; i++) {
+        nextState[i] = finalValues[i];
+      }
     }
   }
-  return {
-    values: animeValues,
-    isComplete: allComplete || isEndOfAnimation(t, segmentDef.duration)
-  };
+  return nextState;
 }
 
-// src/ani/timeline.ts
-var Timeline = class {
+// src/ani/raf/timeline.ts
+var RafAniTimeline = class extends TimelineBase {
   constructor(rootNode, clock) {
-    this.rootNode = rootNode;
-    this._currentExecutionPlan = null;
+    super(rootNode);
     this._masterTime = 0;
+    this._delay = 0;
     this._status = "IDLE";
     this._currentConfig = null;
     this._state = [];
     this._initialState = [];
     this._repeatCount = 0;
     this._propertyKeyMap = null;
-    this._segmentStartStates = /* @__PURE__ */ new Map();
     this._onUpdateCallbacks = /* @__PURE__ */ new Set();
-    this.duration = rootNode.duration;
-    this._baseExecutionPlan = this._constructExecutionPlan(rootNode);
     this._clock = clock ?? AnimationClock.create();
-    this.play.bind(this);
-    this.pause.bind(this);
-    this.seek.bind(this);
-    this.resume.bind(this);
-    this.reset.bind(this);
+    this.play = this.play.bind(this);
+    this.pause = this.pause.bind(this);
+    this.seek = this.seek.bind(this);
+    this.resume = this.resume.bind(this);
+    this.reset = this.reset.bind(this);
   }
-  /**
-   * Current animation running config.
-   */
   get currentConfig() {
     return this._currentConfig;
   }
-  /**
-   * Resolves a Group (like {x, y}) into keys and values.
-   */
-  _resolveGroup(group) {
-    if (Array.isArray(group)) {
-      return { keyMap: null, values: group };
-    }
-    const keyMap = new Map(Object.keys(group).map((key, i) => [key, i]));
-    const values = Object.values(group);
-    return { keyMap, values };
+  getCurrentValue() {
+    if (this._state.length === 0) return null;
+    return resolveStateToGroup(
+      this._state,
+      this._propertyKeyMap
+    );
   }
-  /**
-   * Resolves the internal state (a number array) back into Group.
-   */
-  _resolveStateToGroup(state) {
-    if (!this._propertyKeyMap) {
-      return state;
-    }
-    const group = {};
-    let i = 0;
-    for (const key of this._propertyKeyMap.keys()) {
-      group[key] = state[i];
-      i++;
+  _calculateStateAtTime(targetTime, dt = 0) {
+    if (this._initialState.length === 0 || !this._currentExecutionPlan) {
+      return [];
     }
-    return group;
+    return resolvePlanState(
+      this._currentExecutionPlan,
+      this._initialState,
+      this._propertyKeyMap,
+      // Using the class property directly
+      targetTime,
+      dt
+    );
   }
-  /**
-   * Compile animation execution plan
-   */
-  _constructExecutionPlan(rootNode) {
-    const plan = [];
-    rootNode.construct(plan, 0);
-    return plan;
+  notify() {
+    for (const subscriber of this._onUpdateCallbacks) {
+      subscriber({
+        state: resolveStateToGroup(
+          this._state,
+          this._propertyKeyMap
+        ),
+        status: this._status
+      });
+    }
   }
   /**
-   * Calculates the exact state of the animation at point.
+   * @private Internal clock subscription callback.
    */
-  _calculateStateAtTime(targetTime, dt = 0) {
-    if (this._initialState.length === 0 || !this._currentExecutionPlan) {
-      return [];
-    }
-    const nextState = [...this._initialState];
-    let stateAtLastStartTime = [...this._initialState];
-    for (const segment of this._currentExecutionPlan) {
-      if (targetTime < segment.startTime) {
-        continue;
-      }
-      if (!segment.node.props.timing) {
-        throw new Error(
-          `[Timeline] timing should be provided. Please specify timing using a.timing.(...). Check target segment: ${JSON.stringify(segment, null, 2)}.`,
-          { cause: segment }
-        );
-      }
-      stateAtLastStartTime = [...nextState];
-      const { keyMap, values: toValues } = this._resolveGroup(
-        segment.node.props.to
-      );
-      const isRecordAni = this._propertyKeyMap !== null && keyMap !== null;
-      let fromValues = [];
-      if (isRecordAni) {
-        for (const key of keyMap.keys()) {
-          fromValues.push(
-            stateAtLastStartTime[this._propertyKeyMap.get(key)]
-          );
-        }
-      } else {
-        fromValues = stateAtLastStartTime;
-      }
-      let finalAnimeValues = [];
-      const localTime = targetTime - segment.startTime;
-      const segmentDef = {
-        from: fromValues,
-        to: toValues,
-        duration: segment.node.duration,
-        timing: segment.node.props.timing
-      };
-      const segmentState = calculateSegmentState(
-        localTime,
-        segmentDef,
-        dt
-      );
-      if (segmentState.isComplete) {
-        finalAnimeValues = toValues;
+  update(dt) {
+    if (this._status !== "PLAYING") return;
+    if (this._delay > 0) {
+      this._delay -= dt;
+      if (this._delay < 0) {
+        dt = -this._delay;
+        this._delay = 0;
       } else {
-        finalAnimeValues = segmentState.values;
+        return;
       }
-      if (isRecordAni) {
-        let i = 0;
-        for (const key of keyMap.keys()) {
-          const stateIndex = this._propertyKeyMap.get(key);
-          if (stateIndex === -1) {
-            continue;
-          }
-          nextState[stateIndex] = finalAnimeValues[i];
-          i++;
-        }
+    }
+    this._masterTime += dt;
+    if (this._masterTime >= this.duration) this._masterTime = this.duration;
+    this._state = this._calculateStateAtTime(this._masterTime, dt);
+    this.notify();
+    if (isEndOfAnimation(this._masterTime, this.duration)) {
+      this._repeatCount += 1;
+      const noRepeat = (this._currentConfig.repeat ?? 0) === 0;
+      if (noRepeat) {
+        this._status = "ENDED";
+        this._clock.unsubscribe(this);
+        this.notify();
       } else {
-        for (let i = 0; i < finalAnimeValues.length; i++) {
-          nextState[i] = finalAnimeValues[i];
-        }
+        this.play(this._currentConfig);
       }
     }
-    return nextState;
-  }
-  _resolveExecutionPlan(keyframes, durations) {
-    if (!keyframes && !durations) {
-      return [...this._baseExecutionPlan];
-    }
-    const segmentNodes = this._baseExecutionPlan.filter(
-      (segment) => segment.node.type === "SEGMENT"
-    );
-    const segLength = segmentNodes.length;
-    if (keyframes && keyframes.length !== segLength) {
-      throw new Error(
-        `Timeline keyframe mismatch: Expected ${segLength} keyframes, but received ${keyframes.length}.`
-      );
-    }
-    if (durations && durations.length !== segLength) {
-      throw new Error(
-        `Timeline keyframe mismatch: Expected ${segLength} durations, but received ${durations.length}.`
-      );
-    }
-    const newPlan = [];
-    let keyframeIndex = 0;
-    for (const segment of this._baseExecutionPlan) {
-      if (segment.node.type === "SEGMENT") {
-        const dynamicTo = keyframes?.[keyframeIndex];
-        const dynamicDuration = durations?.[keyframeIndex];
-        const newSegmentProps = {
-          ...segment.node.props,
-          // >> dynamic to
-          ...dynamicTo && {
-            to: dynamicTo === "keep" ? segment.node.props.to : dynamicTo
-          },
-          // >> dynamic duration
-          ...dynamicDuration && {
-            duration: dynamicDuration === "keep" ? segment.node.props.duration : dynamicDuration
-          }
-        };
-        const newSegment = new SegmentNode(
-          newSegmentProps,
-          segment.node.id
-        );
-        newPlan.push({ ...segment, node: newSegment });
-        keyframeIndex++;
-      } else {
-        newPlan.push({ ...segment });
-      }
-    }
-    return newPlan;
-  }
-  notify() {
-    for (const subscriber of this._onUpdateCallbacks) {
-      subscriber({
-        state: this._resolveStateToGroup(this._state),
-        status: this._status
-      });
-    }
   }
+  /**
+   * Plays animation.
+   * @param config {@link https://developer.mozilla.org/en-US/docs/Web/API/Window/requestAnimationFrame RequestAnimationFrame API} based config.
+   * @param canBeIntercepted if `true` animation can be intercepted even if already animation started.
+   */
   play(config, canBeIntercepted = true) {
-    if (this._status === "PLAYING" && !canBeIntercepted) {
-      return;
-    }
-    const isRepeating = this._currentConfig?.repeat && this._currentConfig?.repeat >= 1;
+    if (this._status === "PLAYING" && !canBeIntercepted) return;
+    const isRepeating = (this._currentConfig?.repeat ?? 0) >= 1;
     const savedRepeatCount = isRepeating ? this._repeatCount : 0;
     this.reset(false);
     this._repeatCount = savedRepeatCount;
@@ -617,17 +845,20 @@ var Timeline = class {
       return;
     }
     this._currentConfig = config;
+    if (this._repeatCount === 0) {
+      this._delay = (this._currentConfig.delay ?? 0) * 1e-3;
+    }
     this._currentExecutionPlan = this._resolveExecutionPlan(
       config.keyframes,
       config.durations
     );
-    const { keyMap: keys, values } = this._resolveGroup(config.from);
-    this._propertyKeyMap = keys;
+    const { keyMap, values } = resolveGroup(config.from);
+    this._propertyKeyMap = keyMap;
     this._state = values;
     this._initialState = values;
     this._status = "PLAYING";
     this._clock.subscribe(this);
-    this.update(0);
+    this.notify();
   }
   pause() {
     this._status = "PAUSED";
@@ -642,16 +873,14 @@ var Timeline = class {
     this._status = "IDLE";
     this._currentConfig = null;
     this._masterTime = 0;
+    this._delay = 0;
     this._state = [];
     this._initialState = [];
     this._propertyKeyMap = null;
-    this._segmentStartStates.clear();
     this._currentExecutionPlan = null;
     this._clock.unsubscribe(this);
     this._repeatCount = 0;
-    if (notify) {
-      this.notify();
-    }
+    if (notify) this.notify();
   }
   seek(targetTime) {
     if (this._status === "PLAYING" || this._status === "ENDED") {
@@ -662,78 +891,50 @@ var Timeline = class {
     this._state = this._calculateStateAtTime(seekTime, 0);
     this.notify();
   }
-  getCurrentValue() {
-    if (this._state.length === 0) return null;
-    return this._resolveStateToGroup(this._state);
-  }
+  /**
+   * When timeline updates, subscribes on update callback.
+   * @param callback Subscription callback.
+   * @returns Unsubscribe.
+   */
   onUpdate(callback) {
     this._onUpdateCallbacks.add(callback);
     return () => {
       this._onUpdateCallbacks.delete(callback);
     };
   }
-  update(dt) {
-    if (this._status !== "PLAYING") {
-      return;
-    }
-    this._masterTime += dt;
-    if (this._masterTime >= this.duration) {
-      this._masterTime = this.duration;
-    }
-    this._state = this._calculateStateAtTime(this._masterTime, dt);
-    this.notify();
-    if (isEndOfAnimation(this._masterTime, this.duration)) {
-      this._repeatCount += 1;
-      if (!this._currentConfig) {
-        throw new Error(
-          `[Timeline] currentConfig can not be null when update(dt)`
-        );
-      }
-      const noRepeat = (this._currentConfig.repeat ?? 0) === 0;
-      if (noRepeat) {
-        this._status = "ENDED";
-        this._clock.unsubscribe(this);
-        this.notify();
-      } else {
-        this.play(this._currentConfig);
-      }
-    }
-  }
 };
-function timeline(rootNode, clock) {
-  return new Timeline(rootNode, clock);
+function rafTimeline(rootNode, clock) {
+  return new RafAniTimeline(rootNode, clock);
 }
 
-// src/ani/states.ts
+// src/ani/raf/states.ts
 function createStates(config) {
   let State = config.initial;
-  let Timeline2 = timeline(
+  let Timeline = rafTimeline(
     config.states[State],
     config.clock
   );
   const subs = /* @__PURE__ */ new Set();
-  const notify = (timeline2) => {
+  const notify = (timeline) => {
     for (const Sub of subs) {
-      Sub(timeline2);
+      Sub(timeline);
     }
   };
   return {
-    timeline: () => Timeline2,
+    timeline: () => Timeline,
+    state: () => State,
     onTimelineChange(callback) {
       subs.add(callback);
       return () => subs.delete(callback);
     },
     transitionTo(newState, timelineConfig, canBeIntercepted) {
-      if (!config.states[newState] || State === newState) {
-        return;
-      }
       const from = timelineConfig?.from ?? // 1. config
-      Timeline2.getCurrentValue() ?? // 2. last value
+      Timeline.getCurrentValue() ?? // 2. last value
       config.initialFrom;
       State = newState;
-      Timeline2 = timeline(config.states[State], config.clock);
-      notify(Timeline2);
-      Timeline2.play(
+      Timeline = rafTimeline(config.states[State], config.clock);
+      notify(Timeline);
+      Timeline.play(
         {
           ...timelineConfig,
           from
@@ -744,77 +945,6 @@ function createStates(config) {
   };
 }
 
-// src/event/manager.ts
-var EventManager = class _EventManager {
-  constructor(supportedEvents) {
-    this.supportedEvents = supportedEvents;
-    this._element = null;
-    this._animeGetter = null;
-    this.setAnimeGetter = (animeGetter) => {
-      this._animeGetter = animeGetter;
-    };
-    this.eventMap = /* @__PURE__ */ new Map();
-    this.withAnimeValue = (listener) => {
-      const withAnime = (e) => {
-        listener(this.animeGetter(), e);
-      };
-      return withAnime;
-    };
-    this.add = (eventName, listener, options) => {
-      const withAnime = this.withAnimeValue(listener);
-      this.eventMap.set(eventName, withAnime);
-      this.targetElement.addEventListener(
-        eventName,
-        this.eventMap.get(eventName),
-        options
-      );
-    };
-    this.cleanupOne = (eventName) => {
-      const removeListener = this.eventMap.get(eventName);
-      if (!removeListener) return false;
-      this.targetElement.removeEventListener(eventName, removeListener);
-      return true;
-    };
-    this.cleanupAll = () => {
-      const clearResponse = [];
-      for (const evtName of this.eventMap.keys()) {
-        const res = this.cleanupOne(evtName);
-        clearResponse.push(res);
-      }
-      return clearResponse.some((t) => t === false) === false;
-    };
-    this.attach = (handlers) => {
-      Object.entries(handlers).forEach(([eventKey, handler]) => {
-        this.add(
-          _EventManager.getEvtKey(eventKey),
-          handler
-        );
-      });
-    };
-  }
-  get targetElement() {
-    if (!this._element) throw new Error("EventManger, bind element first");
-    return this._element;
-  }
-  get animeGetter() {
-    if (!this._animeGetter)
-      throw new Error("EventManager, animeGetter should be provided");
-    return this._animeGetter;
-  }
-  /**
-   * get pure `{event_name}`
-   * @param key onX`{event_name}`
-   */
-  static getEvtKey(key) {
-    const removed = key.substring(2, key.length);
-    const Capitalized = `${removed[0].toLowerCase()}${removed.substring(1, key.length)}`;
-    return Capitalized;
-  }
-  bind(element) {
-    this._element = element;
-  }
-};
-
 // src/style/create_sheet.ts
 var TransformFunctionMap = {
   // deg
@@ -902,39 +1032,285 @@ function createStyleSheet(animeStyleValue, resolver) {
   return styleAccumulator;
 }
 
+// src/ani/waapi/compiler/resolver.ts
+function resolveStateAt(plan, initialFrom, targetTime, dt) {
+  const { keyMap, values: initialValues } = resolveGroup(initialFrom);
+  const rawResultState = resolvePlanState(
+    plan,
+    initialValues,
+    keyMap,
+    targetTime,
+    dt
+  );
+  return resolveStateToGroup(rawResultState, keyMap);
+}
+
+// src/ani/waapi/compiler/timing_compiler.ts
+function compileTiming(timing) {
+  if (!timing) {
+    return "linear";
+  }
+  if (timing instanceof LinearTimingFunction) {
+    return "linear";
+  }
+  if (timing instanceof BezierTimingFunction) {
+    const { p2, p3 } = timing.opt;
+    return `cubic-bezier(${p2.x}, ${p2.y}, ${p3.x}, ${p3.y})`;
+  }
+  return null;
+}
+
+// src/ani/waapi/compiler/keyframe_compiler.ts
+function compileToKeyframes(plan, initialFrom) {
+  if (plan.length === 0) {
+    return [];
+  }
+  const FPS = 60;
+  const SAMPLE_RATE = 1 / FPS;
+  const duration = Math.max(...plan.map((s) => s.endTime));
+  if (duration === 0) {
+    const state = resolveStateAt(plan, initialFrom, 0, SAMPLE_RATE);
+    const style = createStyleSheet(state);
+    return [
+      { offset: 0, ...style },
+      { offset: 1, ...style }
+    ];
+  }
+  const timePoints = /* @__PURE__ */ new Set([0, duration]);
+  for (const seg of plan) {
+    timePoints.add(seg.startTime);
+    timePoints.add(seg.endTime);
+  }
+  const sortedTimes = Array.from(timePoints).sort((a2, b) => a2 - b);
+  const keyframes = [];
+  const getEasingForInterval = (t, nextT) => {
+    const activeSegments = plan.filter(
+      (s) => s.startTime <= t && s.endTime >= nextT
+    );
+    if (activeSegments.length === 0) return "linear";
+    const timings = activeSegments.map((s) => s.node.props.timing).filter((t2) => t2 !== void 0);
+    if (timings.length === 0) return "linear";
+    const firstTiming = timings[0];
+    const allSame = timings.every((t2) => t2 === firstTiming);
+    if (allSame && firstTiming instanceof TimingFunction) {
+      return compileTiming(firstTiming);
+    }
+    return null;
+  };
+  for (let i = 0; i < sortedTimes.length; i++) {
+    const currT = sortedTimes[i];
+    const state = resolveStateAt(plan, initialFrom, currT, SAMPLE_RATE);
+    const style = createStyleSheet(state);
+    const keyframe = {
+      offset: currT / duration,
+      ...style
+    };
+    keyframes.push(keyframe);
+    if (i < sortedTimes.length - 1) {
+      const nextT = sortedTimes[i + 1];
+      const easing = getEasingForInterval(currT, nextT);
+      if (easing === null) {
+        let sampleT = currT + SAMPLE_RATE;
+        while (sampleT < nextT) {
+          const sampleState = resolveStateAt(
+            plan,
+            initialFrom,
+            sampleT,
+            SAMPLE_RATE
+          );
+          const sampleStyle = createStyleSheet(
+            sampleState
+          );
+          keyframes.push({
+            offset: sampleT / duration,
+            ...sampleStyle,
+            easing: "linear"
+          });
+          sampleT += SAMPLE_RATE;
+        }
+        keyframe.easing = "linear";
+      } else {
+        keyframe.easing = easing;
+      }
+    }
+  }
+  return keyframes;
+}
+
+// src/ani/waapi/timeline.ts
+var WebAniTimeline = class extends TimelineBase {
+  constructor(rootNode) {
+    super(rootNode);
+    this._animation = null;
+    this._keyframes = [];
+  }
+  /**
+   * Plays animation.
+   * @param target Target element.
+   * @param config {@link https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API Web Animations API} based config.
+   */
+  play(target, config) {
+    if (this._animation) {
+      this._animation.cancel();
+    }
+    this._currentExecutionPlan = this._resolveExecutionPlan(
+      config.keyframes,
+      config.durations
+    );
+    this._keyframes = compileToKeyframes(
+      this._currentExecutionPlan,
+      config.from
+    );
+    if (this._keyframes.length === 0) {
+      return null;
+    }
+    const totalDurationMs = this._currentExecutionPlan.reduce(
+      (max, seg) => Math.max(max, seg.endTime),
+      0
+    ) * 1e3;
+    const effect = new KeyframeEffect(target, this._keyframes, {
+      duration: totalDurationMs,
+      iterations: config.repeat ?? 1,
+      delay: config.delay ?? 0,
+      fill: "forwards"
+    });
+    this._animation = new Animation(effect, document.timeline);
+    this._animation.play();
+    return this._animation;
+  }
+  pause() {
+    this._animation?.pause();
+  }
+  resume() {
+    this._animation?.play();
+  }
+  reset() {
+    this._animation?.cancel();
+    this._animation = null;
+  }
+  seek(targetTime) {
+    if (this._animation) {
+      this._animation.currentTime = targetTime * 1e3;
+    }
+  }
+  /**
+   * Native animation object.
+   *
+   * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Animation Animation}.
+   */
+  get nativeAnimation() {
+    return this._animation;
+  }
+};
+function webTimeline(rootNode) {
+  return new WebAniTimeline(rootNode);
+}
+
+// src/event/manager.ts
+var EventManager = class _EventManager {
+  constructor(supportedEvents) {
+    this.supportedEvents = supportedEvents;
+    this._element = null;
+    this._animeGetter = null;
+    this.setAnimeGetter = (animeGetter) => {
+      this._animeGetter = animeGetter;
+    };
+    this.eventMap = /* @__PURE__ */ new Map();
+    this.withAnimeValue = (listener) => {
+      const withAnime = (e) => {
+        listener(this.animeGetter(), e);
+      };
+      return withAnime;
+    };
+    this.add = (eventName, listener, options) => {
+      const withAnime = this.withAnimeValue(listener);
+      this.eventMap.set(eventName, withAnime);
+      this.targetElement.addEventListener(
+        eventName,
+        this.eventMap.get(eventName),
+        options
+      );
+    };
+    this.cleanupOne = (eventName) => {
+      const removeListener = this.eventMap.get(eventName);
+      if (!removeListener) return false;
+      this.targetElement.removeEventListener(eventName, removeListener);
+      return true;
+    };
+    this.cleanupAll = () => {
+      const clearResponse = [];
+      for (const evtName of this.eventMap.keys()) {
+        const res = this.cleanupOne(evtName);
+        clearResponse.push(res);
+      }
+      return clearResponse.some((t) => t === false) === false;
+    };
+    this.attach = (handlers) => {
+      Object.entries(handlers).forEach(([eventKey, handler]) => {
+        this.add(
+          _EventManager.getEvtKey(eventKey),
+          handler
+        );
+      });
+    };
+  }
+  get targetElement() {
+    if (!this._element) throw new Error("EventManger, bind element first");
+    return this._element;
+  }
+  get animeGetter() {
+    if (!this._animeGetter)
+      throw new Error("EventManager, animeGetter should be provided");
+    return this._animeGetter;
+  }
+  /**
+   * get pure `{event_name}`
+   * @param key onX`{event_name}`
+   */
+  static getEvtKey(key) {
+    const removed = key.substring(2, key.length);
+    const Capitalized = `${removed[0].toLowerCase()}${removed.substring(1, key.length)}`;
+    return Capitalized;
+  }
+  bind(element) {
+    this._element = element;
+  }
+};
+
 // src/index.ts
 var a = {
   timing: T,
+  dynamicTimeline: rafTimeline,
+  timeline: webTimeline,
+  /**
+   * Create animation segment.
+   */
   ani,
-  createStates,
+  /**
+   * Add delay
+   */
   delay,
   loop,
   parallel,
   sequence,
   stagger,
-  timeline
+  createStates
 };
 export {
   AnimationClock,
-  AnimationNode,
-  CompositionNode,
+  BezierTimingFunction,
   EventManager,
   LinearTimingFunction,
-  ParallelNode,
-  SegmentNode,
-  SequenceNode,
-  StaggerNode,
+  RafAniTimeline,
   T,
-  Timeline,
+  TimelineBase,
   TimingFunction,
+  WebAniTimeline,
   a,
-  ani,
+  calculateSegmentState,
+  compileToKeyframes,
   createStates,
   createStyleSheet,
-  delay,
-  loop,
-  parallel,
-  sequence,
-  stagger,
-  timeline
+  rafTimeline,
+  webTimeline
 };