Function toAnimationFrames

  • Converts interpolation functions written in this style (t, values, decimal) => { ... } to work in the BatchSpringEasing

    You use it like so,

    import { BatchSpringEasing, toAnimationFrames, toFixed, scale, limit } from "spring-easing";

    function interpolateNumber(t: number, values: number[], decimal = 3) {
    // nth index
    const n = values.length - 1;

    // The current index given t
    const i = limit(Math.floor(t * n), 0, n - 1);

    const start = values[i];
    const end = values[i + 1];
    const progress = (t - i / n) * n;

    return toFixed(scale(progress, start, end), decimal);
    }

    function interpolatePixels(t: number, values: number[], decimal = 3) {
    const result = interpolateNumber(t, values, decimal);
    return `${result}px`;
    }

    BatchSpringEasing(
    [0, 250],
    'spring',
    toAnimationFrames(interpolatePixels)
    );

    Parameters

    Returns (<T, TReturn>(arr_t, values, decimal?) => TReturn)

      • <T, TReturn>(arr_t, values, decimal?): TReturn
      • Type Parameters

        • T extends unknown[] = number[]

        • TReturn extends unknown[] = T

        Parameters

        • arr_t: number[]
        • values: T
        • Optional decimal: number

        Returns TReturn

Generated using TypeDoc