Function newCriticallyDampedAnimationIterator

  • newCriticallyDampedAnimationIterator(
        settings: {
            l?: number;
            lag: number;
            lTarget: number;
            precision?: number;
        },
    ): AsyncGenerator<{ l: number; t: number; v: number }>

    Returns an animation iterator based on criticallyDamped that starts at the given position l, with velocity v = 0 and time t = 0 and yields the new position and velocity, and total time at every animation frame.

    Parameters

    • settings: { l?: number; lag: number; lTarget: number; precision?: number }
      • Optionall?: number

        The initial starting position.

      • lag: number

        See criticallyDamped.

      • lTarget: number

        The initial target position. Can be updated when calling next().

      • Optionalprecision?: number

        See criticallyDamped.

    Returns AsyncGenerator<{ l: number; t: number; v: number }>

    An iterator whose next method accepts an optional new lTarget. The iterator yields an object containing successive values for:

    • position (l)
    • velocity (v)
    • total time elapsed (t)

    Example

    If you never need to update the target you can use a for await loop:

    const iterator = newCriticallyDampedAnimationIterator({
      l: 10,
      lTarget: 100,
      lag: 1500
    });

    for await (const { l, v, t } of iterator) {
      console.log({ l, v, t });
    }

    Example

    If you do need to update the target, then call next explicitly:

    const iterator = newCriticallyDampedAnimationIterator({
      l: 10,
      lTarget: 100,
      lag: 1500
    });

    let { value: { l, v, t } } = await iterator.next();
    ({ value: { l, v, t } } = await iterator.next()); // updated
    ({ value: { l, v, t } } = await iterator.next(200)); // updated towards a new target

    Since

    v1.2.0

Settings

Member Visibility