@pixi/3d
    Preparing search index...

    Class AnimationPlayer

    Plays animations on a Container3D and its children

    A Model3D loaded with animations already has one as player. Build your own to play animations authored in code.

    Each animation gets one AnimationState per player, holding its time, speed and weight. Any number can play at once. Where two playing states drive the same property through tracks with the same label, the player blends their values by AnimationState#weight, which is how crossfades work. Playback advances on Ticker.shared unless AnimationPlayer#autoUpdate is off.

    const player = new AnimationPlayer({ target: robot, animations: [idle, walk] });
    const walking = player.play('walk');

    walking.animationSpeed = 1.5;
    Index
    constructor
    target defaultOptions
    animationLabels autoUpdate destroyed playing
    addAnimations destroy getAnimation getState play stop update
    target: Container3D

    Root of the hierarchy this player animates

    defaultOptions: Partial<AnimationPlayerOptions> = ...

    Defaults for every new AnimationPlayer; an option passed as undefined keeps its default

    A Model3D passes its own autoUpdate and autoPlay, so its player follows Model3D.defaultOptions instead.

    AnimationPlayer.defaultOptions.autoUpdate = false;
    • get animationLabels(): readonly string[]

      Labels of every registered animation, in registration order

      Pass one to AnimationPlayer#play or AnimationPlayer#getState.

      Returns readonly string[]

      for (const label of player.animationLabels) {
        addButton(label, () => player.play(label));
      }
    • get autoUpdate(): boolean

      Whether playback advances on Ticker.shared

      Turn it off to drive playback from your own ticker or fixed-step loop with AnimationPlayer#update.

      Returns boolean

      player.autoUpdate = false;
      app.ticker.add((ticker) => player.update(ticker));
    • set autoUpdate(value: boolean): void

      Sets whether playback advances on Ticker.shared

      Parameters

      • value: boolean

        false to call update yourself

      Returns void

    • get destroyed(): boolean

      Whether AnimationPlayer#destroy has been called on this player

      Returns boolean

      if (!player.destroyed) player.play('idle');
    • get playing(): boolean

      Whether any animation on this player is playing

      Returns boolean

      if (!player.playing) player.play('idle');

    • Registers animations for playback

      Array entries are keyed by each animation's own label. Record entries are keyed by the record property name.

      Parameters

      Returns void

      player.addAnimations([wave]);
      player.addAnimations({ cheer: celebrate });
      player.play('cheer');

    • Stops every animation and takes the player off the ticker for good

      Calling it again does nothing, and play and gotoAndStop on an AnimationState kept from before are ignored. A Model3D destroys its own player; call this for one you built.

      Returns void

      player.destroy();
      crate.destroy();

    • Returns a registered animation by label

      Parameters

      • label: string

        Registered animation label

      Returns Animation | undefined

      The animation, or undefined when nothing is registered under the label

      const walkDuration = player.getAnimation('walk')?.duration ?? 0;

    • Returns the reusable playback state for an animation without starting playback

      Each animation has one state per player, created on first request. Throws for a label nothing is registered under; AnimationPlayer#getAnimation returns undefined instead.

      Parameters

      • animation: string | Animation

        The animation, or the label it's registered under

      Returns AnimationState

      The playback state for the animation

      const jump = player.getState('jump');

      jump.loop = false;
      jump.gotoAndPlay(0);

    • Starts or resumes an animation from its state's current time

      Animations already playing carry on and blend with it; call AnimationPlayer#stop first to switch from one to another. AnimationState#play covers restarting a one-shot animation that already finished.

      Parameters

      • animation: string | Animation

        The animation, or the label it's registered under

      Returns AnimationState

      The playback state for the animation

      player.stop();
      player.play('run');

    • Stops every playing animation, each holding its current time and pose

      Returns void

      menu.on('open', () => player.stop());

    • Advances all playing states and applies the blended results to their targets

      Runs every frame from Ticker.shared while autoUpdate is on and something is playing. Call it yourself when driving playback from your own loop.

      onComplete and onLoop callbacks run once every pose is applied, so they see this frame's final pose and may play, stop or seek any state. A state they start begins advancing on the next update.

      Parameters

      • Optionalticker: Ticker

        The ticker driving this update; its deltaMS sets how far playback advances. Omitted, one 60 fps frame is assumed.

      Returns void

      player.autoUpdate = false;
      app.ticker.add((ticker) => player.update(ticker));

    Settings
    Member Visibility

    On This Page
    Constructors
    Properties
    Accessors
    Methods