figureone
    Preparing search index...

    Class SerialAnimationStep

    Execute an array of AnimationSteps in series.

    Often the AnimationBuilder class which extends SerialAnimationStep can be used to create serial animations in a more clean way.

    animation steps to perform in serial

    To test examples, append them to the boilerplate

    // Using a SerialAnimation step can be cumbersome, but
    // can be useful if modularizing animations between files
    const Rot = Fig.Animation.RotationAnimationStep;
    const Delay = Fig.Animation.DelayAnimationStep;
    const Pos = Fig.Animation.PositionAnimationStep;

    const series = new Fig.Animation.SerialAnimationStep([
      new Rot({ element: p, target: Math.PI / 2, duration: 2 }),
      new Delay({ duration: 0.2 }),
      new Rot({ element: p, target: Math.PI, duration: 2 }),
      new Delay({ duration: 0.2 }),
      new Rot({ element: p, target: 0, direction: -1, duration: 1.3, progression: 'easein' }),
      new Pos({ element: p, target: [1, 0], duration: 2, progression: 'easeout' }),
    ]);

    p.animations.animations.push(series);
    p.animations.start()

    // Same animation but with `AnimationBuilder` (which is an extension of
    // `SerialAnimationStep`)
    p.animations.new()
      .rotation({ target: Math.PI / 2, duration: 2 })
      .delay(0.2)
      .rotation({ target: Math.PI, duration: 2 })
      .delay(0.2)
      .rotation({ target: 0, duration: 1, direction: -1, progression: 'easein' })
      .position({ target: [1, 0], duration: 2, progression: 'easeout' })
      .start();

    Hierarchy (View Summary)

    Index

    Methods

    start getRemainingTime

    Methods

    Settings

    Member Visibility

    On This Page

    Methods