@antv/g/es/dom/KeyframeEffect.js

import { calculateActiveDuration, calculateIterationProgress } from '../utils/animation';
import { AnimationEffectTiming } from './AnimationEffectTiming';
import { normalizeKeyframes } from './KeyframeList';
import { convertEffectInput } from '../utils/interpolation';
var fills = 'backwards|forwards|both|none'.split('|');
var directions = 'reverse|alternate|alternate-reverse'.split('|');
export function makeTiming(timingInput, forGroup) {
  var timing = new AnimationEffectTiming();

  if (forGroup) {
    timing.fill = 'both';
    timing.duration = 'auto';
  }

  if (typeof timingInput === 'number' && !isNaN(timingInput)) {
    timing.duration = timingInput;
  } else if (timingInput !== undefined) {
    Object.keys(timingInput).forEach(function (property) {
      if (timingInput[property] !== undefined && timingInput[property] !== null && timingInput[property] !== 'auto') {
        if (typeof timing[property] === 'number' || property === 'duration') {
          if (typeof timingInput[property] !== 'number' || isNaN(timingInput[property])) {
            return;
          }
        }

        if (property === 'fill' && fills.indexOf(timingInput[property]) === -1) {
          return;
        }

        if (property === 'direction' && directions.indexOf(timingInput[property]) === -1) {
          return;
        } // @ts-ignore


        timing[property] = timingInput[property];
      }
    });
  }

  return timing;
}
export function normalizeTimingInput(timingInput, forGroup) {
  timingInput = numericTimingToObject(timingInput !== null && timingInput !== void 0 ? timingInput : {
    duration: 'auto'
  });
  return makeTiming(timingInput, forGroup);
}
export function numericTimingToObject(timingInput) {
  if (typeof timingInput === 'number') {
    if (isNaN(timingInput)) {
      timingInput = {
        duration: 'auto'
      };
    } else {
      timingInput = {
        duration: timingInput
      };
    }
  }

  return timingInput;
}
/**
 * @see https://developer.mozilla.org/en-US/docs/Web/API/KeyframeEffect
 * @example
  const circleDownKeyframes = new KeyframeEffect(
    circle, // element to animate
    [
      { transform: 'translateY(0)' }, // keyframe
      { transform: 'translateY(100)' } // keyframe
    ],
    { duration: 3000, fill: 'forwards' } // keyframe options
  );
 *
 */

var KeyframeEffect =
/** @class */
function () {
  function KeyframeEffect(target, effectInput, timingInput) {
    var _this = this;

    this.composite = 'replace';
    this.iterationComposite = 'replace';
    this.target = target;
    this.timing = normalizeTimingInput(timingInput, false);
    this.timing.effect = this;
    this.timing.activeDuration = calculateActiveDuration(this.timing);
    this.timing.endTime = Math.max(0, this.timing.delay + this.timing.activeDuration + this.timing.endDelay);
    this.normalizedKeyframes = normalizeKeyframes(effectInput, this.timing);
    this.interpolations = convertEffectInput(this.normalizedKeyframes, this.timing, this.target);
    this.computedTiming = new Proxy(this.timing, {
      get: function get(target, prop) {
        if (prop === 'duration') {
          return target.duration === 'auto' ? 0 : target.duration;
        } else if (prop === 'fill') {
          return target.fill === 'auto' ? 'none' : target.fill;
        } else if (prop === 'localTime') {
          return _this.animation && _this.animation.currentTime || null;
        } else if (prop === 'currentIteration') {
          if (!_this.animation || _this.animation.playState !== 'running') {
            return null;
          }

          return target.currentIteration || 0;
        } else if (prop === 'progress') {
          if (!_this.animation || _this.animation.playState !== 'running') {
            return null;
          }

          return target.progress || 0;
        }

        return target[prop];
      },
      set: function set() {
        return true;
      }
    });
  }

  KeyframeEffect.prototype.applyInterpolations = function () {
    this.interpolations(this.target, Number(this.timeFraction));
  };

  KeyframeEffect.prototype.update = function (localTime) {
    if (localTime === null) {
      return false;
    }

    this.timeFraction = calculateIterationProgress(this.timing.activeDuration, localTime, this.timing);
    return this.timeFraction !== null;
  };

  KeyframeEffect.prototype.getKeyframes = function () {
    return this.normalizedKeyframes;
  };

  KeyframeEffect.prototype.setKeyframes = function (keyframes) {
    this.normalizedKeyframes = normalizeKeyframes(keyframes);
  };
  /**
   * @see https://developer.mozilla.org/en-US/docs/Web/API/AnimationEffect/getComputedTiming
   */


  KeyframeEffect.prototype.getComputedTiming = function () {
    return this.computedTiming;
  };
  /**
   * @see https://developer.mozilla.org/en-US/docs/Web/API/AnimationEffect/getTiming
   */


  KeyframeEffect.prototype.getTiming = function () {
    return this.timing;
  };
  /**
   * @see https://developer.mozilla.org/en-US/docs/Web/API/AnimationEffect/updateTiming
   */


  KeyframeEffect.prototype.updateTiming = function (timing) {
    var _this = this;

    Object.keys(timing || {}).forEach(function (name) {
      _this.timing = timing[name];
    });
  };

  return KeyframeEffect;
}();

export { KeyframeEffect };