@antv/f2/es/canvas/animation/animator.js

Charts for mobile visualization.

import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
import _createClass from "@babel/runtime/helpers/esm/createClass";
import interpolate from './interpolate';
import * as Easing from './easing';
import { ElementStatus } from '../../jsx';
import { isString } from '@antv/util';
var Animator = /*#__PURE__*/function () {
  function Animator(element, animation) {
    _classCallCheck(this, Animator);
    // 是否是裁剪动画
    this.isClip = false;
    this.end = false;
    this.element = element;
    this.animation = animation;
    var _animation$property = animation.property,
      property = _animation$property === void 0 ? [] : _animation$property,
      easing = animation.easing,
      duration = animation.duration,
      _animation$delay = animation.delay,
      delay = _animation$delay === void 0 ? 0 : _animation$delay,
      start = animation.start,
      end = animation.end,
      onFrame = animation.onFrame,
      isClip = animation.isClip;
    var interpolates = property.map(function (name) {
      if (isString(name)) {
        return interpolate(start[name], end[name]);
      }
      // @ts-ignore
      if (name.interpolate) {
        // @ts-ignore
        return name.interpolate(start, end);
      }
    });
    this.easing = typeof easing === 'function' ? easing : Easing[easing] || Easing.linear;
    this.property = property;
    this.interpolates = interpolates;
    this.duration = duration;
    this.delay = delay;
    this.onFrame = onFrame;
    this.totalDuration = duration + delay;
    this.isClip = isClip;
    // 更新到初始状态
    this.update(0, 0);
  }
  _createClass(Animator, [{
    key: "to",
    value: function to(time) {
      var duration = this.duration,
        delay = this.delay,
        totalDuration = this.totalDuration,
        easing = this.easing,
        end = this.end;
      // 已结束
      if (end) {
        return;
      }
      // 未开始
      if (time <= delay || !duration) {
        return;
      }
      // 最大为1
      var t = time >= totalDuration ? 1 : (time - delay) / duration;
      this.update(easing(t), time);
      // 最后一帧
      if (t === 1) {
        this.onEnd();
      }
    }
  }, {
    key: "update",
    value: function update(t, time) {
      var element = this.element,
        interpolates = this.interpolates,
        property = this.property,
        onFrame = this.onFrame;
      var attrs = {};
      for (var i = property.length - 1; i >= 0; i--) {
        var name = property[i];
        if (isString(name)) {
          attrs[name] = interpolates[i](t);
        } else {
          // @ts-ignore
          attrs[name.name] = interpolates[i](t);
        }
      }
      if (onFrame) {
        attrs = _objectSpread(_objectSpread({}, attrs), this.onFrame(t, time));
      }
      element.attr(attrs);
    }
  }, {
    key: "onEnd",
    value: function onEnd() {
      var animation = this.animation,
        isClip = this.isClip,
        element = this.element;
      var onEnd = animation.onEnd;
      onEnd && onEnd.call(this);
      if (isClip) {
        // 如果是裁剪区动画，要移除裁剪区
        element.remove(true);
      }
      // 如果当前元素状态被标记为删除，等动画结束后直接删除
      if (element._attrs.status === ElementStatus.ELEMENT_DELETE) {
        element.remove(true);
      }
      // 清空 不需要重复执行
      element.set('animation', null);
      this.end = true;
    }
  }]);
  return Animator;
}();
export default Animator;