Interface KeyframesGenerator<TClipContext>

OptionalgenerateKeyframeGenerators

OptionalgenerateRafMutatorGenerators

OptionalgenerateRafMutators

generateKeyframes

• generateKeyframes(...effectOptions): {
      backwardFrames?: Keyframes;
      forwardFrames: Keyframes;
  }

• Runs every time the clip is played, returning up to 2 new sets of Keyframes each time.

  Parameters

  • Rest...effectOptions: unknown[]

    parameters used to set the behavior for the specific animation effect

  Returns {
      backwardFrames?: Keyframes;
      forwardFrames: Keyframes;
  }

  An object containing 2 possible sets of Keyframes.

  • forwardKeyframes is used for the clip's animation when the clip is played
  • backwardKeyframes (optional) is used for the clip's animation when the clip is rewound
    • If backwardKeyframes is omitted, the reversal of forwardKeyframes is used instead

  • OptionalbackwardFrames?: Keyframes

  • forwardFrames: Keyframes

  Example

  const clipFactories = webimator.createAnimationClipFactories({
    customEntranceEffects: {
      // a custom 'zoomIn' entrance animation effect that you might make
      zoomIn: {
        generateKeyframes(initialScale: number) {
          return {
            forwardFrames: [
              {scale: initialScale, opacity: 0},
              {scale: 1, opacity: 1}
            ],
            // (backwardFrames could have been omitted in this case because
            // the reversal of forwardFrames is exactly equivalent)
            backwardFrames: [
              {scale: 1, opacity: 1},
              {scale: initialScale, opacity: 0}
            ]
          };
        }
      }
    },
  });
  
  const element = document.querySelector('.some-element');
  const ent = clipFactories.Entrance(element, 'zoomIn', [0.2]);
  ent.play().then(ent.rewind);
  Copy