Class Raf

Manages an animation frame loop with configurable FPS and playback controls.

Documentation

Hierarchy (View Summary)

Constructors

constructor

Accessors

callbacks duration fps fpsFactor index isDestroyed isPlaying name prefix props timestamp

Methods

_addTempClassName _cn _destroy _getMutable _getStatic _handleProps destroy lerpFactor on onDestroy pause play updateProps

Constructors

constructor

  • new Raf(
        props?: IRafStaticProps & IRafMutableProps & Partial<
            {
                onDestroy: (data: undefined, ctx: Raf) => void;
                onFrame: (
                    data: {
                        duration: number;
                        fps: number;
                        fpsFactor: number;
                        lerpFactor: (factor: number) => number;
                    },
                    ctx: Raf,
                ) => void;
                onPause: (data: undefined, ctx: Raf) => void;
                onPlay: (data: undefined, ctx: Raf) => void;
                onProps: (data: Partial, ctx: Raf) => void;
                onToggle: (data: undefined, ctx: Raf) => void;
            },
        >,
        onCallbacks?: Partial<
            {
                onDestroy: (data: undefined, ctx: Raf) => void;
                onFrame: (
                    data: {
                        duration: number;
                        fps: number;
                        fpsFactor: number;
                        lerpFactor: (factor: number) => number;
                    },
                    ctx: Raf,
                ) => void;
                onPause: (data: undefined, ctx: Raf) => void;
                onPlay: (data: undefined, ctx: Raf) => void;
                onProps: (data: Partial, ctx: Raf) => void;
                onToggle: (data: undefined, ctx: Raf) => void;
            },
        >,
    ): Raf

    Parameters

    • Optionalprops: IRafStaticProps & IRafMutableProps & Partial<
          {
              onDestroy: (data: undefined, ctx: Raf) => void;
              onFrame: (
                  data: {
                      duration: number;
                      fps: number;
                      fpsFactor: number;
                      lerpFactor: (factor: number) => number;
                  },
                  ctx: Raf,
              ) => void;
              onPause: (data: undefined, ctx: Raf) => void;
              onPlay: (data: undefined, ctx: Raf) => void;
              onProps: (data: Partial, ctx: Raf) => void;
              onToggle: (data: undefined, ctx: Raf) => void;
          },
      >
    • OptionalonCallbacks: Partial<
          {
              onDestroy: (data: undefined, ctx: Raf) => void;
              onFrame: (
                  data: {
                      duration: number;
                      fps: number;
                      fpsFactor: number;
                      lerpFactor: (factor: number) => number;
                  },
                  ctx: Raf,
              ) => void;
              onPause: (data: undefined, ctx: Raf) => void;
              onPlay: (data: undefined, ctx: Raf) => void;
              onProps: (data: Partial, ctx: Raf) => void;
              onToggle: (data: undefined, ctx: Raf) => void;
          },
      >

    Returns Raf

Accessors

callbacks

duration

fps

fpsFactor

index

isDestroyed

  • get isDestroyed(): boolean

    Checks if the module has been destroyed.

    Returns boolean

isPlaying

name

  • get name(): string

    The name of the module, derived from the class name

    Returns string

prefix

  • get prefix(): string

    Optional prefix for classnames used by the module

    Returns string

props

timestamp

Methods

Protected_addTempClassName

  • _addTempClassName(element: Element, className: string): void

    Adds a class name on an element, and keeps track of it for removal when the module is destroyed.

    Parameters

    • element: Element

      The target DOM element.

    • className: string

      The class name to toggle.

    Returns void

Protected_cn

  • _cn(...classNames: string[]): string

    Helper function to generate classnames with the module's prefix.

    Parameters

    • ...classNames: string[]

      The class names to generate.

    Returns string

    A string of class names with the module's prefix applied.

Protected_destroy

_getMutable

  • _getMutable(): {
        __mutableProp: true;
        enabled: boolean;
        fps: number
        | "auto";
        fpsRecalcFrames: number;
    }

    Get default mutable properties

    Returns {
        __mutableProp: true;
        enabled: boolean;
        fps: number | "auto";
        fpsRecalcFrames: number;
    }

    • __mutableProp: true
    • enabled: boolean

      Enables or disables the Raf animation loop.

      Default

      false
    • fps: number | "auto"

      Frames per second (FPS) for the animation. Set to 'auto' for dynamic adjustment.

      Default

      'auto'
    • fpsRecalcFrames: number

      The number of frames after which the FPS is recalculated. This value determines how often the FPS calculation is updated based on frame counts.

      Default

      10

_getStatic

Protected_handleProps

destroy

lerpFactor

  • lerpFactor(ease: number): number

    Calculate linear interpolation factor to make animations run the same regardless of FPS

    Parameters

    • ease: number

    Returns number

on

onDestroy

  • onDestroy(action: () => void): void

    Adds a callback on the module's destruction.

    Parameters

    • action: () => void

      The function to execute during destruction.

    Returns void

pause

play

updateProps

Settings

Member Visibility

On This Page

Constructors
Accessors
Methods