figureone
    Preparing search index...

    Class default

    Animation Manager

    This class manages animations and creates animation steps for use in animations.

    Each FigureElement has its own AnimationManager in the animations property, though any animation manager can animate any other element. Therefore all parallel animations can go through the same manager, or be spread throughout different element's animation managers. Spread animations out between elements, or keeping them all in one AnimationManager can change how readable code is, how convenient it is to cancel running animations, and what order the animations are performed in (AnimationManagers tied to elements drawn earlier will perform their animation steps before those tied to elements drawn later). AnimationManagers will only be processed on each animation frame if the element they are tied to is not hidden.

    The animations property within AnimationManager is simply an array that contains a number AnimationSteps that are executed in parallel. Typically, these steps would themselves be SerialAnimationSteps or a series of animations. This means the animation manager is running a number of animation series in parallel.

    The AnimationManagers on FigureElements should be used instead of instantiating this class separately, as those on FigureElements will be automatically processed every animation frame.

    // At its heart the `AnimationManager` is just executing
    // an array of animation steps.

    // Create animation steps
    const position = new Fig.Animation.PositionAnimationStep({
      element: p,
      target: [1, 0],
      duration: 2,
    });
    const rotation = new Fig.Animation.RotationAnimationStep({
      element: p,
      target: Math.PI,
      duration: 2,
    });

    // Combine the animations into a SerialAnimationStep
    const series = new Fig.Animation.SerialAnimationStep([
      position,
      rotation,
    ]);

    // Add the animations to the animation manager and start
    p.animations.animations.push(series);
    p.animations.start();

    // Using the `new` method in `AnimationManager` creates a convenient
    // `AnimationBuilder` which extends a `SerialAnimationStep` by using
    // a fluent API pattern
    //
    // Create animation steps
    const position = new Fig.Animation.PositionAnimationStep({
      element: p,
      target: [1, 0],
      duration: 2,
    });
    const rotation = new Fig.Animation.RotationAnimationStep({
      element: p,
      target: Math.PI,
      duration: 2,
    });

    // Build and start the animation
    p.animations.new()
      .then(position)
      .then(rotation)
      .start();

    // `AnimationStep`s can also be created from the `AnimationManager`
    // with the added convenience that the `FigureElement` that
    // has the `AnimationManager` will be used as the default
    // `element` property. This combined with the `AnimationBuilder`
    // makes defining most animations clean and readable code

    // Build and start the animation
    p.animations.new()
      .position({ target: [1, 0], duration: 2 })
      .rotation({ target: Math.PI, duration: 2 })
      .start();

    // Parallel animations however still need to use explicit animation steps.
    // Creating the steps from the `AnimationManager` means the `element` doesn't
    // need to be defined.
    //
    p.animations.new()
      .inParallel([
        p.animations.position({ target: [1, 0], duration: 2 }),
        p.animations.rotation({ target: Math.PI, duration: 2 })
      ])
      .start();
    Index

    Methods

    new setTimeSpeed builder rotation scale trigger custom delay translation position color opacity transform pulse dissolveIn dissolveOut dim undim scenario scenarios cancel get start getRemainingTime

    Methods

    • New animation builder attached to this animation manager

      Parameters

      • Optionalname: string | null

      Returns default

      AnimationBuilder

      p.animations.new()
        .position({ target: [0.5, 0], duration: 2 })
        .rotation({ target: Math.PI, duration: 2 })
        .start();

    • Set time speed of animation relative to real time, where 1 is real time, <1 is slower than real time and >1 is faster than real time.

      Parameters

      • speed: number = 1

      Returns void

    • Cancel one or all animations managed by this manager (in the animations array).

      Parameters

      • name: string | null | undefined = null

        name of animation or null to cancel all (null)

      • force: "complete" | "freeze" | null = null

        force the animation to complete or freeze - null will perform the default operation (null)

      Returns void

    • Get remaining duration of all animations

      Parameters

      • animationNames: string | string[] = []
      • now: number = ...

        define this if you want remaining duration from a custom time

      Returns number

    Settings

    Member Visibility

    On This Page

    Methods