@visactor/vrender-animate/es/custom/growCenter.js

This module provides a graph-based animation system for VRender.

import { isValid } from "@visactor/vutils";

import { ACustomAnimate } from "./custom-animate";

import { applyAnimationFrameAttributes, applyAppearStartAttributes } from "./transient";

const growCenterIn = (graphic, options, animationParameters) => {
    const attrs = graphic.getFinalAttribute();
    switch (null == options ? void 0 : options.direction) {
      case "x":
        {
            const x = attrs.x, x1 = attrs.x1, width = attrs.width;
            return {
                from: isValid(width) ? {
                    x: x + width / 2,
                    x1: void 0,
                    width: 0
                } : {
                    x: (x + x1) / 2,
                    x1: (x + x1) / 2,
                    width: void 0
                },
                to: {
                    x: x,
                    x1: x1,
                    width: width
                }
            };
        }

      case "y":
        {
            const y = attrs.y, y1 = attrs.y1, height = attrs.height;
            return {
                from: isValid(height) ? {
                    y: y + height / 2,
                    y1: void 0,
                    height: 0
                } : {
                    y: (y + y1) / 2,
                    y1: (y + y1) / 2,
                    height: void 0
                },
                to: {
                    y: y,
                    y1: y1,
                    height: height
                }
            };
        }

      default:
        {
            const x = attrs.x, x1 = attrs.x1, width = attrs.width, y = attrs.y, y1 = attrs.y1, height = attrs.height, from = {};
            return isValid(width) ? (from.x = x + width / 2, from.width = 0, from.x1 = void 0) : (from.x = (x + x1) / 2, 
            from.x1 = (x + x1) / 2, from.width = void 0), isValid(height) ? (from.y = y + height / 2, 
            from.height = 0, from.y1 = void 0) : (from.y = (y + y1) / 2, from.y1 = (y + y1) / 2, 
            from.height = void 0), {
                from: from,
                to: {
                    x: x,
                    y: y,
                    x1: x1,
                    y1: y1,
                    width: width,
                    height: height
                }
            };
        }
    }
}, growCenterOut = (graphic, options, animationParameters) => {
    const attrs = graphic.attribute;
    switch (null == options ? void 0 : options.direction) {
      case "x":
        {
            const x = attrs.x, x1 = attrs.x1, width = attrs.width;
            return {
                to: isValid(width) ? {
                    x: x + width / 2,
                    x1: void 0,
                    width: 0
                } : {
                    x: (x + x1) / 2,
                    x1: (x + x1) / 2,
                    width: void 0
                }
            };
        }

      case "y":
        {
            const y = attrs.y, y1 = attrs.y1, height = attrs.height;
            return {
                to: isValid(height) ? {
                    y: y + height / 2,
                    y1: void 0,
                    height: 0
                } : {
                    y: (y + y1) / 2,
                    y1: (y + y1) / 2,
                    height: void 0
                }
            };
        }

      default:
        {
            const x = attrs.x, y = attrs.y, x1 = attrs.x1, y1 = attrs.y1, width = attrs.width, height = attrs.height, to = {};
            return isValid(width) ? (to.x = x + width / 2, to.width = 0, to.x1 = void 0) : (to.x = (x + x1) / 2, 
            to.x1 = (x + x1) / 2, to.width = void 0), isValid(height) ? (to.y = y + height / 2, 
            to.height = 0, to.y1 = void 0) : (to.y = (y + y1) / 2, to.y1 = (y + y1) / 2, to.height = void 0), 
            {
                to: to
            };
        }
    }
};

export class GrowCenterIn extends ACustomAnimate {
    constructor(from, to, duration, easing, params) {
        super(from, to, duration, easing, params);
    }
    onBind() {
        var _a, _b, _c;
        super.onBind();
        const {from: from, to: to} = growCenterIn(this.target, this.params.options, this.params), fromAttrs = null !== (_b = null === (_a = this.target.context) || void 0 === _a ? void 0 : _a.lastAttrs) && void 0 !== _b ? _b : from;
        this.props = to, this.propKeys = Object.keys(to).filter((key => null != to[key])), 
        this.from = fromAttrs, this.to = to, this.target.applyFinalAttributeToAttribute(), 
        !1 !== (null === (_c = this.params.controlOptions) || void 0 === _c ? void 0 : _c.immediatelyApply) && applyAppearStartAttributes(this.target, fromAttrs);
    }
    onEnd(cb) {
        super.onEnd(cb);
    }
    onUpdate(end, ratio, out) {
        const attrs = {};
        this.propKeys.forEach((key => {
            attrs[key] = this.from[key] + (this.to[key] - this.from[key]) * ratio;
        })), applyAnimationFrameAttributes(this.target, attrs), this.target.addUpdatePositionTag(), 
        this.target.addUpdateShapeAndBoundsTag();
    }
}

export class GrowCenterOut extends ACustomAnimate {
    constructor(from, to, duration, easing, params) {
        super(from, to, duration, easing, params);
    }
    onBind() {
        super.onBind();
        const {from: from, to: to} = growCenterOut(this.target, this.params.options, this.params);
        this.props = to, this.propKeys = Object.keys(to).filter((key => null != to[key])), 
        this.from = null != from ? from : this.target.attribute, this.to = to;
    }
    onEnd(cb) {
        super.onEnd(cb);
    }
    onUpdate(end, ratio, out) {
        const attrs = {};
        this.propKeys.forEach((key => {
            attrs[key] = this.from[key] + (this.to[key] - this.from[key]) * ratio;
        })), applyAnimationFrameAttributes(this.target, attrs), this.target.addUpdatePositionTag(), 
        this.target.addUpdateShapeAndBoundsTag();
    }
}
//# sourceMappingURL=growCenter.js.map