figureone
    Preparing search index...

    Class default

    Transform Animation Step

    By default, the transform will start with the element's current transform.

    A Transform chains many transform links where each link might be a Rotation, Scale or Translation transform.

    start, target and delta should have the same order of transform links as the element's transform.

    The TransformAnimationStep will animate each of these links with the same duration. If velocity is used to calculate the duration, then the link with the longest duration will define the duration of the animation. velocity can either be a transform with the same order of transform links as the element or it can be a constant value, which will be applied to all transform links. velocity cannot be 0.

    Use either delta or target to define it's end point of the animation.

    To test examples, append them to the boilerplate

    // Using duration
    p.animations.new()
      .transform({
        target: new Fig.Transform().scale(2, 2).rotate(0.5).translate(1, 0),
        duration: 2,
      })
      .start();

    // Using velocity as a transform
    p.animations.new()
      .transform({
        target: new Fig.Transform().scale(2, 2).rotate(0.5).translate(1, 0),
        velocity: new Fig.Transform().scale(0.5, 0.5).rotate(0.25).translate(0.5, 0.5),
      })
      .start();

    // Using velocity as a number
    p.animations.new()
      .transform({
        target: new Fig.Transform().scale(2, 2).rotate(0.5).translate(1, 0),
        velocity: 0.5,
      })
      .start();

    // Using TypeParsableTransform as transform definition
    p.animations.new()
      .transform({
        target: [['s', 1.5, 1.5], ['r', 0.5], ['t', 1, 0]],
        duration: 2,
      })
      .start();

    // Different ways to create a stand-alone step
    const step1 = p.animations.transform({
      target: [['s', 1.5, 1.5], ['r', 1], ['t', 1, 0]],
      duration: 2,
    });
    const step2 = new Fig.Animation.TransformAnimationStep({
      element: p,
      target: [['s', 1, 1], ['r', 0], ['t', 0, 0]],
      duration: 2,
    });

    p.animations.new()
      .then(step1)
      .then(step2)
      .start();

    Hierarchy (View Summary)

    Index

    Methods

    getRemainingTime

    Methods

    Settings

    Member Visibility

    On This Page

    Methods