@visactor/vrender-animate 0.22.4

package/dist/index.es.js

@@ -0,0 +1,3824 @@
+import { interpolateColor, interpolatePureColorArrayToStr, ColorStore, ColorType, Generator, AnimateStatus as AnimateStatus$1, PerformanceRAF, application, CustomPath2D, CurveContext, Graphic, AttributeUpdateType, pointInterpolation } from '@visactor/vrender-core';
+import { pi2, isString, EventEmitter, cloneDeep, isArray, isFunction, mixin, isValidNumber, clamp, Point, pi, isNumber, isValid, isNil } from '@visactor/vutils';
+
+var AnimateMode;
+(function (AnimateMode) {
+    AnimateMode[AnimateMode["NORMAL"] = 0] = "NORMAL";
+    AnimateMode[AnimateMode["SET_ATTR_IMMEDIATELY"] = 1] = "SET_ATTR_IMMEDIATELY";
+})(AnimateMode || (AnimateMode = {}));
+
+var AnimateStepType;
+(function (AnimateStepType) {
+    AnimateStepType["wait"] = "wait";
+    AnimateStepType["from"] = "from";
+    AnimateStepType["to"] = "to";
+    AnimateStepType["customAnimate"] = "customAnimate";
+})(AnimateStepType || (AnimateStepType = {}));
+var AnimateStatus;
+(function (AnimateStatus) {
+    AnimateStatus[AnimateStatus["INITIAL"] = 0] = "INITIAL";
+    AnimateStatus[AnimateStatus["RUNNING"] = 1] = "RUNNING";
+    AnimateStatus[AnimateStatus["PAUSED"] = 2] = "PAUSED";
+    AnimateStatus[AnimateStatus["END"] = 3] = "END";
+})(AnimateStatus || (AnimateStatus = {}));
+
+class Easing {
+    constructor() {
+    }
+    static linear(t) {
+        return t;
+    }
+    static none() {
+        return this.linear;
+    }
+    static get(amount) {
+        if (amount < -1) {
+            amount = -1;
+        }
+        else if (amount > 1) {
+            amount = 1;
+        }
+        return function (t) {
+            if (amount === 0) {
+                return t;
+            }
+            if (amount < 0) {
+                return t * (t * -amount + 1 + amount);
+            }
+            return t * ((2 - t) * amount + (1 - amount));
+        };
+    }
+    static getPowIn(pow) {
+        return function (t) {
+            return Math.pow(t, pow);
+        };
+    }
+    static getPowOut(pow) {
+        return function (t) {
+            return 1 - Math.pow(1 - t, pow);
+        };
+    }
+    static getPowInOut(pow) {
+        return function (t) {
+            if ((t *= 2) < 1) {
+                return 0.5 * Math.pow(t, pow);
+            }
+            return 1 - 0.5 * Math.abs(Math.pow(2 - t, pow));
+        };
+    }
+    static getBackIn(amount) {
+        return function (t) {
+            return t * t * ((amount + 1) * t - amount);
+        };
+    }
+    static getBackOut(amount) {
+        return function (t) {
+            return --t * t * ((amount + 1) * t + amount) + 1;
+        };
+    }
+    static getBackInOut(amount) {
+        amount *= 1.525;
+        return function (t) {
+            if ((t *= 2) < 1) {
+                return 0.5 * (t * t * ((amount + 1) * t - amount));
+            }
+            return 0.5 * ((t -= 2) * t * ((amount + 1) * t + amount) + 2);
+        };
+    }
+    static sineIn(t) {
+        return 1 - Math.cos((t * Math.PI) / 2);
+    }
+    static sineOut(t) {
+        return Math.sin((t * Math.PI) / 2);
+    }
+    static sineInOut(t) {
+        return -(Math.cos(Math.PI * t) - 1) / 2;
+    }
+    static expoIn(t) {
+        return t === 0 ? 0 : Math.pow(2, 10 * t - 10);
+    }
+    static expoOut(t) {
+        return t === 1 ? 1 : 1 - Math.pow(2, -10 * t);
+    }
+    static expoInOut(t) {
+        return t === 0 ? 0 : t === 1 ? 1 : t < 0.5 ? Math.pow(2, 20 * t - 10) / 2 : (2 - Math.pow(2, -20 * t + 10)) / 2;
+    }
+    static circIn(t) {
+        return -(Math.sqrt(1 - t * t) - 1);
+    }
+    static circOut(t) {
+        return Math.sqrt(1 - --t * t);
+    }
+    static circInOut(t) {
+        if ((t *= 2) < 1) {
+            return -0.5 * (Math.sqrt(1 - t * t) - 1);
+        }
+        return 0.5 * (Math.sqrt(1 - (t -= 2) * t) + 1);
+    }
+    static bounceOut(t) {
+        if (t < 1 / 2.75) {
+            return 7.5625 * t * t;
+        }
+        else if (t < 2 / 2.75) {
+            return 7.5625 * (t -= 1.5 / 2.75) * t + 0.75;
+        }
+        else if (t < 2.5 / 2.75) {
+            return 7.5625 * (t -= 2.25 / 2.75) * t + 0.9375;
+        }
+        return 7.5625 * (t -= 2.625 / 2.75) * t + 0.984375;
+    }
+    static bounceIn(t) {
+        return 1 - Easing.bounceOut(1 - t);
+    }
+    static bounceInOut(t) {
+        if (t < 0.5) {
+            return Easing.bounceIn(t * 2) * 0.5;
+        }
+        return Easing.bounceOut(t * 2 - 1) * 0.5 + 0.5;
+    }
+    static getElasticIn(amplitude, period) {
+        return function (t) {
+            if (t === 0 || t === 1) {
+                return t;
+            }
+            const s = (period / pi2) * Math.asin(1 / amplitude);
+            return -(amplitude * Math.pow(2, 10 * (t -= 1)) * Math.sin(((t - s) * pi2) / period));
+        };
+    }
+    static getElasticOut(amplitude, period) {
+        return function (t) {
+            if (t === 0 || t === 1) {
+                return t;
+            }
+            const s = (period / pi2) * Math.asin(1 / amplitude);
+            return amplitude * Math.pow(2, -10 * t) * Math.sin(((t - s) * pi2) / period) + 1;
+        };
+    }
+    static getElasticInOut(amplitude, period) {
+        return function (t) {
+            const s = (period / pi2) * Math.asin(1 / amplitude);
+            if ((t *= 2) < 1) {
+                return -0.5 * (amplitude * Math.pow(2, 10 * (t -= 1)) * Math.sin(((t - s) * pi2) / period));
+            }
+            return amplitude * Math.pow(2, -10 * (t -= 1)) * Math.sin(((t - s) * pi2) / period) * 0.5 + 1;
+        };
+    }
+    static registerFunc(name, func) {
+        Easing[name] = func;
+    }
+}
+Easing.quadIn = Easing.getPowIn(2);
+Easing.quadOut = Easing.getPowOut(2);
+Easing.quadInOut = Easing.getPowInOut(2);
+Easing.cubicIn = Easing.getPowIn(3);
+Easing.cubicOut = Easing.getPowOut(3);
+Easing.cubicInOut = Easing.getPowInOut(3);
+Easing.quartIn = Easing.getPowIn(4);
+Easing.quartOut = Easing.getPowOut(4);
+Easing.quartInOut = Easing.getPowInOut(4);
+Easing.quintIn = Easing.getPowIn(5);
+Easing.quintOut = Easing.getPowOut(5);
+Easing.quintInOut = Easing.getPowInOut(5);
+Easing.backIn = Easing.getBackIn(1.7);
+Easing.backOut = Easing.getBackOut(1.7);
+Easing.backInOut = Easing.getBackInOut(1.7);
+Easing.elasticIn = Easing.getElasticIn(1, 0.3);
+Easing.elasticOut = Easing.getElasticOut(1, 0.3);
+Easing.elasticInOut = Easing.getElasticInOut(1, 0.3 * 1.5);
+Easing.easeInOutQuad = (t) => {
+    if ((t /= 0.5) < 1) {
+        return 0.5 * Math.pow(t, 2);
+    }
+    return -0.5 * ((t -= 2) * t - 2);
+};
+Easing.easeOutElastic = (x) => {
+    const c4 = (2 * Math.PI) / 3;
+    return x === 0 ? 0 : x === 1 ? 1 : Math.pow(2, -10 * x) * Math.sin((x * 10 - 0.75) * c4) + 1;
+};
+Easing.easeInOutElastic = (x) => {
+    const c5 = (2 * Math.PI) / 4.5;
+    return x === 0
+        ? 0
+        : x === 1
+            ? 1
+            : x < 0.5
+                ? -(Math.pow(2, 20 * x - 10) * Math.sin((20 * x - 11.125) * c5)) / 2
+                : (Math.pow(2, -20 * x + 10) * Math.sin((20 * x - 11.125) * c5)) / 2 + 1;
+};
+function flicker(t, n) {
+    const step = 1 / n;
+    let flag = 1;
+    while (t > step) {
+        t -= step;
+        flag *= -1;
+    }
+    const v = (flag * t) / step;
+    return v > 0 ? v : 1 + v;
+}
+for (let i = 0; i < 10; i++) {
+    Easing[`flicker${i}`] = (t) => flicker(t, i);
+}
+for (let i = 2; i < 10; i++) {
+    Easing[`aIn${i}`] = (t) => i * t * t + (1 - i) * t;
+}
+
+function interpolateNumber(from, to, ratio) {
+    return from + (to - from) * ratio;
+}
+
+class InterpolateUpdateStore {
+    constructor() {
+        this.opacity = (key, from, to, ratio, step, target) => {
+            target.attribute.opacity = interpolateNumber(from, to, ratio);
+        };
+        this.fillOpacity = (key, from, to, ratio, step, target) => {
+            target.attribute.fillOpacity = interpolateNumber(from, to, ratio);
+        };
+        this.strokeOpacity = (key, from, to, ratio, step, target) => {
+            target.attribute.strokeOpacity = interpolateNumber(from, to, ratio);
+        };
+        this.zIndex = (key, from, to, ratio, step, target) => {
+            target.attribute.zIndex = interpolateNumber(from, to, ratio);
+        };
+        this.backgroundOpacity = (key, from, to, ratio, step, target) => {
+            target.attribute.backgroundOpacity = interpolateNumber(from, to, ratio);
+        };
+        this.shadowOffsetX = (key, from, to, ratio, step, target) => {
+            target.attribute.shadowOffsetX = interpolateNumber(from, to, ratio);
+        };
+        this.shadowOffsetY = (key, from, to, ratio, step, target) => {
+            target.attribute.shadowOffsetY = interpolateNumber(from, to, ratio);
+        };
+        this.shadowBlur = (key, from, to, ratio, step, target) => {
+            target.attribute.shadowBlur = interpolateNumber(from, to, ratio);
+        };
+        this.fill = (key, from, to, ratio, step, target) => {
+            target.attribute.fill = interpolateColor(from, to, ratio, false);
+        };
+        this.fillPure = (key, from, to, ratio, step, target) => {
+            target.attribute.fill = interpolatePureColorArrayToStr(step.fromParsedProps.fill, step.toParsedProps.fill, ratio);
+        };
+        this.stroke = (key, from, to, ratio, step, target) => {
+            target.attribute.stroke = interpolateColor(from, to, ratio, false);
+        };
+        this.strokePure = (key, from, to, ratio, step, target) => {
+            target.attribute.stroke = interpolatePureColorArrayToStr(step.fromParsedProps.stroke, step.toParsedProps.stroke, ratio);
+        };
+        this.width = (key, from, to, ratio, step, target) => {
+            target.attribute.width = interpolateNumber(from, to, ratio);
+            target.addUpdateBoundTag();
+        };
+        this.height = (key, from, to, ratio, step, target) => {
+            target.attribute.height = interpolateNumber(from, to, ratio);
+            target.addUpdateBoundTag();
+        };
+        this.x = (key, from, to, ratio, step, target) => {
+            target.attribute.x = interpolateNumber(from, to, ratio);
+            target.addUpdateBoundTag();
+            target.addUpdatePositionTag();
+        };
+        this.y = (key, from, to, ratio, step, target) => {
+            target.attribute.y = interpolateNumber(from, to, ratio);
+            target.addUpdateBoundTag();
+            target.addUpdatePositionTag();
+        };
+        this.angle = (key, from, to, ratio, step, target) => {
+            target.attribute.angle = interpolateNumber(from, to, ratio);
+            target.addUpdateBoundTag();
+            target.addUpdatePositionTag();
+        };
+        this.scaleX = (key, from, to, ratio, step, target) => {
+            target.attribute.scaleX = interpolateNumber(from, to, ratio);
+            target.addUpdateBoundTag();
+            target.addUpdatePositionTag();
+        };
+        this.scaleY = (key, from, to, ratio, step, target) => {
+            target.attribute.scaleY = interpolateNumber(from, to, ratio);
+            target.addUpdateBoundTag();
+            target.addUpdatePositionTag();
+        };
+        this.lineWidth = (key, from, to, ratio, step, target) => {
+            target.attribute.lineWidth = interpolateNumber(from, to, ratio);
+            target.addUpdateBoundTag();
+        };
+        this.startAngle = (key, from, to, ratio, step, target) => {
+            target.attribute.startAngle = interpolateNumber(from, to, ratio);
+            target.addUpdateBoundTag();
+        };
+        this.endAngle = (key, from, to, ratio, step, target) => {
+            target.attribute.endAngle = interpolateNumber(from, to, ratio);
+            target.addUpdateBoundTag();
+        };
+        this.radius = (key, from, to, ratio, step, target) => {
+            target.attribute.radius = interpolateNumber(from, to, ratio);
+            target.addUpdateBoundTag();
+        };
+        this.outerRadius = (key, from, to, ratio, step, target) => {
+            target.attribute.outerRadius = interpolateNumber(from, to, ratio);
+            target.addUpdateBoundTag();
+        };
+        this.innerRadius = (key, from, to, ratio, step, target) => {
+            target.attribute.innerRadius = interpolateNumber(from, to, ratio);
+            target.addUpdateBoundTag();
+        };
+        this.size = (key, from, to, ratio, step, target) => {
+            target.attribute.size = interpolateNumber(from, to, ratio);
+            target.addUpdateBoundTag();
+        };
+    }
+}
+const interpolateUpdateStore = new InterpolateUpdateStore();
+function commonInterpolateUpdate(key, from, to, ratio, step, target) {
+    if (Number.isFinite(to) && Number.isFinite(from)) {
+        target.attribute[key] = from + (to - from) * ratio;
+        return true;
+    }
+    else if (Array.isArray(to) && Array.isArray(from) && to.length === from.length) {
+        const nextList = [];
+        let valid = true;
+        for (let i = 0; i < to.length; i++) {
+            const v = from[i];
+            const val = v + (to[i] - v) * ratio;
+            if (!Number.isFinite(val)) {
+                valid = false;
+                break;
+            }
+            nextList.push(val);
+        }
+        if (valid) {
+            target.attribute[key] = nextList;
+        }
+        return true;
+    }
+    return false;
+}
+
+function noop() {
+}
+class Step {
+    constructor(type, props, duration, easing) {
+        this._startTime = 0;
+        this._hasFirstRun = false;
+        this.type = type;
+        this.props = props;
+        this.duration = duration;
+        if (easing) {
+            this.easing = typeof easing === 'function' ? easing : Easing[easing];
+        }
+        else {
+            this.easing = Easing.linear;
+        }
+        if (type === 'wait') {
+            this.onUpdate = noop;
+        }
+    }
+    bind(target, animate) {
+        this.target = target;
+        this.animate = animate;
+        this.onBind();
+    }
+    append(step) {
+        this.next = step;
+        step.prev = this;
+        step.setStartTime(this.getStartTime() + this.duration, false);
+    }
+    updateDownstreamStartTimes() {
+        let currentStep = this.next;
+        let currentStartTime = this._startTime + this.duration;
+        while (currentStep) {
+            currentStep.setStartTime(currentStartTime, false);
+            currentStartTime += currentStep.duration;
+            currentStep = currentStep.next;
+        }
+        this.animate.updateDuration();
+    }
+    getLastProps() {
+        if (this.prev) {
+            return this.prev.props || {};
+        }
+        return this.animate.getStartProps();
+    }
+    setDuration(duration, updateDownstream = true) {
+        this.duration = duration;
+        if (updateDownstream) {
+            this.updateDownstreamStartTimes();
+        }
+    }
+    getDuration() {
+        return this.duration;
+    }
+    determineInterpolateUpdateFunction() {
+        if (!this.props) {
+            return;
+        }
+        const funcs = [];
+        this.propKeys.forEach(key => {
+            if (key === 'fill' || key === 'stroke') {
+                const from = this.getLastProps()[key];
+                const to = this.props[key];
+                if (isString(from) && isString(to)) {
+                    const fromArray = ColorStore.Get(from, ColorType.Color255);
+                    const toArray = ColorStore.Get(to, ColorType.Color255);
+                    if (!this.fromParsedProps) {
+                        this.fromParsedProps = {};
+                    }
+                    if (!this.toParsedProps) {
+                        this.toParsedProps = {};
+                    }
+                    this.fromParsedProps[key] = fromArray;
+                    this.toParsedProps[key] = toArray;
+                }
+                funcs.push(interpolateUpdateStore[key === 'fill' ? 'fillPure' : 'strokePure']);
+            }
+            else if (interpolateUpdateStore[key]) {
+                funcs.push(interpolateUpdateStore[key]);
+            }
+            else {
+                funcs.push(commonInterpolateUpdate);
+            }
+        });
+        this.interpolateUpdateFunctions = funcs;
+    }
+    setStartTime(time, updateDownstream = true) {
+        this._startTime = time;
+        if (updateDownstream) {
+            this.updateDownstreamStartTimes();
+        }
+    }
+    getStartTime() {
+        return this._startTime;
+    }
+    onBind() {
+    }
+    onFirstRun() {
+    }
+    onStart() {
+        if (!this._hasFirstRun) {
+            this._hasFirstRun = true;
+            this.fromProps = this.getLastProps();
+            this.determineInterpolateUpdateFunction();
+            this.tryPreventConflict();
+            this.trySyncStartProps();
+            this.onFirstRun();
+        }
+    }
+    tryPreventConflict() {
+        const animate = this.animate;
+        const target = this.target;
+        target.animates.forEach((a) => {
+            if (a === animate || a.priority > animate.priority) {
+                return;
+            }
+            const fromProps = a.getStartProps();
+            this.propKeys.forEach(key => {
+                if (fromProps[key] != null) {
+                    a.preventAttr(key);
+                }
+            });
+        });
+    }
+    deleteSelfAttr(key) {
+        var _a;
+        delete this.props[key];
+        this.fromProps && delete this.fromProps[key];
+        const index = this.propKeys.indexOf(key);
+        if (index !== -1) {
+            this.propKeys.splice(index, 1);
+            (_a = this.interpolateUpdateFunctions) === null || _a === void 0 ? void 0 : _a.splice(index, 1);
+        }
+    }
+    trySyncStartProps() {
+        this.propKeys.forEach(key => {
+            this.fromProps[key] = this.animate.target.getComputedAttribute(key);
+        });
+    }
+    update(end, ratio, out) {
+        this.onStart();
+        if (!this.props || !this.propKeys) {
+            return;
+        }
+        const easedRatio = this.easing(ratio);
+        this.animate.interpolateUpdateFunction
+            ? this.animate.interpolateUpdateFunction(this.fromProps, this.props, easedRatio, this, this.target)
+            : this.interpolateUpdateFunctions.forEach((func, index) => {
+                if (!this.animate.validAttr(this.propKeys[index])) {
+                    return;
+                }
+                const key = this.propKeys[index];
+                const fromValue = this.fromProps[key];
+                const toValue = this.props[key];
+                func(key, fromValue, toValue, easedRatio, this, this.target);
+            });
+        this.onUpdate(end, easedRatio, out);
+    }
+    onUpdate(end, ratio, out) {
+    }
+    onEnd(cb) {
+        if (cb) {
+            this._endCb = cb;
+        }
+        else if (this._endCb) {
+            this.target.setAttributes(this.props);
+            this._endCb(this.animate, this);
+        }
+    }
+    getEndProps() {
+        return this.props;
+    }
+    getFromProps() {
+        return this.fromProps;
+    }
+    getMergedEndProps() {
+        return this.getEndProps();
+    }
+}
+class WaitStep extends Step {
+    constructor(type, props, duration, easing) {
+        super(type, props, duration, easing);
+    }
+    update(end, ratio, out) {
+        this.onStart();
+    }
+    determineInterpolateUpdateFunction() {
+        return;
+    }
+}
+
+class DefaultTimeline {
+    get animateCount() {
+        return this.animates.length;
+    }
+    constructor() {
+        this.animates = [];
+        this._playSpeed = 1;
+        this._totalDuration = 0;
+        this._startTime = 0;
+        this._currentTime = 0;
+        this._endAnimatePtr = -1;
+        this.id = Generator.GenAutoIncrementId();
+        this.animates = [];
+        this.paused = false;
+    }
+    isRunning() {
+        return !this.paused && this._endAnimatePtr >= 0;
+    }
+    forEachAccessAnimate(cb) {
+        for (let i = 0; i <= this._endAnimatePtr; i++) {
+            cb(this.animates[i], i);
+        }
+    }
+    addAnimate(animate) {
+        this.animates.push(animate);
+        this._endAnimatePtr++;
+        this.animates[this.animates.length - 1] = this.animates[this._endAnimatePtr];
+        this.animates[this._endAnimatePtr] = animate;
+        this._totalDuration = Math.max(this._totalDuration, animate.getStartTime() + animate.getDuration());
+    }
+    pause() {
+        this.paused = true;
+    }
+    resume() {
+        this.paused = false;
+    }
+    tick(delta) {
+        if (this.paused) {
+            return;
+        }
+        const scaledDelta = delta * this._playSpeed;
+        this._currentTime += scaledDelta;
+        this.forEachAccessAnimate((animate, i) => {
+            if (animate.status === AnimateStatus$1.END) {
+                this.removeAnimate(animate, true, i);
+            }
+            else if (animate.status === AnimateStatus$1.RUNNING || animate.status === AnimateStatus$1.INITIAL) {
+                animate.advance(scaledDelta);
+            }
+        });
+    }
+    clear() {
+        this.forEachAccessAnimate(animate => {
+            animate.release();
+        });
+        this.animates = [];
+        this._totalDuration = 0;
+    }
+    removeAnimate(animate, release = true, index) {
+        if (this._endAnimatePtr < 0) {
+            return;
+        }
+        if (release) {
+            animate._onRemove && animate._onRemove.forEach(cb => cb());
+            animate.release();
+        }
+        index = index !== null && index !== void 0 ? index : this.animates.indexOf(animate);
+        this.animates[index] = this.animates[this._endAnimatePtr];
+        this._endAnimatePtr--;
+        return;
+    }
+    recalculateTotalDuration() {
+        this._totalDuration = 0;
+        this.animates.forEach(animate => {
+            this._totalDuration = Math.max(this._totalDuration, animate.getStartTime() + animate.getDuration());
+        });
+    }
+    getTotalDuration() {
+        return this._totalDuration;
+    }
+    getPlaySpeed() {
+        return this._playSpeed;
+    }
+    setPlaySpeed(speed) {
+        this._playSpeed = speed;
+    }
+    getPlayState() {
+        if (this.paused) {
+            return 'paused';
+        }
+        if (this.animateCount === 0) {
+            return 'stopped';
+        }
+        return 'playing';
+    }
+    setStartTime(time) {
+        this._startTime = time;
+    }
+    getStartTime() {
+        return this._startTime;
+    }
+    getCurrentTime() {
+        return this._currentTime;
+    }
+    setCurrentTime(time) {
+        this._currentTime = time;
+    }
+}
+const defaultTimeline = new DefaultTimeline();
+defaultTimeline.isGlobal = true;
+
+class Animate {
+    constructor(id = Generator.GenAutoIncrementId(), timeline = defaultTimeline, slience) {
+        this.id = id;
+        this.status = AnimateStatus.INITIAL;
+        this._timeline = timeline;
+        timeline.addAnimate(this);
+        this.slience = slience;
+        this._startTime = 0;
+        this._duration = 0;
+        this._totalDuration = 0;
+        this._loopCount = 0;
+        this._currentLoop = 0;
+        this._bounce = false;
+        this._firstStep = null;
+        this._lastStep = null;
+        this._startProps = {};
+        this._endProps = {};
+        this._preventAttrs = new Set();
+        this.currentTime = 0;
+        this.interpolateUpdateFunction = null;
+        this.priority = 0;
+    }
+    getStartProps() {
+        return this._startProps;
+    }
+    getEndProps() {
+        return this._endProps;
+    }
+    setTimeline(timeline) {
+        this._timeline = timeline;
+    }
+    getTimeline() {
+        return this._timeline;
+    }
+    get timeline() {
+        return this._timeline;
+    }
+    bind(target) {
+        this.target = target;
+        if (this.target.onAnimateBind && !this.slience) {
+            this.target.onAnimateBind(this);
+        }
+        if (!this.target.animationAttribute) {
+            this.target.animationAttribute = {};
+        }
+        return this;
+    }
+    to(props, duration = 300, easing = 'linear') {
+        const step = new Step(AnimateStepType.to, props, duration, easing);
+        this.updateStepAfterAppend(step);
+        step.bind(this.target, this);
+        return this;
+    }
+    wait(delay) {
+        const step = new WaitStep(AnimateStepType.wait, {}, delay, 'linear');
+        this.updateStepAfterAppend(step);
+        step.bind(this.target, this);
+        return this;
+    }
+    updateStepAfterAppend(step) {
+        if (!this._firstStep) {
+            this._firstStep = step;
+            this._lastStep = step;
+        }
+        else {
+            this._lastStep.append(step);
+            this._lastStep = step;
+        }
+        this.parseStepProps(step);
+        this.updateDuration();
+    }
+    parseStepProps(step) {
+        if (!this._lastStep) {
+            return;
+        }
+        step.propKeys = step.propKeys || Object.keys(step.props);
+        Object.keys(this._endProps).forEach(key => {
+            var _a;
+            step.props[key] = (_a = step.props[key]) !== null && _a !== void 0 ? _a : this._endProps[key];
+        });
+        step.propKeys.forEach(key => {
+            this._endProps[key] = step.props[key];
+        });
+    }
+    reSyncProps() {
+        if (!this._lastStep) {
+            return;
+        }
+        this._endProps = {};
+        let currentStep = this._firstStep;
+        while (currentStep) {
+            Object.keys(this._endProps).forEach(key => {
+                var _a;
+                currentStep.props[key] = (_a = currentStep.props[key]) !== null && _a !== void 0 ? _a : this._endProps[key];
+            });
+            currentStep.propKeys.forEach(key => {
+                this._endProps[key] = currentStep.props[key];
+            });
+            currentStep = currentStep.next;
+        }
+    }
+    from(props, duration = 300, easing = 'linear') {
+        const step = new Step(AnimateStepType.from, props, duration, easing);
+        if (!this._firstStep) {
+            this._firstStep = step;
+            this._lastStep = step;
+        }
+        else {
+            this._lastStep.append(step);
+            this._lastStep = step;
+        }
+        this.updateDuration();
+        return this;
+    }
+    play(customAnimate) {
+        this.updateStepAfterAppend(customAnimate);
+        customAnimate.bind(this.target, this);
+        return this;
+    }
+    pause() {
+        if (this.status === AnimateStatus.RUNNING) {
+            this.status = AnimateStatus.PAUSED;
+        }
+    }
+    resume() {
+        if (this.status === AnimateStatus.PAUSED) {
+            this.status = AnimateStatus.RUNNING;
+        }
+    }
+    onStart(cb) {
+        var _a;
+        if (cb) {
+            if (!this._onStart) {
+                this._onStart = [];
+            }
+            this._onStart.push(cb);
+        }
+        else {
+            (_a = this._onStart) === null || _a === void 0 ? void 0 : _a.forEach(cb => cb());
+            Object.keys(this._endProps).forEach(key => {
+                this._startProps[key] = this.target.getComputedAttribute(key);
+            });
+        }
+    }
+    onEnd(cb) {
+        var _a;
+        if (cb) {
+            if (!this._onEnd) {
+                this._onEnd = [];
+            }
+            this._onEnd.push(cb);
+        }
+        else {
+            (_a = this._onEnd) === null || _a === void 0 ? void 0 : _a.forEach(cb => cb());
+        }
+    }
+    onFrame(cb) {
+        if (cb) {
+            if (!this._onFrame) {
+                this._onFrame = [];
+            }
+            this._onFrame.push(cb);
+        }
+    }
+    onRemove(cb) {
+        var _a;
+        if (cb) {
+            if (!this._onRemove) {
+                this._onRemove = [];
+            }
+            this._onRemove.push(cb);
+        }
+        else {
+            (_a = this._onRemove) === null || _a === void 0 ? void 0 : _a.forEach(cb => cb());
+        }
+    }
+    preventAttr(key) {
+        this._preventAttrs.add(key);
+        delete this._startProps[key];
+        delete this._endProps[key];
+        let step = this._firstStep;
+        while (step) {
+            step.deleteSelfAttr(key);
+            step = step.next;
+        }
+    }
+    preventAttrs(keys) {
+        keys.forEach(key => this._preventAttrs.add(key));
+    }
+    validAttr(key) {
+        return !this._preventAttrs.has(key);
+    }
+    runCb(cb) {
+        var _a;
+        (_a = this._lastStep) === null || _a === void 0 ? void 0 : _a.onEnd(cb);
+        return this;
+    }
+    startAt(t) {
+        this._startTime = t;
+        return this;
+    }
+    customInterpolate(key, ratio, from, to, target, ret) {
+        return false;
+    }
+    getFromValue() {
+        return this._startProps;
+    }
+    getToValue() {
+        return this._endProps;
+    }
+    stop(type) {
+        this.status = AnimateStatus.END;
+        this.onEnd();
+        if (!this.target) {
+            return;
+        }
+        if (type === 'start') {
+            this.target.setAttributes(this._startProps);
+        }
+        else if (type === 'end') {
+            this.target.setAttributes(this._endProps);
+        }
+        else if (type) {
+            this.target.setAttributes(type);
+        }
+    }
+    release() {
+        this.status = AnimateStatus.END;
+        if (this._onRemove) {
+            this._onRemove.forEach(cb => cb());
+        }
+        this._onStart = [];
+        this._onFrame = [];
+        this._onEnd = [];
+        this._onRemove = [];
+    }
+    getDuration() {
+        return this._duration;
+    }
+    getStartTime() {
+        return this._startTime;
+    }
+    afterAll(list) {
+        if (!list || list.length === 0) {
+            return this;
+        }
+        let maxEndTime = 0;
+        list.forEach(animate => {
+            const endTime = animate.getStartTime() + animate.getTotalDuration();
+            maxEndTime = Math.max(maxEndTime, endTime);
+        });
+        return this.startAt(maxEndTime);
+    }
+    after(animate) {
+        if (!animate) {
+            return this;
+        }
+        const endTime = animate.getStartTime() + animate.getTotalDuration();
+        return this.startAt(endTime);
+    }
+    parallel(animate) {
+        if (!animate) {
+            return this;
+        }
+        this.startAt(animate.getStartTime());
+        return this;
+    }
+    loop(n) {
+        if (n === true) {
+            n = Infinity;
+        }
+        else if (n === false) {
+            n = 0;
+        }
+        this._loopCount = n;
+        this.updateDuration();
+        return this;
+    }
+    bounce(b) {
+        this._bounce = b;
+        return this;
+    }
+    advance(delta) {
+        var _a;
+        if (this.status === AnimateStatus.END) {
+            console.warn('aaa 动画已经结束，不能推进');
+            return;
+        }
+        const nextTime = this.currentTime + delta;
+        if (nextTime < this._startTime) {
+            this.currentTime = nextTime;
+            return;
+        }
+        if (nextTime >= this._startTime + this._totalDuration) {
+            (_a = this._lastStep) === null || _a === void 0 ? void 0 : _a.onEnd();
+            this.onEnd();
+            this.status = AnimateStatus.END;
+            return;
+        }
+        this.status = AnimateStatus.RUNNING;
+        if (this.currentTime <= this._startTime) {
+            this.onStart();
+        }
+        this.currentTime = nextTime;
+        let cycleTime = nextTime - this._startTime;
+        let newLoop = false;
+        let bounceTime = false;
+        if (this._loopCount > 0) {
+            cycleTime = (nextTime - this._startTime) % this._duration;
+            const currentLoop = Math.floor((nextTime - this._startTime) / this._duration);
+            newLoop = currentLoop > this._currentLoop;
+            this._currentLoop = currentLoop;
+            bounceTime = this._bounce && currentLoop % 2 === 1;
+            if (bounceTime) {
+                cycleTime = this._duration - cycleTime;
+            }
+        }
+        if (newLoop && !bounceTime) {
+            this.target.setAttributes(this._startProps);
+        }
+        let targetStep = null;
+        if (this._lastStep === this._firstStep) {
+            targetStep = this._firstStep;
+        }
+        else {
+            let currentStep = this._firstStep;
+            while (currentStep) {
+                const stepStartTime = currentStep.getStartTime();
+                const stepDuration = currentStep.getDuration();
+                const stepEndTime = stepStartTime + stepDuration;
+                if (cycleTime >= stepStartTime && cycleTime <= stepEndTime) {
+                    targetStep = currentStep;
+                    break;
+                }
+                currentStep = currentStep.next;
+            }
+        }
+        if (!targetStep) {
+            return;
+        }
+        const stepStartTime = targetStep.getStartTime();
+        const stepDuration = targetStep.getDuration();
+        const ratio = (cycleTime - stepStartTime) / stepDuration;
+        const isEnd = ratio >= 1;
+        targetStep.update(isEnd, ratio, {});
+        if (isEnd) {
+            targetStep.onEnd();
+        }
+    }
+    updateDuration() {
+        if (!this._lastStep) {
+            this._duration = 0;
+            return;
+        }
+        this._duration = this._lastStep.getStartTime() + this._lastStep.getDuration();
+        this._totalDuration = this._duration * (this._loopCount + 1);
+    }
+    getTotalDuration() {
+        return this._totalDuration;
+    }
+    getLoop() {
+        return this._loopCount;
+    }
+}
+
+var STATUS;
+(function (STATUS) {
+    STATUS[STATUS["INITIAL"] = 0] = "INITIAL";
+    STATUS[STATUS["RUNNING"] = 1] = "RUNNING";
+    STATUS[STATUS["PAUSE"] = 2] = "PAUSE";
+})(STATUS || (STATUS = {}));
+
+const performanceRAF = new PerformanceRAF();
+class RAFTickHandler {
+    constructor() {
+        this.released = false;
+    }
+    tick(interval, cb) {
+        performanceRAF.addAnimationFrameCb(() => {
+            if (this.released) {
+                return;
+            }
+            cb(this);
+        });
+    }
+    release() {
+        this.released = true;
+    }
+    getTime() {
+        return Date.now();
+    }
+}
+class DefaultTicker extends EventEmitter {
+    constructor(stage) {
+        super();
+        this.interval = 16;
+        this.lastFrameTime = -1;
+        this.lastExecutionTime = -1;
+        this.tickCounts = 0;
+        this.timelines = [];
+        this.autoStop = true;
+        this.handleTick = (handler, params) => {
+            const { once = false } = params !== null && params !== void 0 ? params : {};
+            if (this.ifCanStop()) {
+                this.stop();
+                return;
+            }
+            const currentTime = handler.getTime();
+            const timeFromLastExecution = this.lastExecutionTime < 0 ? this.interval : currentTime - this.lastExecutionTime;
+            if (timeFromLastExecution >= this.interval) {
+                this._handlerTick();
+                this.lastExecutionTime = currentTime;
+            }
+            if (!once) {
+                handler.tick(this.interval, this.handleTick);
+            }
+        };
+        this._handlerTick = () => {
+            const tickerHandler = this.tickerHandler;
+            const time = tickerHandler.getTime();
+            let delta = 0;
+            if (this.lastFrameTime >= 0) {
+                delta = time - this.lastFrameTime;
+            }
+            this.lastFrameTime = time;
+            if (this.status !== STATUS.RUNNING) {
+                return;
+            }
+            this.tickCounts++;
+            this.timelines.forEach(timeline => {
+                timeline.tick(delta);
+            });
+            this.emit('tick', delta);
+        };
+        this.init();
+        this.lastFrameTime = -1;
+        this.lastExecutionTime = -1;
+        this.tickCounts = 0;
+        this.stage = stage;
+        this.autoStop = true;
+    }
+    init() {
+        this.interval = 16;
+        this.status = STATUS.INITIAL;
+        application.global.hooks.onSetEnv.tap('graph-ticker', () => {
+            this.initHandler();
+        });
+        if (application.global.env) {
+            this.initHandler();
+        }
+    }
+    addTimeline(timeline) {
+        this.timelines.push(timeline);
+    }
+    remTimeline(timeline) {
+        this.timelines = this.timelines.filter(t => t !== timeline);
+    }
+    getTimelines() {
+        return this.timelines;
+    }
+    initHandler() {
+        this.setupTickHandler();
+    }
+    setupTickHandler() {
+        const handler = new RAFTickHandler();
+        if (this.tickerHandler) {
+            this.tickerHandler.release();
+        }
+        this.tickerHandler = handler;
+        return true;
+    }
+    setInterval(interval) {
+        this.interval = interval;
+    }
+    getInterval() {
+        return this.interval;
+    }
+    setFPS(fps) {
+        this.setInterval(1000 / fps);
+    }
+    getFPS() {
+        return 1000 / this.interval;
+    }
+    tick(interval) {
+        this.tickerHandler.tick(interval, (handler) => {
+            this.handleTick(handler, { once: true });
+        });
+    }
+    tickTo(t) {
+        if (!this.tickerHandler.tickTo) {
+            return;
+        }
+        this.tickerHandler.tickTo(t, (handler) => {
+            this.handleTick(handler, { once: true });
+        });
+    }
+    pause() {
+        if (this.status === STATUS.INITIAL) {
+            return false;
+        }
+        this.status = STATUS.PAUSE;
+        return true;
+    }
+    resume() {
+        if (this.status === STATUS.INITIAL) {
+            return false;
+        }
+        this.status = STATUS.RUNNING;
+        return true;
+    }
+    ifCanStop() {
+        if (this.autoStop) {
+            if (!this.timelines.length) {
+                return true;
+            }
+            if (this.timelines.every(timeline => !timeline.isRunning())) {
+                return true;
+            }
+        }
+        return false;
+    }
+    start(force = false) {
+        if (this.status === STATUS.RUNNING) {
+            return false;
+        }
+        if (!this.tickerHandler) {
+            return false;
+        }
+        if (!force) {
+            if (this.status === STATUS.PAUSE) {
+                return false;
+            }
+            if (this.ifCanStop()) {
+                return false;
+            }
+        }
+        this.status = STATUS.RUNNING;
+        this.tickerHandler.tick(0, this.handleTick);
+        return true;
+    }
+    stop() {
+        this.status = STATUS.INITIAL;
+        this.setupTickHandler();
+        this.lastFrameTime = -1;
+        this.lastExecutionTime = -1;
+    }
+    trySyncTickStatus() {
+        if (this.status === STATUS.INITIAL && this.timelines.some(timeline => timeline.isRunning())) {
+            this.start();
+        }
+        else if (this.status === STATUS.RUNNING && this.timelines.every(timeline => !timeline.isRunning())) {
+            this.stop();
+        }
+    }
+    release() {
+        var _a;
+        this.stop();
+        this.timelines = [];
+        (_a = this.tickerHandler) === null || _a === void 0 ? void 0 : _a.release();
+        this.tickerHandler = null;
+        this.lastExecutionTime = -1;
+    }
+}
+
+class ManualTickHandler {
+    constructor() {
+        this.released = false;
+        this.startTime = -1;
+        this.currentTime = -1;
+    }
+    tick(interval, cb) {
+        if (this.startTime < 0) {
+            this.startTime = 0;
+        }
+        this.currentTime = this.startTime + interval;
+        cb(this);
+    }
+    release() {
+        this.released = true;
+    }
+    getTime() {
+        return this.currentTime;
+    }
+}
+class ManualTicker extends DefaultTicker {
+    setupTickHandler() {
+        const handler = new ManualTickHandler();
+        if (this.tickerHandler) {
+            this.tickerHandler.release();
+        }
+        this.tickerHandler = handler;
+        return true;
+    }
+    getTime() {
+        return this.tickerHandler.getTime();
+    }
+}
+
+function generatorPathEasingFunc(path) {
+    const customPath = new CustomPath2D();
+    customPath.setCtx(new CurveContext(customPath));
+    customPath.fromString(path, 0, 0, 1, 1);
+    return (x) => {
+        return customPath.getYAt(x);
+    };
+}
+
+class AnimationTransitionRegistry {
+    constructor() {
+        this.transitions = new Map();
+        this.registerDefaultTransitions();
+    }
+    static getInstance() {
+        if (!AnimationTransitionRegistry.instance) {
+            AnimationTransitionRegistry.instance = new AnimationTransitionRegistry();
+        }
+        return AnimationTransitionRegistry.instance;
+    }
+    registerDefaultTransitions() {
+        this.registerTransition('appear', '*', () => ({
+            allowTransition: true,
+            stopOriginalTransition: false
+        }));
+        this.registerTransition('appear', 'appear', () => ({
+            allowTransition: false,
+            stopOriginalTransition: false
+        }));
+        this.registerTransition('appear', 'disappear', () => ({
+            allowTransition: true,
+            stopOriginalTransition: true
+        }));
+        this.registerTransition('appear', 'exit', () => ({
+            allowTransition: true,
+            stopOriginalTransition: true
+        }));
+        this.registerTransition('normal', '*', () => ({
+            allowTransition: true,
+            stopOriginalTransition: false
+        }));
+        this.registerTransition('normal', 'normal', () => ({
+            allowTransition: false,
+            stopOriginalTransition: false
+        }));
+        this.registerTransition('normal', 'disappear', () => ({
+            allowTransition: true,
+            stopOriginalTransition: true
+        }));
+        this.registerTransition('normal', 'exit', () => ({
+            allowTransition: true,
+            stopOriginalTransition: true
+        }));
+        this.registerTransition('exit', '*', () => ({
+            allowTransition: false,
+            stopOriginalTransition: false
+        }));
+        this.registerTransition('exit', 'disappear', () => ({
+            allowTransition: true,
+            stopOriginalTransition: true
+        }));
+        this.registerTransition('exit', 'enter', () => ({
+            allowTransition: true,
+            stopOriginalTransition: true
+        }));
+        this.registerTransition('exit', 'exit', () => ({
+            allowTransition: false,
+            stopOriginalTransition: false
+        }));
+        this.registerTransition('enter', '*', () => ({
+            allowTransition: true,
+            stopOriginalTransition: false
+        }));
+        this.registerTransition('enter', 'enter', () => ({
+            allowTransition: false,
+            stopOriginalTransition: false
+        }));
+        this.registerTransition('enter', 'disappear', () => ({
+            allowTransition: true,
+            stopOriginalTransition: true
+        }));
+        this.registerTransition('enter', 'exit', () => ({
+            allowTransition: true,
+            stopOriginalTransition: true
+        }));
+        this.registerTransition('disappear', '*', () => ({
+            allowTransition: false,
+            stopOriginalTransition: false
+        }));
+        this.registerTransition('disappear', 'appear', () => ({
+            allowTransition: true,
+            stopOriginalTransition: true
+        }));
+    }
+    isTransitionAllowed(fromState, toState, graphic) {
+        var _a, _b, _c, _d;
+        let func = (_a = this.transitions.get(fromState)) === null || _a === void 0 ? void 0 : _a.get(toState);
+        if (func) {
+            return func(graphic, fromState);
+        }
+        func = (_b = this.transitions.get(fromState)) === null || _b === void 0 ? void 0 : _b.get('*');
+        if (func) {
+            return func(graphic, fromState);
+        }
+        func = (_c = this.transitions.get('*')) === null || _c === void 0 ? void 0 : _c.get(toState);
+        if (func) {
+            return func(graphic, fromState);
+        }
+        func = (_d = this.transitions.get('*')) === null || _d === void 0 ? void 0 : _d.get('*');
+        if (func) {
+            return func(graphic, fromState);
+        }
+        return {
+            allowTransition: true,
+            stopOriginalTransition: true
+        };
+    }
+    registerTransition(fromState, toState, transition) {
+        let fromStateMap = this.transitions.get(fromState);
+        if (!fromStateMap) {
+            fromStateMap = new Map();
+            this.transitions.set(fromState, fromStateMap);
+        }
+        fromStateMap.set(toState, transition);
+    }
+}
+const transitionRegistry = AnimationTransitionRegistry.getInstance();
+
+class AnimateExecutor {
+    static registerBuiltInAnimate(name, animate) {
+        AnimateExecutor.builtInAnimateMap[name] = animate;
+    }
+    constructor(target) {
+        this._animates = [];
+        this._startCallbacks = [];
+        this._endCallbacks = [];
+        this._started = false;
+        this._activeCount = 0;
+        this._target = target;
+    }
+    onStart(cb) {
+        if (cb) {
+            this._startCallbacks.push(cb);
+            if (this._started && this._activeCount > 0) {
+                cb();
+            }
+        }
+        else {
+            this._startCallbacks.forEach(cb => {
+                cb();
+            });
+        }
+    }
+    onEnd(cb) {
+        if (cb) {
+            this._endCallbacks.push(cb);
+        }
+        else {
+            this._endCallbacks.forEach(cb => {
+                cb();
+            });
+        }
+    }
+    _trackAnimation(animate) {
+        this._animates.push(animate);
+        this._activeCount++;
+        if (this._activeCount === 1 && !this._started) {
+            this._started = true;
+            this.onStart();
+        }
+        animate.onEnd(() => {
+            this._activeCount--;
+            const index = this._animates.indexOf(animate);
+            if (index >= 0) {
+                this._animates.splice(index, 1);
+            }
+            if (this._activeCount === 0 && this._started) {
+                this._started = false;
+                this.onEnd();
+            }
+        });
+    }
+    parseParams(params) {
+        const isTimeline = 'timeSlices' in params;
+        const totalTime = this.resolveValue(params.totalTime, undefined, undefined);
+        const startTime = this.resolveValue(params.startTime, undefined, 0);
+        const parsedParams = cloneDeep(params);
+        parsedParams.oneByOneDelay = 0;
+        parsedParams.startTime = startTime;
+        parsedParams.totalTime = totalTime;
+        const oneByOne = this.resolveValue(params.oneByOne, undefined, false);
+        if (isTimeline) {
+            const timeSlices = parsedParams.timeSlices;
+            if (!isArray(timeSlices)) {
+                parsedParams.timeSlices = [timeSlices];
+            }
+            let sliceTime = 0;
+            parsedParams.timeSlices.forEach(slice => {
+                slice.delay = this.resolveValue(slice.delay, undefined, 0);
+                slice.delayAfter = this.resolveValue(slice.delayAfter, undefined, 0);
+                slice.duration = this.resolveValue(slice.duration, undefined, 300);
+                sliceTime += slice.delay + slice.duration + slice.delayAfter;
+            });
+            let oneByOneDelay = 0;
+            let oneByOneTime = 0;
+            if (oneByOne) {
+                oneByOneTime = Number(oneByOne);
+                oneByOneDelay = oneByOneTime;
+            }
+            parsedParams.oneByOne = oneByOneTime;
+            parsedParams.oneByOneDelay = oneByOneDelay;
+            if (totalTime) {
+                const _totalTime = sliceTime + oneByOneDelay * (this._target.count - 2);
+                const scale = totalTime ? totalTime / _totalTime : 1;
+                parsedParams.timeSlices.forEach(slice => {
+                    slice.delay = slice.delay * scale;
+                    slice.delayAfter = slice.delayAfter * scale;
+                    slice.duration = slice.duration * scale;
+                });
+                parsedParams.oneByOne = oneByOneTime * scale;
+                parsedParams.oneByOneDelay = oneByOneDelay * scale;
+                parsedParams.startTime = startTime * scale;
+            }
+        }
+        else {
+            const delay = this.resolveValue(params.delay, undefined, 0);
+            const delayAfter = this.resolveValue(params.delayAfter, undefined, 0);
+            const duration = this.resolveValue(params.duration, undefined, 300);
+            let oneByOneDelay = 0;
+            let oneByOneTime = 0;
+            if (oneByOne) {
+                oneByOneTime = Number(oneByOne);
+                oneByOneDelay = duration + oneByOneTime;
+            }
+            parsedParams.oneByOne = oneByOneTime;
+            parsedParams.oneByOneDelay = oneByOneDelay;
+            if (totalTime) {
+                const _totalTime = delay + delayAfter + duration + oneByOneDelay * (this._target.count - 2);
+                const scale = totalTime ? totalTime / _totalTime : 1;
+                parsedParams.delay = delay * scale;
+                parsedParams.delayAfter = delayAfter * scale;
+                parsedParams.duration = duration * scale;
+                parsedParams.oneByOne = oneByOneTime * scale;
+                parsedParams.oneByOneDelay = oneByOneDelay * scale;
+                parsedParams.startTime = startTime;
+            }
+        }
+        return parsedParams;
+    }
+    execute(params) {
+        const isTimeline = 'timeSlices' in params;
+        let filteredChildren;
+        if (isTimeline && params.partitioner) {
+            filteredChildren = (filteredChildren !== null && filteredChildren !== void 0 ? filteredChildren : this._target.getChildren()).filter(child => {
+                var _a;
+                return params.partitioner((_a = child.context) === null || _a === void 0 ? void 0 : _a.data, child, {});
+            });
+        }
+        if (isTimeline && params.sort) {
+            filteredChildren = filteredChildren !== null && filteredChildren !== void 0 ? filteredChildren : this._target.getChildren();
+            filteredChildren.sort((a, b) => {
+                var _a, _b;
+                return params.sort((_a = a.context) === null || _a === void 0 ? void 0 : _a.data, (_b = b.context) === null || _b === void 0 ? void 0 : _b.data, a, b, {});
+            });
+        }
+        const parsedParams = this.parseParams(params);
+        const cb = isTimeline
+            ? (child, index, count) => {
+                const animate = this.executeTimelineItem(parsedParams, child, index, count);
+                if (animate) {
+                    this._trackAnimation(animate);
+                }
+            }
+            : (child, index, count) => {
+                const animate = this.executeTypeConfigItem(parsedParams, child, index, count);
+                if (animate) {
+                    this._trackAnimation(animate);
+                }
+            };
+        if (filteredChildren) {
+            filteredChildren.forEach((child, index) => cb(child, index, filteredChildren.length));
+        }
+        else if (this._target.count <= 1) {
+            cb(this._target, 0, 1);
+        }
+        else {
+            this._target.forEachChildren((child, index) => cb(child, index, this._target.count - 1));
+        }
+        return;
+    }
+    executeTypeConfigItem(params, graphic, index, count) {
+        var _a, _b, _c, _d, _e, _f;
+        const { type, channel, customParameters, easing = 'linear', delay = 0, delayAfter = 0, duration = 300, startTime = 0, oneByOneDelay = 0, loop, bounce, priority = 0, options, controlOptions } = params;
+        const custom = (_a = params.custom) !== null && _a !== void 0 ? _a : AnimateExecutor.builtInAnimateMap[type];
+        const animate = graphic.animate();
+        animate.priority = priority;
+        const delayValue = delay;
+        const datum = (_c = (_b = graphic.context) === null || _b === void 0 ? void 0 : _b.data) === null || _c === void 0 ? void 0 : _c[0];
+        const indexKey = (_d = graphic.context) === null || _d === void 0 ? void 0 : _d.indexKey;
+        if (datum && indexKey) {
+            index = (_e = datum[indexKey]) !== null && _e !== void 0 ? _e : index;
+        }
+        animate.startAt(startTime);
+        animate.wait(index * oneByOneDelay);
+        if (delayValue > 0) {
+            animate.wait(delayValue);
+        }
+        const props = (_f = params.to) !== null && _f !== void 0 ? _f : this.createPropsFromChannel(channel, graphic);
+        this._handleRunAnimate(animate, custom, props, duration, easing, customParameters, options, type, graphic);
+        if (oneByOneDelay) {
+            animate.wait(oneByOneDelay * (count - index - 1));
+        }
+        if (delayAfter > 0) {
+            animate.wait(delayAfter);
+        }
+        if (loop && loop > 0) {
+            animate.loop(loop);
+        }
+        if (bounce) {
+            animate.bounce(true);
+        }
+        return animate;
+    }
+    _handleRunAnimate(animate, custom, props, duration, easing, customParameters, options, type, graphic) {
+        if (custom) {
+            const customParams = this.resolveValue(customParameters, graphic, {});
+            const objOptions = isFunction(options)
+                ? options.call(null, customParameters.data && customParameters.data[0], graphic, customParameters)
+                : options;
+            customParams.options = objOptions;
+            if (isFunction(custom)) {
+                if (/^class\s/.test(Function.prototype.toString.call(custom))) {
+                    this.createCustomAnimation(animate, custom, props, duration, easing, customParams);
+                }
+                else {
+                    this.createCustomInterpolatorAnimation(animate, custom, props, duration, easing, customParams);
+                }
+            }
+        }
+        else if (type === 'to') {
+            animate.to(props, duration, easing);
+        }
+        else if (type === 'from') {
+            animate.from(props, duration, easing);
+        }
+    }
+    executeTimelineItem(params, graphic, index, count) {
+        var _a, _b, _c, _d;
+        const { timeSlices, startTime = 0, loop, bounce, oneByOneDelay, priority, controlOptions } = params;
+        const datum = (_b = (_a = graphic.context) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b[0];
+        const indexKey = (_c = graphic.context) === null || _c === void 0 ? void 0 : _c.indexKey;
+        if (datum && indexKey) {
+            index = (_d = datum[indexKey]) !== null && _d !== void 0 ? _d : index;
+        }
+        const animate = graphic.animate();
+        animate.priority = priority;
+        animate.startAt(startTime);
+        animate.wait(index * oneByOneDelay);
+        if (loop && loop > 0) {
+            animate.loop(loop);
+        }
+        if (bounce) {
+            animate.bounce(true);
+        }
+        const slices = Array.isArray(timeSlices) ? timeSlices : [timeSlices];
+        slices.forEach(slice => {
+            this.applyTimeSliceToAnimate(slice, animate, graphic);
+        });
+        if (oneByOneDelay) {
+            animate.wait(oneByOneDelay * (count - index - 1));
+        }
+        return animate;
+    }
+    applyTimeSliceToAnimate(slice, animate, graphic) {
+        const { effects, duration = 300, delay = 0, delayAfter = 0 } = slice;
+        const delayValue = delay;
+        const delayAfterValue = delayAfter;
+        if (delayValue > 0) {
+            animate.wait(delayValue);
+        }
+        const effectsArray = Array.isArray(effects) ? effects : [effects];
+        effectsArray.forEach(effect => {
+            var _a;
+            const { type = 'to', channel, customParameters, easing = 'linear', options } = effect;
+            const custom = (_a = effect.custom) !== null && _a !== void 0 ? _a : AnimateExecutor.builtInAnimateMap[type];
+            const props = this.createPropsFromChannel(channel, graphic);
+            this._handleRunAnimate(animate, custom, props, duration, easing, customParameters, options, type, graphic);
+        });
+        if (delayAfterValue > 0) {
+            animate.wait(delayAfterValue);
+        }
+    }
+    createCustomInterpolatorAnimation(animate, interpolator, props, duration, easing, customParams) {
+        const to = props;
+        Object.keys(to).forEach(key => {
+            animate.target.getComputedAttribute(key);
+        });
+        animate.interpolateUpdateFunction = (from, to, ratio, step, target) => {
+            interpolator(ratio, from, to, step, target, animate.target, customParams);
+        };
+        animate.to(props, duration, easing);
+    }
+    createCustomAnimation(animate, CustomAnimateConstructor, props, duration, easing, customParams) {
+        const from = {};
+        const to = props;
+        Object.keys(to).forEach(key => {
+            from[key] = animate.target.getComputedAttribute(key);
+        });
+        const customAnimate = new CustomAnimateConstructor(from, to, duration, easing, customParams);
+        animate.play(customAnimate);
+    }
+    createPropsFromChannel(channel, graphic) {
+        const props = {};
+        if (!channel) {
+            return props;
+        }
+        if (!Array.isArray(channel)) {
+            Object.entries(channel).forEach(([key, config]) => {
+                var _a;
+                if (config.to !== undefined) {
+                    if (typeof config.to === 'function') {
+                        props[key] = config.to((_a = graphic.context) === null || _a === void 0 ? void 0 : _a.data, graphic, {});
+                    }
+                    else {
+                        props[key] = config.to;
+                    }
+                }
+            });
+        }
+        return props;
+    }
+    resolveValue(value, graphic, defaultValue) {
+        var _a;
+        if (value === undefined) {
+            return defaultValue;
+        }
+        if (typeof value === 'function' && graphic) {
+            return value((_a = graphic.context) === null || _a === void 0 ? void 0 : _a.data, graphic, {});
+        }
+        return value;
+    }
+    executeItem(params, graphic, index = 0, count = 1) {
+        if (!graphic) {
+            return null;
+        }
+        const isTimeline = 'timeSlices' in params;
+        let animate = null;
+        if (isTimeline) {
+            animate = this.executeTimelineItem(params, graphic, index, count);
+        }
+        else {
+            animate = this.executeTypeConfigItem(params, graphic, index, count);
+        }
+        if (animate) {
+            this._trackAnimation(animate);
+        }
+        return animate;
+    }
+    stop(type) {
+        while (this._animates.length > 0) {
+            const animate = this._animates.pop();
+            animate === null || animate === void 0 ? void 0 : animate.stop(type);
+        }
+        this._animates = [];
+        this._activeCount = 0;
+        if (this._started) {
+            this._started = false;
+            this.onEnd();
+        }
+    }
+}
+AnimateExecutor.builtInAnimateMap = {};
+
+class AnimationStateStore {
+    constructor(graphic) {
+        this.graphic = graphic;
+    }
+    registerState(state) {
+        if (!this.states) {
+            this.states = new Map();
+        }
+        this.states.set(state.name, state);
+    }
+    clearStates() {
+        var _a;
+        (_a = this.states) === null || _a === void 0 ? void 0 : _a.clear();
+    }
+}
+class AnimationStateManager {
+    constructor(graphic) {
+        this.stateList = null;
+        this.graphic = graphic;
+    }
+    applyState(nextState, animationConfig, callback) {
+        const registry = AnimationTransitionRegistry.getInstance();
+        const shouldStopState = [];
+        const shouldApplyState = [];
+        if (!(this.stateList && this.stateList.length)) {
+            nextState.forEach((state, index) => {
+                shouldApplyState.push({
+                    state,
+                    animationConfig: animationConfig[index].animation,
+                    executor: new AnimateExecutor(this.graphic)
+                });
+            });
+        }
+        else {
+            nextState.forEach((state, index) => {
+                const result = {
+                    allowTransition: true,
+                    stopOriginalTransition: true
+                };
+                this.stateList.forEach(currState => {
+                    const _result = registry.isTransitionAllowed(currState.state, state, this.graphic);
+                    result.allowTransition = result.allowTransition && _result.allowTransition;
+                });
+                if (result.allowTransition) {
+                    shouldApplyState.push({
+                        state,
+                        animationConfig: animationConfig[index].animation,
+                        executor: new AnimateExecutor(this.graphic)
+                    });
+                    this.stateList.forEach(currState => {
+                        const _result = registry.isTransitionAllowed(currState.state, state, this.graphic);
+                        if (_result.stopOriginalTransition) {
+                            shouldStopState.push(currState);
+                        }
+                    });
+                }
+            });
+        }
+        shouldStopState.forEach(state => {
+            state.executor.stop();
+        });
+        if (shouldApplyState.length) {
+            shouldApplyState[0].executor.execute(shouldApplyState[0].animationConfig);
+            for (let i = 0; i < shouldApplyState.length; i++) {
+                const nextState = shouldApplyState[i + 1];
+                const currentState = shouldApplyState[i];
+                currentState.executor.onEnd(() => {
+                    if (nextState) {
+                        nextState.executor.execute(nextState.animationConfig);
+                    }
+                    this.stateList = this.stateList.filter(state => state !== currentState);
+                    if (i === shouldApplyState.length - 1 && callback) {
+                        callback(false);
+                    }
+                });
+            }
+        }
+        else if (callback) {
+            callback(true);
+        }
+        if (this.stateList) {
+            this.stateList = this.stateList.filter(state => !shouldStopState.includes(state));
+        }
+        else {
+            this.stateList = [];
+        }
+        this.stateList.push(...shouldApplyState);
+    }
+    stopState(state, type) {
+        var _a;
+        const stateInfo = (_a = this.stateList) === null || _a === void 0 ? void 0 : _a.find(stateInfo => stateInfo.state === state);
+        if (stateInfo) {
+            stateInfo.executor.stop(type);
+        }
+    }
+    clearState() {
+        var _a;
+        (_a = this.stateList) === null || _a === void 0 ? void 0 : _a.forEach(state => {
+            state.executor.stop();
+        });
+        this.stateList = null;
+    }
+}
+
+class GraphicStateExtension {
+    _getAnimationStateManager(graphic) {
+        if (!graphic._animationStateManager) {
+            graphic._animationStateManager = new AnimationStateManager(graphic);
+        }
+        return graphic._animationStateManager;
+    }
+    _getAnimationStateStore(graphic) {
+        if (!graphic._animationStateStore) {
+            graphic._animationStateStore = new AnimationStateStore(graphic);
+        }
+        return graphic._animationStateStore;
+    }
+    registerAnimationState(state) {
+        this._getAnimationStateStore(this).registerState(state);
+        return this;
+    }
+    applyAnimationState(state, animationConfig, callback) {
+        this._getAnimationStateManager(this).applyState(state, animationConfig, callback);
+        return this;
+    }
+    stopAnimationState(state, type) {
+        this._getAnimationStateManager(this).stopState(state, type);
+        return this;
+    }
+    clearAnimationStates() {
+        this._getAnimationStateManager(this).clearState();
+        return this;
+    }
+    static extend(graphic) {
+        const extension = new GraphicStateExtension();
+        extension._getAnimationStateManager(graphic);
+        return graphic;
+    }
+}
+
+class AnimateExtension {
+    constructor() {
+        this.animatedAttribute = null;
+    }
+    getAttributes(final = false) {
+        if (final) {
+            this.computeAnimatedAttribute();
+            return this.getFinalAttribute();
+        }
+        return this.attribute;
+    }
+    animate(params) {
+        var _a, _b, _c;
+        if (!this.animates) {
+            this.animates = new Map();
+        }
+        const animate = new Animate(params === null || params === void 0 ? void 0 : params.id, (_b = (_a = params === null || params === void 0 ? void 0 : params.timeline) !== null && _a !== void 0 ? _a : (this.stage && this.stage.getTimeline())) !== null && _b !== void 0 ? _b : defaultTimeline, params === null || params === void 0 ? void 0 : params.slience);
+        animate.bind(this);
+        if (params) {
+            const { onStart, onEnd, onRemove } = params;
+            onStart != null && animate.onStart(onStart);
+            onEnd != null && animate.onEnd(onEnd);
+            onRemove != null && animate.onRemove(onRemove);
+        }
+        this.animates.set(animate.id, animate);
+        animate.onRemove(() => {
+            animate.stop();
+            this.animates.delete(animate.id);
+        });
+        (_c = this.stage) === null || _c === void 0 ? void 0 : _c.ticker.start();
+        return animate;
+    }
+    computeAnimatedAttribute() {
+        if (!this.animatedAttribute) {
+            this.animatedAttribute = {};
+            this.animates.forEach(animate => {
+                if (animate.getLoop() !== Infinity) {
+                    Object.assign(this.animatedAttribute, animate.getEndProps());
+                }
+            });
+        }
+    }
+    createTimeline() {
+        return new DefaultTimeline();
+    }
+    createTicker(stage) {
+        return new DefaultTicker(stage);
+    }
+    getFinalAttribute() {
+        const finalAttribute = {};
+        Object.assign(finalAttribute, this.attribute, this.animatedAttribute);
+        return finalAttribute;
+    }
+}
+
+function registerAnimate() {
+    if (!Graphic.Animate) {
+        Graphic.Animate = Animate;
+    }
+    if (!Graphic.Timeline) {
+        Graphic.Timeline = DefaultTimeline;
+    }
+    if (!Graphic.defaultTimeline) {
+        Graphic.defaultTimeline = defaultTimeline;
+    }
+    if (!Graphic.Ticker) {
+        Graphic.Ticker = DefaultTicker;
+    }
+    mixin(Graphic, GraphicStateExtension);
+    mixin(Graphic, AnimateExtension);
+}
+
+class ACustomAnimate extends Step {
+    constructor(customFrom, customTo, duration, easing, params) {
+        super('customAnimate', customTo, duration, easing);
+        this.type = 'customAnimate';
+        this.customFrom = customFrom;
+        this.params = params;
+    }
+    update(end, ratio, out) {
+        this.onStart();
+        if (!this.props || !this.propKeys) {
+            return;
+        }
+        const easedRatio = this.easing(ratio);
+        this.onUpdate(end, easedRatio, out);
+    }
+    setProps(props) {
+        this.props = props;
+        this.propKeys = Object.keys(props);
+        this.animate.reSyncProps();
+    }
+}
+
+class IncreaseCount extends ACustomAnimate {
+    constructor(from, to, duration, easing, params) {
+        super(from, to, duration, easing, params);
+        this.formatTemplate = null;
+        this.decimalLength = params === null || params === void 0 ? void 0 : params.decimalLength;
+        if ((params === null || params === void 0 ? void 0 : params.formatTemplate) && params.formatTemplate.includes('{{var}}')) {
+            this.formatTemplate = params.formatTemplate;
+        }
+    }
+    onFirstRun() {
+        var _a, _b, _c;
+        const fromProps = this.getLastProps();
+        const toProps = this.getEndProps();
+        const fromText = (_a = fromProps.text) !== null && _a !== void 0 ? _a : 0;
+        const toText = (_b = toProps.text) !== null && _b !== void 0 ? _b : 0;
+        this.valid = true;
+        let fromNum = 0;
+        let toNum = 0;
+        let fromFormat = '';
+        let toFormat = '';
+        let maxDecimalLength = 0;
+        if (typeof fromText === 'number') {
+            fromNum = fromText;
+            const str = fromText.toString();
+            const decimalPart = str.split('.')[1] || '';
+            maxDecimalLength = Math.max(maxDecimalLength, decimalPart.length);
+        }
+        else if (typeof fromText === 'string') {
+            if (fromText.endsWith('%')) {
+                fromFormat = '%';
+                const numStr = fromText.substring(0, fromText.length - 1);
+                const cleanNumStr = numStr.replace(/,/g, '');
+                fromNum = parseFloat(cleanNumStr) / 100;
+                if (isNaN(fromNum)) {
+                    this.valid = false;
+                    return;
+                }
+                const decimalPart = cleanNumStr.split('.')[1] || '';
+                maxDecimalLength = Math.max(maxDecimalLength, decimalPart.length + 2);
+            }
+            else {
+                const cleanNumStr = fromText.replace(/,/g, '');
+                fromNum = parseFloat(cleanNumStr);
+                if (isNaN(fromNum)) {
+                    this.valid = false;
+                    return;
+                }
+                if (fromText.includes(',')) {
+                    fromFormat = ',';
+                }
+                const decimalPart = cleanNumStr.split('.')[1] || '';
+                maxDecimalLength = Math.max(maxDecimalLength, decimalPart.length);
+            }
+        }
+        else {
+            this.valid = false;
+            return;
+        }
+        if (typeof toText === 'number') {
+            toNum = toText;
+            const str = toText.toString();
+            const decimalPart = str.split('.')[1] || '';
+            maxDecimalLength = Math.max(maxDecimalLength, decimalPart.length);
+        }
+        else if (typeof toText === 'string') {
+            if (toText.endsWith('%')) {
+                toFormat = '%';
+                const numStr = toText.substring(0, toText.length - 1);
+                const cleanNumStr = numStr.replace(/,/g, '');
+                toNum = parseFloat(cleanNumStr) / 100;
+                if (isNaN(toNum)) {
+                    this.valid = false;
+                    return;
+                }
+                const decimalPart = cleanNumStr.split('.')[1] || '';
+                maxDecimalLength = Math.max(maxDecimalLength, decimalPart.length + 2);
+            }
+            else {
+                const cleanNumStr = toText.replace(/,/g, '');
+                toNum = parseFloat(cleanNumStr);
+                if (isNaN(toNum)) {
+                    this.valid = false;
+                    return;
+                }
+                if (toText.includes(',')) {
+                    toFormat = ',';
+                }
+                const decimalPart = cleanNumStr.split('.')[1] || '';
+                maxDecimalLength = Math.max(maxDecimalLength, decimalPart.length);
+            }
+        }
+        else {
+            this.valid = false;
+            return;
+        }
+        if ((_c = this.params) === null || _c === void 0 ? void 0 : _c.format) {
+            switch (this.params.format) {
+                case 'percent':
+                    this.format = '%';
+                    break;
+                case 'thousandth':
+                    this.format = ',';
+                    break;
+                case 'none':
+                    this.format = '';
+                    break;
+                default:
+                    this.format = toFormat || fromFormat;
+            }
+            if (this.format === '%' && toFormat !== '%' && fromFormat !== '%') {
+                if (this.decimalLength === undefined) {
+                    this.decimalLength = 2;
+                }
+            }
+            if (this.format !== '%' && (toFormat === '%' || fromFormat === '%')) {
+                fromNum = fromNum * 100;
+                toNum = toNum * 100;
+            }
+        }
+        else {
+            this.format = toFormat || fromFormat;
+        }
+        this.fromNumber = fromNum;
+        this.toNumber = toNum;
+        if (this.decimalLength === undefined) {
+            this.decimalLength = maxDecimalLength;
+        }
+    }
+    onEnd(cb) {
+        super.onEnd(cb);
+        if (!cb) {
+            this.props && this.target.setAttributes(this.props);
+        }
+    }
+    onUpdate(end, ratio, out) {
+        if (!this.valid) {
+            return;
+        }
+        const currentNumber = this.fromNumber + (this.toNumber - this.fromNumber) * ratio;
+        let formattedText = '';
+        const format = this.format;
+        const adjustedNumber = format === '%' ? currentNumber * 100 : currentNumber;
+        const numberWithDecimals = adjustedNumber.toFixed(this.decimalLength);
+        let formattedNumber = numberWithDecimals;
+        if (parseFloat(numberWithDecimals) === Math.floor(parseFloat(numberWithDecimals))) {
+            formattedNumber = Math.floor(parseFloat(numberWithDecimals));
+        }
+        let formattedWithBasicFormat;
+        if (format === '%') {
+            formattedWithBasicFormat = `${formattedNumber}%`;
+        }
+        else if (format === ',') {
+            const parts = formattedNumber.toString().split('.');
+            parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ',');
+            formattedWithBasicFormat = parts.join('.');
+        }
+        else {
+            formattedWithBasicFormat = formattedNumber;
+        }
+        if (this.formatTemplate) {
+            formattedText = this.formatTemplate.replace('{{var}}', formattedWithBasicFormat.toString());
+        }
+        else {
+            formattedText = formattedWithBasicFormat;
+        }
+        this.target.setAttribute('text', formattedText);
+    }
+}
+
+class InputText extends ACustomAnimate {
+    constructor(from, to, duration, easing, params) {
+        super(from, to, duration, easing, params);
+        this.fromText = '';
+        this.toText = '';
+        this.showCursor = false;
+        this.cursorChar = '|';
+        this.blinkCursor = true;
+        this.beforeText = '';
+        this.afterText = '';
+        if ((params === null || params === void 0 ? void 0 : params.showCursor) !== undefined) {
+            this.showCursor = params.showCursor;
+        }
+        if ((params === null || params === void 0 ? void 0 : params.cursorChar) !== undefined) {
+            this.cursorChar = params.cursorChar;
+        }
+        if ((params === null || params === void 0 ? void 0 : params.blinkCursor) !== undefined) {
+            this.blinkCursor = params.blinkCursor;
+        }
+        if ((params === null || params === void 0 ? void 0 : params.beforeText) !== undefined) {
+            this.beforeText = params.beforeText;
+        }
+        if ((params === null || params === void 0 ? void 0 : params.afterText) !== undefined) {
+            this.afterText = params.afterText;
+        }
+    }
+    onFirstRun() {
+        var _a, _b;
+        const fromProps = this.getLastProps();
+        const toProps = this.getEndProps();
+        const fromText = (_a = fromProps.text) !== null && _a !== void 0 ? _a : '';
+        const toText = (_b = toProps.text) !== null && _b !== void 0 ? _b : '';
+        this.valid = true;
+        this.fromText = fromText.toString();
+        this.toText = toText.toString();
+        if (!this.toText && this.toText !== '') {
+            this.valid = false;
+            return;
+        }
+    }
+    onEnd(cb) {
+        super.onEnd(cb);
+        if (!cb) {
+            if (this.showCursor && !this.blinkCursor) {
+                this.target.setAttribute('text', this.beforeText + this.toText + this.cursorChar + this.afterText);
+            }
+            else {
+                this.target.setAttribute('text', this.beforeText + this.toText + this.afterText);
+            }
+        }
+    }
+    onUpdate(end, ratio, out) {
+        if (!this.valid) {
+            return;
+        }
+        const totalChars = this.toText.length;
+        const fromChars = this.fromText.length;
+        let currentLength;
+        let currentText;
+        if (fromChars > totalChars) {
+            currentLength = Math.round(fromChars - (fromChars - totalChars) * ratio);
+            currentText = this.fromText.substring(0, currentLength);
+        }
+        else {
+            currentLength = Math.round(fromChars + (totalChars - fromChars) * ratio);
+            if (this.toText.startsWith(this.fromText)) {
+                currentText = this.toText.substring(0, currentLength);
+            }
+            else {
+                if (currentLength <= fromChars) {
+                    currentText = this.fromText.substring(0, currentLength);
+                }
+                else {
+                    currentText = this.toText.substring(0, currentLength - fromChars + Math.min(fromChars, currentLength));
+                }
+            }
+        }
+        let displayText = this.beforeText + currentText + this.afterText;
+        if (this.showCursor) {
+            if (this.blinkCursor) {
+                const blinkRate = 0.1;
+                const showCursorNow = Math.floor(ratio / blinkRate) % 2 === 0;
+                if (showCursorNow) {
+                    displayText = this.beforeText + currentText + this.cursorChar + this.afterText;
+                }
+            }
+            else {
+                displayText = this.beforeText + currentText + this.cursorChar + this.afterText;
+            }
+        }
+        this.target.setAttribute('text', displayText);
+    }
+}
+
+class ClipGraphicAnimate extends ACustomAnimate {
+    constructor(from, to, duration, easing, params) {
+        super(null, null, duration, easing, params);
+        this.clipFromAttribute = from;
+        this.clipToAttribute = to;
+        this._group = params === null || params === void 0 ? void 0 : params.group;
+        this._clipGraphic = params === null || params === void 0 ? void 0 : params.clipGraphic;
+    }
+    onBind() {
+        if (this._group && this._clipGraphic) {
+            this._lastClip = this._group.attribute.clip;
+            this._lastPath = this._group.attribute.path;
+            this._group.setAttributes({
+                clip: true,
+                path: [this._clipGraphic]
+            }, false, { type: AttributeUpdateType.ANIMATE_BIND });
+        }
+    }
+    onEnd() {
+        if (this._group) {
+            this._group.setAttributes({
+                clip: this._lastClip,
+                path: this._lastPath
+            }, false, { type: AttributeUpdateType.ANIMATE_END });
+        }
+        return;
+    }
+    onUpdate(end, ratio, out) {
+        if (!this._clipGraphic) {
+            return;
+        }
+        const res = {};
+        Object.keys(this.clipFromAttribute).forEach(k => {
+            res[k] = this.clipFromAttribute[k] + (this.clipToAttribute[k] - this.clipFromAttribute[k]) * ratio;
+        });
+        this._clipGraphic.setAttributes(res, false, {
+            type: AttributeUpdateType.ANIMATE_UPDATE,
+            animationState: { ratio, end }
+        });
+    }
+}
+class ClipAngleAnimate extends ClipGraphicAnimate {
+    constructor(from, to, duration, easing, params) {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
+        const groupAttribute = (_b = (_a = params === null || params === void 0 ? void 0 : params.group) === null || _a === void 0 ? void 0 : _a.attribute) !== null && _b !== void 0 ? _b : {};
+        const width = (_c = groupAttribute.width) !== null && _c !== void 0 ? _c : 0;
+        const height = (_d = groupAttribute.height) !== null && _d !== void 0 ? _d : 0;
+        const animationType = (_e = params === null || params === void 0 ? void 0 : params.animationType) !== null && _e !== void 0 ? _e : 'in';
+        const startAngle = (_f = params === null || params === void 0 ? void 0 : params.startAngle) !== null && _f !== void 0 ? _f : 0;
+        const orient = (_g = params === null || params === void 0 ? void 0 : params.orient) !== null && _g !== void 0 ? _g : 'clockwise';
+        let arcStartAngle = 0;
+        let arcEndAngle = 0;
+        if (orient === 'anticlockwise') {
+            arcEndAngle = animationType === 'in' ? startAngle + Math.PI * 2 : startAngle;
+            arcEndAngle = startAngle + Math.PI * 2;
+        }
+        else {
+            arcStartAngle = startAngle;
+            arcEndAngle = animationType === 'out' ? startAngle + Math.PI * 2 : startAngle;
+        }
+        const arc = application.graphicService.creator.arc({
+            x: (_j = (_h = params === null || params === void 0 ? void 0 : params.center) === null || _h === void 0 ? void 0 : _h.x) !== null && _j !== void 0 ? _j : width / 2,
+            y: (_l = (_k = params === null || params === void 0 ? void 0 : params.center) === null || _k === void 0 ? void 0 : _k.y) !== null && _l !== void 0 ? _l : height / 2,
+            outerRadius: (_m = params === null || params === void 0 ? void 0 : params.radius) !== null && _m !== void 0 ? _m : (width + height) / 2,
+            innerRadius: 0,
+            startAngle: arcStartAngle,
+            endAngle: arcEndAngle,
+            fill: true
+        });
+        let fromAttributes;
+        let toAttributes;
+        if (orient === 'anticlockwise') {
+            fromAttributes = { startAngle: startAngle + Math.PI * 2 };
+            toAttributes = { startAngle: startAngle };
+        }
+        else {
+            fromAttributes = { endAngle: startAngle };
+            toAttributes = { endAngle: startAngle + Math.PI * 2 };
+        }
+        super(animationType === 'in' ? fromAttributes : toAttributes, animationType === 'in' ? toAttributes : fromAttributes, duration, easing, { group: params === null || params === void 0 ? void 0 : params.group, clipGraphic: arc });
+    }
+}
+class ClipRadiusAnimate extends ClipGraphicAnimate {
+    constructor(from, to, duration, easing, params) {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+        const groupAttribute = (_b = (_a = params === null || params === void 0 ? void 0 : params.group) === null || _a === void 0 ? void 0 : _a.attribute) !== null && _b !== void 0 ? _b : {};
+        const width = (_c = groupAttribute.width) !== null && _c !== void 0 ? _c : 0;
+        const height = (_d = groupAttribute.height) !== null && _d !== void 0 ? _d : 0;
+        const animationType = (_e = params === null || params === void 0 ? void 0 : params.animationType) !== null && _e !== void 0 ? _e : 'in';
+        const startRadius = (_f = params === null || params === void 0 ? void 0 : params.startRadius) !== null && _f !== void 0 ? _f : 0;
+        const endRadius = (_g = params === null || params === void 0 ? void 0 : params.endRadius) !== null && _g !== void 0 ? _g : Math.sqrt((width / 2) ** 2 + (height / 2) ** 2);
+        const arc = application.graphicService.creator.arc({
+            x: (_j = (_h = params === null || params === void 0 ? void 0 : params.center) === null || _h === void 0 ? void 0 : _h.x) !== null && _j !== void 0 ? _j : width / 2,
+            y: (_l = (_k = params === null || params === void 0 ? void 0 : params.center) === null || _k === void 0 ? void 0 : _k.y) !== null && _l !== void 0 ? _l : height / 2,
+            outerRadius: animationType === 'out' ? endRadius : startRadius,
+            innerRadius: 0,
+            startAngle: 0,
+            endAngle: Math.PI * 2,
+            fill: true
+        });
+        const fromAttributes = { outerRadius: startRadius };
+        const toAttributes = { outerRadius: endRadius };
+        super(animationType === 'in' ? fromAttributes : toAttributes, animationType === 'in' ? toAttributes : fromAttributes, duration, easing, { group: params === null || params === void 0 ? void 0 : params.group, clipGraphic: arc });
+    }
+}
+class ClipDirectionAnimate extends ClipGraphicAnimate {
+    constructor(from, to, duration, easing, params) {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+        const groupAttribute = (_b = (_a = params === null || params === void 0 ? void 0 : params.group) === null || _a === void 0 ? void 0 : _a.attribute) !== null && _b !== void 0 ? _b : {};
+        const width = (_d = (_c = params === null || params === void 0 ? void 0 : params.width) !== null && _c !== void 0 ? _c : groupAttribute.width) !== null && _d !== void 0 ? _d : 0;
+        const height = (_f = (_e = params === null || params === void 0 ? void 0 : params.height) !== null && _e !== void 0 ? _e : groupAttribute.height) !== null && _f !== void 0 ? _f : 0;
+        const animationType = (_g = params === null || params === void 0 ? void 0 : params.animationType) !== null && _g !== void 0 ? _g : 'in';
+        const direction = (_h = params === null || params === void 0 ? void 0 : params.direction) !== null && _h !== void 0 ? _h : 'x';
+        const orient = (_j = params === null || params === void 0 ? void 0 : params.orient) !== null && _j !== void 0 ? _j : 'positive';
+        const rect = application.graphicService.creator.rect({
+            x: 0,
+            y: 0,
+            width: animationType === 'in' && direction === 'x' ? 0 : width,
+            height: animationType === 'in' && direction === 'y' ? 0 : height,
+            fill: true
+        });
+        let fromAttributes = {};
+        let toAttributes = {};
+        if (direction === 'y') {
+            if (orient === 'negative') {
+                fromAttributes = { y: height, height: 0 };
+                toAttributes = { y: 0, height: height };
+            }
+            else {
+                fromAttributes = { height: 0 };
+                toAttributes = { height: height };
+            }
+        }
+        else {
+            if (orient === 'negative') {
+                fromAttributes = { x: width, width: 0 };
+                toAttributes = { x: 0, width: width };
+            }
+            else {
+                fromAttributes = { width: 0 };
+                toAttributes = { width: width };
+            }
+        }
+        super(animationType === 'in' ? fromAttributes : toAttributes, animationType === 'in' ? toAttributes : fromAttributes, duration, easing, { group: params === null || params === void 0 ? void 0 : params.group, clipGraphic: rect });
+    }
+}
+
+class TagPointsUpdate extends ACustomAnimate {
+    constructor(from, to, duration, easing, params) {
+        var _a, _b;
+        super(from, to, duration, easing, params);
+        this.newPointAnimateType = (_a = params === null || params === void 0 ? void 0 : params.newPointAnimateType) !== null && _a !== void 0 ? _a : 'grow';
+        this.clipRangeByDimension = (_b = params === null || params === void 0 ? void 0 : params.clipRangeByDimension) !== null && _b !== void 0 ? _b : 'x';
+    }
+    getPoints(attribute, cache = false) {
+        if (attribute.points) {
+            return attribute.points;
+        }
+        if (attribute.segments) {
+            const points = [];
+            if (!this.segmentsCache) {
+                this.segmentsCache = [];
+            }
+            attribute.segments.map((segment) => {
+                var _a, _b;
+                if (segment.points) {
+                    points.push(...segment.points);
+                }
+                if (cache) {
+                    this.segmentsCache.push((_b = (_a = segment.points) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0);
+                }
+            });
+            return points;
+        }
+        return [];
+    }
+    onBind() {
+        const originFromPoints = this.getPoints(this.from);
+        const originToPoints = this.getPoints(this.to, true);
+        this.fromPoints = !originFromPoints ? [] : !Array.isArray(originFromPoints) ? [originFromPoints] : originFromPoints;
+        this.toPoints = !originToPoints ? [] : !Array.isArray(originToPoints) ? [originToPoints] : originToPoints;
+        const tagMap = new Map();
+        this.fromPoints.forEach(point => {
+            if (point.context) {
+                tagMap.set(point.context, point);
+            }
+        });
+        let firstMatchedIndex = Infinity;
+        let lastMatchedIndex = -Infinity;
+        let firstMatchedPoint;
+        let lastMatchedPoint;
+        for (let i = 0; i < this.toPoints.length; i += 1) {
+            if (tagMap.has(this.toPoints[i].context)) {
+                firstMatchedIndex = i;
+                firstMatchedPoint = tagMap.get(this.toPoints[i].context);
+                break;
+            }
+        }
+        for (let i = this.toPoints.length - 1; i >= 0; i -= 1) {
+            if (tagMap.has(this.toPoints[i].context)) {
+                lastMatchedIndex = i;
+                lastMatchedPoint = tagMap.get(this.toPoints[i].context);
+                break;
+            }
+        }
+        if (this.newPointAnimateType === 'clip') {
+            if (this.toPoints.length !== 0) {
+                if (Number.isFinite(lastMatchedIndex)) {
+                    this.clipRange =
+                        this.toPoints[lastMatchedIndex][this.clipRangeByDimension] /
+                            this.toPoints[this.toPoints.length - 1][this.clipRangeByDimension];
+                    if (this.clipRange === 1) {
+                        this.shrinkClipRange =
+                            this.toPoints[lastMatchedIndex][this.clipRangeByDimension] /
+                                this.fromPoints[this.fromPoints.length - 1][this.clipRangeByDimension];
+                    }
+                    if (!isValidNumber(this.clipRange)) {
+                        this.clipRange = 0;
+                    }
+                    else {
+                        this.clipRange = clamp(this.clipRange, 0, 1);
+                    }
+                }
+                else {
+                    this.clipRange = 0;
+                }
+            }
+        }
+        let prevMatchedPoint = this.toPoints[0];
+        this.interpolatePoints = this.toPoints.map((point, index) => {
+            const matchedPoint = tagMap.get(point.context);
+            if (matchedPoint) {
+                prevMatchedPoint = matchedPoint;
+                return [matchedPoint, point];
+            }
+            if (this.newPointAnimateType === 'appear' || this.newPointAnimateType === 'clip') {
+                return [point, point];
+            }
+            if (index < firstMatchedIndex && firstMatchedPoint) {
+                return [firstMatchedPoint, point];
+            }
+            else if (index > lastMatchedIndex && lastMatchedPoint) {
+                return [lastMatchedPoint, point];
+            }
+            return [prevMatchedPoint, point];
+        });
+        this.points = this.interpolatePoints.map(interpolate => {
+            const fromPoint = interpolate[0];
+            const toPoint = interpolate[1];
+            const newPoint = new Point(fromPoint.x, fromPoint.y, fromPoint.x1, fromPoint.y1);
+            newPoint.defined = toPoint.defined;
+            newPoint.context = toPoint.context;
+            return newPoint;
+        });
+    }
+    onFirstRun() {
+        const lastClipRange = this.target.attribute.clipRange;
+        if (isValidNumber(lastClipRange * this.clipRange)) {
+            this.clipRange *= lastClipRange;
+        }
+    }
+    onUpdate(end, ratio, out) {
+        this.points = this.points.map((point, index) => {
+            const newPoint = pointInterpolation(this.interpolatePoints[index][0], this.interpolatePoints[index][1], ratio);
+            newPoint.context = point.context;
+            return newPoint;
+        });
+        if (this.clipRange) {
+            if (this.shrinkClipRange) {
+                if (!end) {
+                    out.points = this.fromPoints;
+                    out.clipRange = this.clipRange - (this.clipRange - this.shrinkClipRange) * ratio;
+                }
+                else {
+                    out.points = this.toPoints;
+                    out.clipRange = 1;
+                }
+                return;
+            }
+            out.clipRange = this.clipRange + (1 - this.clipRange) * ratio;
+        }
+        if (this.segmentsCache && this.to.segments) {
+            let start = 0;
+            out.segments = this.to.segments.map((segment, index) => {
+                const end = start + this.segmentsCache[index];
+                const points = this.points.slice(start, end);
+                start = end;
+                return Object.assign(Object.assign({}, segment), { points });
+            });
+        }
+        else {
+            out.points = this.points;
+        }
+    }
+}
+
+class GroupFadeIn extends ACustomAnimate {
+    getEndProps() {
+        return {};
+    }
+    onBind() {
+        this.target.setTheme({
+            common: {
+                opacity: 0
+            }
+        });
+        return;
+    }
+    onEnd() {
+        this.target.setTheme({
+            common: {
+                opacity: 1
+            }
+        });
+        return;
+    }
+    onUpdate(end, ratio, out) {
+        this.target.setTheme({
+            common: {
+                opacity: ratio
+            }
+        });
+    }
+}
+class GroupFadeOut extends ACustomAnimate {
+    getEndProps() {
+        return {};
+    }
+    onBind() {
+        this.target.setTheme({
+            common: {
+                opacity: 1
+            }
+        });
+        return;
+    }
+    onEnd() {
+        this.target.setTheme({
+            common: {
+                opacity: 0
+            }
+        });
+        return;
+    }
+    onUpdate(end, ratio, out) {
+        this.target.setTheme({
+            common: {
+                opacity: 1 - ratio
+            }
+        });
+    }
+}
+
+class RotateBySphereAnimate extends ACustomAnimate {
+    onStart() {
+        const { center, r } = typeof this.params === 'function' ? this.params() : this.params;
+        const startX = this.target.getComputedAttribute('x');
+        const startY = this.target.getComputedAttribute('y');
+        const startZ = this.target.getComputedAttribute('z');
+        const phi = Math.acos((startY - center.y) / r);
+        let theta = Math.acos((startX - center.x) / r / Math.sin(phi));
+        if (startZ - center.z < 0) {
+            theta = pi2 - theta;
+        }
+        this.theta = theta;
+        this.phi = phi;
+    }
+    onBind() {
+        return;
+    }
+    onEnd() {
+        return;
+    }
+    onUpdate(end, ratio, out) {
+        if (this.phi == null || this.theta == null) {
+            return;
+        }
+        const { center, r, cb } = typeof this.params === 'function' ? this.params() : this.params;
+        const deltaAngle = Math.PI * 2 * ratio;
+        const theta = this.theta + deltaAngle;
+        const phi = this.phi;
+        const x = r * Math.sin(phi) * Math.cos(theta) + center.x;
+        const y = r * Math.cos(phi) + center.y;
+        const z = r * Math.sin(phi) * Math.sin(theta) + center.z;
+        out.x = x;
+        out.y = y;
+        out.z = z;
+        out.alpha = theta + pi / 2;
+        while (out.alpha > pi2) {
+            out.alpha -= pi2;
+        }
+        out.alpha = pi2 - out.alpha;
+        out.zIndex = out.z * -10000;
+        cb && cb(out);
+    }
+}
+
+class CommonIn extends ACustomAnimate {
+    constructor(from, to, duration, easing, params) {
+        super(from, to, duration, easing, params);
+    }
+    onBind() {
+        var _a;
+        const attrs = this.target.getFinalAttribute();
+        const fromAttrs = (_a = this.target.context.lastAttrs) !== null && _a !== void 0 ? _a : {};
+        const to = {};
+        const from = {};
+        this.keys.forEach(key => {
+            var _a, _b;
+            to[key] = (_a = attrs === null || attrs === void 0 ? void 0 : attrs[key]) !== null && _a !== void 0 ? _a : 1;
+            from[key] = (_b = fromAttrs === null || fromAttrs === void 0 ? void 0 : fromAttrs[key]) !== null && _b !== void 0 ? _b : 0;
+        });
+        this.props = to;
+        this.propKeys = this.keys;
+        this.animate.reSyncProps();
+        this.from = from;
+        this.to = to;
+        this.target.setAttributes(from);
+    }
+    onEnd(cb) {
+        super.onEnd(cb);
+    }
+    onUpdate(end, ratio, out) {
+        this.propKeys.forEach(key => {
+            out[key] = this.from[key] + (this.to[key] - this.from[key]) * ratio;
+        });
+        this.target.setAttributes(out);
+    }
+}
+class CommonOut extends ACustomAnimate {
+    constructor(from, to, duration, easing, params) {
+        super(from, to, duration, easing, params);
+    }
+    onBind() {
+        const attrs = this.target.getFinalAttribute();
+        const to = {};
+        const from = {};
+        this.keys.forEach(key => {
+            var _a;
+            to[key] = 0;
+            from[key] = (_a = attrs === null || attrs === void 0 ? void 0 : attrs[key]) !== null && _a !== void 0 ? _a : 1;
+        });
+        this.props = to;
+        this.propKeys = this.keys;
+        this.animate.reSyncProps();
+        this.from = from;
+        this.to = to;
+        this.target.setAttributes(from);
+    }
+    onEnd(cb) {
+        super.onEnd(cb);
+    }
+    onUpdate(end, ratio, out) {
+        this.propKeys.forEach(key => {
+            out[key] = this.from[key] + (this.to[key] - this.from[key]) * ratio;
+        });
+        this.target.setAttributes(out);
+    }
+}
+
+class ClipIn extends CommonIn {
+    constructor(from, to, duration, easing, params) {
+        super(from, to, duration, easing, params);
+        this.keys = ['clipRange'];
+    }
+}
+class ClipOut extends CommonOut {
+    constructor(from, to, duration, easing, params) {
+        super(from, to, duration, easing, params);
+        this.keys = ['clipRange'];
+    }
+}
+
+class FadeIn extends CommonIn {
+    constructor(from, to, duration, easing, params) {
+        super(from, to, duration, easing, params);
+        this.keys = ['opacity'];
+    }
+}
+class FadeOut extends CommonOut {
+    constructor(from, to, duration, easing, params) {
+        super(from, to, duration, easing, params);
+        this.keys = ['opacity'];
+    }
+}
+
+const growAngleInIndividual = (graphic, options, animationParameters) => {
+    const attrs = graphic.getFinalAttribute();
+    if (options && options.orient === 'anticlockwise') {
+        return {
+            from: { startAngle: attrs === null || attrs === void 0 ? void 0 : attrs.endAngle },
+            to: { startAngle: attrs === null || attrs === void 0 ? void 0 : attrs.startAngle }
+        };
+    }
+    return {
+        from: { endAngle: attrs === null || attrs === void 0 ? void 0 : attrs.startAngle },
+        to: { endAngle: attrs === null || attrs === void 0 ? void 0 : attrs.endAngle }
+    };
+};
+const growAngleInOverall = (graphic, options, animationParameters) => {
+    const attrs = graphic.getFinalAttribute();
+    if (options && options.orient === 'anticlockwise') {
+        const overallValue = isNumber(options.overall) ? options.overall : Math.PI * 2;
+        return {
+            from: {
+                startAngle: overallValue,
+                endAngle: overallValue
+            },
+            to: {
+                startAngle: attrs === null || attrs === void 0 ? void 0 : attrs.startAngle,
+                endAngle: attrs === null || attrs === void 0 ? void 0 : attrs.endAngle
+            }
+        };
+    }
+    const overallValue = isNumber(options === null || options === void 0 ? void 0 : options.overall) ? options.overall : 0;
+    return {
+        from: {
+            startAngle: overallValue,
+            endAngle: overallValue
+        },
+        to: {
+            startAngle: attrs === null || attrs === void 0 ? void 0 : attrs.startAngle,
+            endAngle: attrs === null || attrs === void 0 ? void 0 : attrs.endAngle
+        }
+    };
+};
+const growAngleIn = (graphic, options, animationParameters) => {
+    var _a;
+    return ((_a = options === null || options === void 0 ? void 0 : options.overall) !== null && _a !== void 0 ? _a : false) !== false
+        ? growAngleInOverall(graphic, options)
+        : growAngleInIndividual(graphic, options);
+};
+const growAngleOutIndividual = (graphic, options, animationParameters) => {
+    const attrs = graphic.getFinalAttribute();
+    if (options && options.orient === 'anticlockwise') {
+        return {
+            from: { startAngle: attrs.startAngle },
+            to: { startAngle: attrs === null || attrs === void 0 ? void 0 : attrs.endAngle }
+        };
+    }
+    return {
+        from: { endAngle: attrs.endAngle },
+        to: { endAngle: attrs === null || attrs === void 0 ? void 0 : attrs.startAngle }
+    };
+};
+const growAngleOutOverall = (graphic, options, animationParameters) => {
+    const attrs = graphic.getFinalAttribute();
+    if (options && options.orient === 'anticlockwise') {
+        const overallValue = isNumber(options.overall) ? options.overall : Math.PI * 2;
+        return {
+            from: {
+                startAngle: attrs.startAngle,
+                endAngle: attrs.endAngle
+            },
+            to: {
+                startAngle: overallValue,
+                endAngle: overallValue
+            }
+        };
+    }
+    const overallValue = isNumber(options === null || options === void 0 ? void 0 : options.overall) ? options.overall : 0;
+    return {
+        from: {
+            startAngle: attrs.startAngle,
+            endAngle: attrs.endAngle
+        },
+        to: {
+            startAngle: overallValue,
+            endAngle: overallValue
+        }
+    };
+};
+const growAngleOut = (graphic, options, animationParameters) => {
+    var _a;
+    return ((_a = options === null || options === void 0 ? void 0 : options.overall) !== null && _a !== void 0 ? _a : false) !== false
+        ? growAngleOutOverall(graphic, options)
+        : growAngleOutIndividual(graphic, options);
+};
+let GworPointsBase$2 = class GworPointsBase extends ACustomAnimate {
+    constructor(from, to, duration, easing, params) {
+        super(from, to, duration, easing, params);
+    }
+    onUpdate(end, ratio, out) {
+        this.propKeys.forEach(key => {
+            out[key] = this.from[key] + (this.to[key] - this.from[key]) * ratio;
+        });
+        this.target.setAttributes(out);
+    }
+};
+class GrowAngleIn extends GworPointsBase$2 {
+    onBind() {
+        var _a;
+        const { from, to } = growAngleIn(this.target, this.params.options, this.params);
+        const fromAttrs = (_a = this.target.context.lastAttrs) !== null && _a !== void 0 ? _a : from;
+        this.props = to;
+        this.propKeys = Object.keys(to).filter(key => to[key] != null);
+        this.animate.reSyncProps();
+        this.from = fromAttrs;
+        this.to = to;
+        this.target.setAttributes(fromAttrs);
+    }
+}
+class GrowAngleOut extends GworPointsBase$2 {
+    onBind() {
+        var _a;
+        const { from, to } = growAngleOut(this.target, this.params.options, this.params);
+        const fromAttrs = (_a = this.target.context.lastAttrs) !== null && _a !== void 0 ? _a : from;
+        this.props = to;
+        this.propKeys = Object.keys(to).filter(key => to[key] != null);
+        this.animate.reSyncProps();
+        this.from = fromAttrs;
+        this.to = to;
+        this.target.setAttributes(fromAttrs);
+    }
+}
+
+const growCenterIn = (graphic, options, animationParameters) => {
+    const attrs = graphic.getFinalAttribute();
+    switch (options === null || options === void 0 ? void 0 : options.direction) {
+        case 'x': {
+            const x = attrs.x;
+            const x1 = attrs.x1;
+            const width = attrs.width;
+            return {
+                from: isValid(width)
+                    ? {
+                        x: x + width / 2,
+                        x1: undefined,
+                        width: 0
+                    }
+                    : {
+                        x: (x + x1) / 2,
+                        x1: (x + x1) / 2,
+                        width: undefined
+                    },
+                to: { x, x1, width }
+            };
+        }
+        case 'y': {
+            const y = attrs.y;
+            const y1 = attrs.y1;
+            const height = attrs.height;
+            return {
+                from: isValid(height)
+                    ? {
+                        y: y + height / 2,
+                        y1: undefined,
+                        height: 0
+                    }
+                    : {
+                        y: (y + y1) / 2,
+                        y1: (y + y1) / 2,
+                        height: undefined
+                    },
+                to: { y, y1, height }
+            };
+        }
+        case 'xy':
+        default: {
+            const x = attrs.x;
+            const x1 = attrs.x1;
+            const width = attrs.width;
+            const y = attrs.y;
+            const y1 = attrs.y1;
+            const height = attrs.height;
+            const from = {};
+            if (isValid(width)) {
+                from.x = x + width / 2;
+                from.width = 0;
+                from.x1 = undefined;
+            }
+            else {
+                from.x = (x + x1) / 2;
+                from.x1 = (x + x1) / 2;
+                from.width = undefined;
+            }
+            if (isValid(height)) {
+                from.y = y + height / 2;
+                from.height = 0;
+                from.y1 = undefined;
+            }
+            else {
+                from.y = (y + y1) / 2;
+                from.y1 = (y + y1) / 2;
+                from.height = undefined;
+            }
+            return {
+                from,
+                to: { x, y, x1, y1, width, height }
+            };
+        }
+    }
+};
+const growCenterOut = (graphic, options, animationParameters) => {
+    const attrs = graphic.getFinalAttribute();
+    switch (options === null || options === void 0 ? void 0 : options.direction) {
+        case 'x': {
+            const x = attrs.x;
+            const x1 = attrs.x1;
+            const width = attrs.width;
+            return {
+                to: isValid(width)
+                    ? {
+                        x: x + width / 2,
+                        x1: undefined,
+                        width: 0
+                    }
+                    : {
+                        x: (x + x1) / 2,
+                        x1: (x + x1) / 2,
+                        width: undefined
+                    }
+            };
+        }
+        case 'y': {
+            const y = attrs.y;
+            const y1 = attrs.y1;
+            const height = attrs.height;
+            return {
+                to: isValid(height)
+                    ? {
+                        y: y + height / 2,
+                        y1: undefined,
+                        height: 0
+                    }
+                    : {
+                        y: (y + y1) / 2,
+                        y1: (y + y1) / 2,
+                        height: undefined
+                    }
+            };
+        }
+        case 'xy':
+        default: {
+            const x = attrs.x;
+            const y = attrs.y;
+            const x1 = attrs.x1;
+            const y1 = attrs.y1;
+            const width = attrs.width;
+            const height = attrs.height;
+            const to = {};
+            if (isValid(width)) {
+                to.x = x + width / 2;
+                to.width = 0;
+                to.x1 = undefined;
+            }
+            else {
+                to.x = (x + x1) / 2;
+                to.x1 = (x + x1) / 2;
+                to.width = undefined;
+            }
+            if (isValid(height)) {
+                to.y = y + height / 2;
+                to.height = 0;
+                to.y1 = undefined;
+            }
+            else {
+                to.y = (y + y1) / 2;
+                to.y1 = (y + y1) / 2;
+                to.height = undefined;
+            }
+            return {
+                to
+            };
+        }
+    }
+};
+class GrowCenterIn extends ACustomAnimate {
+    constructor(from, to, duration, easing, params) {
+        super(from, to, duration, easing, params);
+    }
+    onBind() {
+        var _a;
+        const { from, to } = growCenterIn(this.target, this.params.options, this.params);
+        const fromAttrs = (_a = this.target.context.lastAttrs) !== null && _a !== void 0 ? _a : from;
+        this.props = to;
+        this.propKeys = Object.keys(to).filter(key => to[key] != null);
+        this.animate.reSyncProps();
+        this.from = fromAttrs;
+        this.to = to;
+        this.target.setAttributes(fromAttrs);
+    }
+    onEnd(cb) {
+        super.onEnd(cb);
+    }
+    onUpdate(end, ratio, out) {
+        this.propKeys.forEach(key => {
+            out[key] = this.from[key] + (this.to[key] - this.from[key]) * ratio;
+        });
+        this.target.setAttributes(out);
+    }
+}
+class GrowCenterOut extends ACustomAnimate {
+    constructor(from, to, duration, easing, params) {
+        super(from, to, duration, easing, params);
+    }
+    onBind() {
+        const attrs = this.target.getFinalAttribute();
+        const { from, to } = growCenterOut(this.target, this.params.options, this.params);
+        this.props = to;
+        this.propKeys = Object.keys(to).filter(key => to[key] != null);
+        this.animate.reSyncProps();
+        this.from = from || attrs;
+        this.to = to;
+    }
+    onEnd(cb) {
+        super.onEnd(cb);
+    }
+    onUpdate(end, ratio, out) {
+        this.propKeys.forEach(key => {
+            out[key] = this.from[key] + (this.to[key] - this.from[key]) * ratio;
+        });
+        this.target.setAttributes(out);
+    }
+}
+
+function growHeightInIndividual(graphic, options, animationParameters) {
+    const attrs = graphic.getFinalAttribute();
+    const y = attrs.y;
+    const y1 = attrs.y1;
+    const height = attrs.height;
+    if (options && options.orient === 'negative') {
+        const computedY1 = isValid(height) ? Math.max(y, y + height) : Math.max(y, y1);
+        return {
+            from: { y: computedY1, y1: isNil(y1) ? undefined : computedY1, height: isNil(height) ? undefined : 0 },
+            to: { y: y, y1: y1, height: height }
+        };
+    }
+    const computedY = isValid(height) ? Math.min(y, y + height) : Math.min(y, y1);
+    return {
+        from: { y: computedY, y1: isNil(y1) ? undefined : computedY, height: isNil(height) ? undefined : 0 },
+        to: { y: y, y1: y1, height: height }
+    };
+}
+function growHeightInOverall(graphic, options, animationParameters) {
+    var _a;
+    const attrs = graphic.getFinalAttribute();
+    const y = attrs.y;
+    const y1 = attrs.y1;
+    const height = attrs.height;
+    let overallValue;
+    if (options && options.orient === 'negative') {
+        if (isNumber(options.overall)) {
+            overallValue = options.overall;
+        }
+        else if (animationParameters.group) {
+            overallValue = (_a = animationParameters.groupHeight) !== null && _a !== void 0 ? _a : animationParameters.group.getBounds().height();
+            animationParameters.groupHeight = overallValue;
+        }
+        else {
+            overallValue = animationParameters.height;
+        }
+    }
+    else {
+        overallValue = isNumber(options === null || options === void 0 ? void 0 : options.overall) ? options.overall : 0;
+    }
+    return {
+        from: { y: overallValue, y1: isNil(y1) ? undefined : overallValue, height: isNil(height) ? undefined : 0 },
+        to: { y: y, y1: y1, height: height }
+    };
+}
+const growHeightIn = (graphic, options, animationParameters) => {
+    var _a;
+    return ((_a = options === null || options === void 0 ? void 0 : options.overall) !== null && _a !== void 0 ? _a : false) !== false
+        ? growHeightInOverall(graphic, options, animationParameters)
+        : growHeightInIndividual(graphic, options);
+};
+class GrowHeightIn extends ACustomAnimate {
+    constructor(from, to, duration, easing, params) {
+        super(from, to, duration, easing, params);
+    }
+    onBind() {
+        var _a;
+        const { from, to } = growHeightIn(this.target, this.params.options, this.params);
+        const fromAttrs = (_a = this.target.context.lastAttrs) !== null && _a !== void 0 ? _a : from;
+        this.props = to;
+        this.propKeys = Object.keys(to).filter(key => to[key] != null);
+        this.animate.reSyncProps();
+        this.from = fromAttrs;
+        this.to = to;
+        this.target.setAttributes(fromAttrs);
+    }
+    onEnd(cb) {
+        super.onEnd(cb);
+    }
+    onUpdate(end, ratio, out) {
+        this.propKeys.forEach(key => {
+            out[key] = this.from[key] + (this.to[key] - this.from[key]) * ratio;
+        });
+        this.target.setAttributes(out);
+    }
+}
+function growHeightOutIndividual(graphic, options, animationParameters) {
+    const attrs = graphic.getFinalAttribute();
+    const y = attrs.y;
+    const y1 = attrs.y1;
+    const height = attrs.height;
+    if (options && options.orient === 'negative') {
+        const computedY1 = isValid(height) ? Math.max(y, y + height) : Math.max(y, y1);
+        return {
+            to: { y: computedY1, y1: isNil(y1) ? undefined : computedY1, height: isNil(height) ? undefined : 0 }
+        };
+    }
+    const computedY = isValid(height) ? Math.min(y, y + height) : Math.min(y, y1);
+    return {
+        to: { y: computedY, y1: isNil(y1) ? undefined : computedY, height: isNil(height) ? undefined : 0 }
+    };
+}
+function growHeightOutOverall(graphic, options, animationParameters) {
+    var _a;
+    const attrs = graphic.getFinalAttribute();
+    const y1 = attrs.y1;
+    const height = attrs.height;
+    let overallValue;
+    if (options && options.orient === 'negative') {
+        if (isNumber(options.overall)) {
+            overallValue = options.overall;
+        }
+        else if (animationParameters.group) {
+            overallValue = (_a = animationParameters.groupHeight) !== null && _a !== void 0 ? _a : animationParameters.group.getBounds().height();
+            animationParameters.groupHeight = overallValue;
+        }
+        else {
+            overallValue = animationParameters.height;
+        }
+    }
+    else {
+        overallValue = isNumber(options === null || options === void 0 ? void 0 : options.overall) ? options.overall : 0;
+    }
+    return {
+        to: { y: overallValue, y1: isNil(y1) ? undefined : overallValue, height: isNil(height) ? undefined : 0 }
+    };
+}
+const growHeightOut = (graphic, options, animationParameters) => {
+    var _a;
+    return ((_a = options === null || options === void 0 ? void 0 : options.overall) !== null && _a !== void 0 ? _a : false) !== false
+        ? growHeightOutOverall(graphic, options, animationParameters)
+        : growHeightOutIndividual(graphic, options);
+};
+class GrowHeightOut extends ACustomAnimate {
+    constructor(from, to, duration, easing, params) {
+        super(from, to, duration, easing, params);
+    }
+    onBind() {
+        const attrs = this.target.getFinalAttribute();
+        const { from, to } = growHeightOut(this.target, this.params.options, this.params);
+        this.props = to;
+        this.propKeys = Object.keys(to).filter(key => to[key] != null);
+        this.animate.reSyncProps();
+        this.from = from || attrs;
+        this.to = to;
+    }
+    onEnd(cb) {
+        super.onEnd(cb);
+    }
+    onUpdate(end, ratio, out) {
+        this.propKeys.forEach(key => {
+            out[key] = this.from[key] + (this.to[key] - this.from[key]) * ratio;
+        });
+        this.target.setAttributes(out);
+    }
+}
+
+const getCenterPoints = (graphic, options, animationParameters) => {
+    const attrs = graphic.getFinalAttribute();
+    const points = attrs.points;
+    const center = { x: 0, y: 0 };
+    points.forEach(point => {
+        center.x += point.x;
+        center.y += point.y;
+    });
+    center.x /= points.length;
+    center.y /= points.length;
+    if (options && options.center) {
+        if (isValidNumber(options.center.x)) {
+            center.x = options.center.x;
+        }
+        if (isValidNumber(options.center.y)) {
+            center.y = options.center.y;
+        }
+    }
+    if (graphic.type === 'area') {
+        center.x1 = center.x;
+        center.y1 = center.y;
+    }
+    return points.map(point => Object.assign({}, point, center));
+};
+const growPointsIn = (graphic, options, animationParameters) => {
+    const attrs = graphic.getFinalAttribute();
+    return {
+        from: { points: getCenterPoints(graphic, options) },
+        to: { points: attrs.points }
+    };
+};
+const growPointsOut = (graphic, options, animationParameters) => {
+    const attrs = graphic.getFinalAttribute();
+    return {
+        from: { points: attrs.points },
+        to: { points: getCenterPoints(graphic, options) }
+    };
+};
+let GworPointsBase$1 = class GworPointsBase extends ACustomAnimate {
+    constructor(from, to, duration, easing, params) {
+        super(from, to, duration, easing, params);
+    }
+    onUpdate(end, ratio, out) {
+        var _a, _b;
+        const fromPoints = (_a = this.from) === null || _a === void 0 ? void 0 : _a.points;
+        const toPoints = (_b = this.to) === null || _b === void 0 ? void 0 : _b.points;
+        if (!fromPoints || !toPoints) {
+            return;
+        }
+        out.points = fromPoints.map((point, index) => {
+            const newPoint = pointInterpolation(fromPoints[index], toPoints[index], ratio);
+            return newPoint;
+        });
+        this.target.setAttributes(out);
+    }
+};
+class GrowPointsIn extends GworPointsBase$1 {
+    onBind() {
+        var _a;
+        if (['area', 'line'].includes(this.target.type)) {
+            const { from, to } = growPointsIn(this.target, this.params.options, this.params);
+            const fromAttrs = (_a = this.target.context.lastAttrs) !== null && _a !== void 0 ? _a : from;
+            this.props = to;
+            this.propKeys = Object.keys(to).filter(key => to[key] != null);
+            this.animate.reSyncProps();
+            this.from = fromAttrs;
+            this.to = to;
+            this.target.setAttributes(fromAttrs);
+        }
+        else {
+            this.valid = false;
+        }
+    }
+}
+class GrowPointsOut extends GworPointsBase$1 {
+    onBind() {
+        if (['area', 'line'].includes(this.target.type)) {
+            const attrs = this.target.getFinalAttribute();
+            const { from, to } = growPointsOut(this.target, this.params.options, this.params);
+            this.props = to;
+            this.propKeys = Object.keys(to).filter(key => to[key] != null);
+            this.animate.reSyncProps();
+            this.from = from || attrs;
+            this.to = to;
+        }
+        else {
+            this.valid = false;
+        }
+    }
+}
+const changePointsX = (graphic, options, animationParameters) => {
+    const attrs = graphic.getFinalAttribute();
+    const points = attrs.points;
+    return points.map((point) => {
+        var _a;
+        if (options && options.orient === 'negative') {
+            let groupRight = animationParameters.width;
+            if (animationParameters.group) {
+                groupRight = (_a = animationParameters.groupWidth) !== null && _a !== void 0 ? _a : animationParameters.group.getBounds().width();
+                animationParameters.groupWidth = groupRight;
+            }
+            return Object.assign(Object.assign({}, point), { x: groupRight, y: point.y, x1: groupRight, y1: point.y1, defined: point.defined !== false });
+        }
+        return Object.assign(Object.assign({}, point), { x: 0, y: point.y, x1: 0, y1: point.y1, defined: point.defined !== false });
+    });
+};
+const growPointsXIn = (graphic, options, animationParameters) => {
+    const attrs = graphic.getFinalAttribute();
+    return {
+        from: { points: changePointsX(graphic, options, animationParameters) },
+        to: { points: attrs.points }
+    };
+};
+const growPointsXOut = (graphic, options, animationParameters) => {
+    const attrs = graphic.getFinalAttribute();
+    return {
+        from: { points: attrs.points },
+        to: { points: changePointsX(graphic, options, animationParameters) }
+    };
+};
+class GrowPointsXIn extends GworPointsBase$1 {
+    onBind() {
+        var _a;
+        if (['area', 'line'].includes(this.target.type)) {
+            const { from, to } = growPointsXIn(this.target, this.params.options, this.params);
+            const fromAttrs = (_a = this.target.context.lastAttrs) !== null && _a !== void 0 ? _a : from;
+            this.props = to;
+            this.propKeys = Object.keys(to).filter(key => to[key] != null);
+            this.animate.reSyncProps();
+            this.from = fromAttrs;
+            this.to = to;
+            this.target.setAttributes(fromAttrs);
+        }
+        else {
+            this.valid = false;
+        }
+    }
+}
+class GrowPointsXOut extends GworPointsBase$1 {
+    onBind() {
+        if (['area', 'line'].includes(this.target.type)) {
+            const attrs = this.target.getFinalAttribute();
+            const { from, to } = growPointsXOut(this.target, this.params.options, this.params);
+            this.props = to;
+            this.propKeys = Object.keys(to).filter(key => to[key] != null);
+            this.animate.reSyncProps();
+            this.from = from || attrs;
+            this.to = to;
+        }
+        else {
+            this.valid = false;
+        }
+    }
+}
+const changePointsY = (graphic, options, animationParameters) => {
+    const attrs = graphic.getFinalAttribute();
+    const points = attrs.points;
+    return points.map((point) => {
+        var _a;
+        if (options && options.orient === 'negative') {
+            let groupBottom = animationParameters.height;
+            if (animationParameters.group) {
+                groupBottom = (_a = animationParameters.groupHeight) !== null && _a !== void 0 ? _a : animationParameters.group.getBounds().height();
+                animationParameters.groupHeight = groupBottom;
+            }
+            return Object.assign(Object.assign({}, point), { x: point.x, y: groupBottom, x1: point.x1, y1: groupBottom, defined: point.defined !== false });
+        }
+        return Object.assign(Object.assign({}, point), { x: point.x, y: 0, x1: point.x1, y1: 0, defined: point.defined !== false });
+    });
+};
+const growPointsYIn = (graphic, options, animationParameters) => {
+    const attrs = graphic.getFinalAttribute();
+    return {
+        from: { points: changePointsY(graphic, options, animationParameters) },
+        to: { points: attrs.points }
+    };
+};
+const growPointsYOut = (graphic, options, animationParameters) => {
+    const attrs = graphic.getFinalAttribute();
+    return {
+        from: { points: attrs.points },
+        to: { points: changePointsY(graphic, options, animationParameters) }
+    };
+};
+class GrowPointsYIn extends GworPointsBase$1 {
+    onBind() {
+        var _a;
+        if (['area', 'line'].includes(this.target.type)) {
+            const { from, to } = growPointsYIn(this.target, this.params.options, this.params);
+            const fromAttrs = (_a = this.target.context.lastAttrs) !== null && _a !== void 0 ? _a : from;
+            this.props = to;
+            this.propKeys = Object.keys(to).filter(key => to[key] != null);
+            this.animate.reSyncProps();
+            this.from = fromAttrs;
+            this.to = to;
+            this.target.setAttributes(fromAttrs);
+        }
+        else {
+            this.valid = false;
+        }
+    }
+}
+class GrowPointsYOut extends GworPointsBase$1 {
+    onBind() {
+        if (['area', 'line'].includes(this.target.type)) {
+            const attrs = this.target.getFinalAttribute();
+            const { from, to } = growPointsYOut(this.target, this.params.options, this.params);
+            this.props = to;
+            this.propKeys = Object.keys(to).filter(key => to[key] != null);
+            this.animate.reSyncProps();
+            this.from = from || attrs;
+            this.to = to;
+        }
+        else {
+            this.valid = false;
+        }
+    }
+}
+
+const growRadiusInIndividual = (graphic, options, animationParameters) => {
+    const attrs = graphic.getFinalAttribute();
+    if (options && options.orient === 'inside') {
+        return {
+            from: { innerRadius: attrs === null || attrs === void 0 ? void 0 : attrs.outerRadius },
+            to: { innerRadius: attrs === null || attrs === void 0 ? void 0 : attrs.innerRadius }
+        };
+    }
+    return {
+        from: { outerRadius: attrs === null || attrs === void 0 ? void 0 : attrs.innerRadius },
+        to: { outerRadius: attrs === null || attrs === void 0 ? void 0 : attrs.outerRadius }
+    };
+};
+const growRadiusInOverall = (graphic, options, animationParameters) => {
+    const attrs = graphic.getFinalAttribute();
+    const overallValue = isNumber(options === null || options === void 0 ? void 0 : options.overall) ? options.overall : 0;
+    return {
+        from: {
+            innerRadius: overallValue,
+            outerRadius: overallValue
+        },
+        to: {
+            innerRadius: attrs === null || attrs === void 0 ? void 0 : attrs.innerRadius,
+            outerRadius: attrs === null || attrs === void 0 ? void 0 : attrs.outerRadius
+        }
+    };
+};
+const growRadiusIn = (graphic, options, animationParameters) => {
+    var _a;
+    return ((_a = options === null || options === void 0 ? void 0 : options.overall) !== null && _a !== void 0 ? _a : false) !== false
+        ? growRadiusInOverall(graphic, options)
+        : growRadiusInIndividual(graphic, options);
+};
+const growRadiusOutIndividual = (graphic, options, animationParameters) => {
+    const attrs = graphic.getFinalAttribute();
+    if (options && options.orient === 'inside') {
+        return {
+            from: { innerRadius: graphic.getGraphicAttribute('innerRadius', true) },
+            to: { innerRadius: attrs === null || attrs === void 0 ? void 0 : attrs.outerRadius }
+        };
+    }
+    return {
+        from: { outerRadius: graphic.getGraphicAttribute('outerRadius', true) },
+        to: { outerRadius: attrs === null || attrs === void 0 ? void 0 : attrs.innerRadius }
+    };
+};
+const growRadiusOutOverall = (graphic, options, animationParameters) => {
+    const overallValue = isNumber(options === null || options === void 0 ? void 0 : options.overall) ? options.overall : 0;
+    return {
+        from: {
+            innerRadius: graphic.getGraphicAttribute('innerRadius', true),
+            outerRadius: graphic.getGraphicAttribute('outerRadius', true)
+        },
+        to: {
+            innerRadius: overallValue,
+            outerRadius: overallValue
+        }
+    };
+};
+const growRadiusOut = (graphic, options, animationParameters) => {
+    var _a;
+    return ((_a = options === null || options === void 0 ? void 0 : options.overall) !== null && _a !== void 0 ? _a : false) !== false
+        ? growRadiusOutOverall(graphic, options)
+        : growRadiusOutIndividual(graphic, options);
+};
+class GworPointsBase extends ACustomAnimate {
+    constructor(from, to, duration, easing, params) {
+        super(from, to, duration, easing, params);
+    }
+    onUpdate(end, ratio, out) {
+        this.propKeys.forEach(key => {
+            out[key] = this.from[key] + (this.to[key] - this.from[key]) * ratio;
+        });
+        this.target.setAttributes(out);
+    }
+}
+class GrowRadiusIn extends GworPointsBase {
+    onBind() {
+        var _a;
+        const { from, to } = growRadiusIn(this.target, this.params.options, this.params);
+        const fromAttrs = (_a = this.target.context.lastAttrs) !== null && _a !== void 0 ? _a : from;
+        this.props = to;
+        this.propKeys = Object.keys(to).filter(key => to[key] != null);
+        this.animate.reSyncProps();
+        this.from = fromAttrs;
+        this.to = to;
+        this.target.setAttributes(fromAttrs);
+    }
+}
+class GrowRadiusOut extends GworPointsBase {
+    onBind() {
+        var _a;
+        const { from, to } = growRadiusOut(this.target, this.params.options, this.params);
+        const fromAttrs = (_a = this.target.context.lastAttrs) !== null && _a !== void 0 ? _a : from;
+        this.props = to;
+        this.propKeys = Object.keys(to).filter(key => to[key] != null);
+        this.animate.reSyncProps();
+        this.from = fromAttrs;
+        this.to = to;
+        this.target.setAttributes(fromAttrs);
+    }
+}
+
+function growWidthInIndividual(graphic, options, animationParameters) {
+    const attrs = graphic.getFinalAttribute();
+    const x = attrs.x;
+    const x1 = attrs.x1;
+    const width = attrs.width;
+    if (options && options.orient === 'negative') {
+        const computedX1 = isValid(width) ? Math.max(x, x + width) : Math.max(x, x1);
+        return {
+            from: { x: computedX1, x1: isNil(x1) ? undefined : computedX1, width: isNil(width) ? undefined : 0 },
+            to: { x: x, x1: x1, width: width }
+        };
+    }
+    const computedX = isValid(width) ? Math.min(x, x + width) : Math.min(x, x1);
+    return {
+        from: { x: computedX, x1: isNil(x1) ? undefined : computedX, width: isNil(width) ? undefined : 0 },
+        to: { x: x, x1: x1, width: width }
+    };
+}
+function growWidthInOverall(graphic, options, animationParameters) {
+    var _a;
+    const attrs = graphic.getFinalAttribute();
+    const x = attrs.x;
+    const x1 = attrs.x1;
+    const width = attrs.width;
+    let overallValue;
+    if (options && options.orient === 'negative') {
+        if (isNumber(options.overall)) {
+            overallValue = options.overall;
+        }
+        else if (animationParameters.group) {
+            overallValue = (_a = animationParameters.groupWidth) !== null && _a !== void 0 ? _a : animationParameters.group.getBounds().width();
+            animationParameters.groupWidth = overallValue;
+        }
+        else {
+            overallValue = animationParameters.width;
+        }
+    }
+    else {
+        overallValue = isNumber(options === null || options === void 0 ? void 0 : options.overall) ? options === null || options === void 0 ? void 0 : options.overall : 0;
+    }
+    return {
+        from: { x: overallValue, x1: isNil(x1) ? undefined : overallValue, width: isNil(width) ? undefined : 0 },
+        to: { x: x, x1: x1, width: width }
+    };
+}
+const growWidthIn = (graphic, options, animationParameters) => {
+    var _a;
+    return ((_a = options === null || options === void 0 ? void 0 : options.overall) !== null && _a !== void 0 ? _a : false) !== false
+        ? growWidthInOverall(graphic, options, animationParameters)
+        : growWidthInIndividual(graphic, options);
+};
+function growWidthOutIndividual(graphic, options, animationParameters) {
+    const attrs = graphic.getFinalAttribute();
+    const x = attrs.x;
+    const x1 = attrs.x1;
+    const width = attrs.width;
+    if (options && options.orient === 'negative') {
+        const computedX1 = isValid(width) ? Math.max(x, x + width) : Math.max(x, x1);
+        return {
+            to: { x: computedX1, x1: isNil(x1) ? undefined : computedX1, width: isNil(width) ? undefined : 0 }
+        };
+    }
+    const computedX = isValid(width) ? Math.min(x, x + width) : Math.min(x, x1);
+    return {
+        to: { x: computedX, x1: isNil(x1) ? undefined : computedX, width: isNil(width) ? undefined : 0 }
+    };
+}
+function growWidthOutOverall(graphic, options, animationParameters) {
+    var _a;
+    const attrs = graphic.getFinalAttribute();
+    const x1 = attrs.x1;
+    const width = attrs.width;
+    let overallValue;
+    if (options && options.orient === 'negative') {
+        if (isNumber(options.overall)) {
+            overallValue = options.overall;
+        }
+        else if (animationParameters.group) {
+            overallValue = (_a = animationParameters.groupWidth) !== null && _a !== void 0 ? _a : animationParameters.group.getBounds().width();
+            animationParameters.groupWidth = overallValue;
+        }
+        else {
+            overallValue = animationParameters.width;
+        }
+    }
+    else {
+        overallValue = isNumber(options === null || options === void 0 ? void 0 : options.overall) ? options.overall : 0;
+    }
+    return {
+        to: { x: overallValue, x1: isNil(x1) ? undefined : overallValue, width: isNil(width) ? undefined : 0 }
+    };
+}
+const growWidthOut = (graphic, options, animationParameters) => {
+    var _a;
+    return ((_a = options === null || options === void 0 ? void 0 : options.overall) !== null && _a !== void 0 ? _a : false) !== false
+        ? growWidthOutOverall(graphic, options, animationParameters)
+        : growWidthOutIndividual(graphic, options);
+};
+class GrowWidthIn extends ACustomAnimate {
+    constructor(from, to, duration, easing, params) {
+        super(from, to, duration, easing, params);
+    }
+    onBind() {
+        var _a;
+        const { from, to } = growWidthIn(this.target, this.params.options, this.params);
+        const fromAttrs = (_a = this.target.context.lastAttrs) !== null && _a !== void 0 ? _a : from;
+        this.props = to;
+        this.propKeys = Object.keys(to).filter(key => to[key] != null);
+        this.animate.reSyncProps();
+        this.from = fromAttrs;
+        this.to = to;
+        this.target.setAttributes(fromAttrs);
+    }
+    onEnd(cb) {
+        super.onEnd(cb);
+    }
+    onUpdate(end, ratio, out) {
+        this.propKeys.forEach(key => {
+            out[key] = this.from[key] + (this.to[key] - this.from[key]) * ratio;
+        });
+        this.target.setAttributes(out);
+    }
+}
+class GrowWidthOut extends ACustomAnimate {
+    constructor(from, to, duration, easing, params) {
+        super(from, to, duration, easing, params);
+    }
+    onBind() {
+        const attrs = this.target.getFinalAttribute();
+        const { from, to } = growWidthOut(this.target, this.params.options, this.params);
+        this.props = to;
+        this.propKeys = Object.keys(to).filter(key => to[key] != null);
+        this.animate.reSyncProps();
+        this.from = from || attrs;
+        this.to = to;
+    }
+    onEnd(cb) {
+        super.onEnd(cb);
+    }
+    onUpdate(end, ratio, out) {
+        this.propKeys.forEach(key => {
+            out[key] = this.from[key] + (this.to[key] - this.from[key]) * ratio;
+        });
+        this.target.setAttributes(out);
+    }
+}
+
+class ScaleIn extends ACustomAnimate {
+    constructor(from, to, duration, easing, params) {
+        super(from, to, duration, easing, params);
+    }
+    onBind() {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+        let from;
+        let to;
+        const attrs = this.target.getFinalAttribute();
+        const fromAttrs = (_a = this.target.context.lastAttrs) !== null && _a !== void 0 ? _a : {};
+        switch ((_b = this.params) === null || _b === void 0 ? void 0 : _b.direction) {
+            case 'x':
+                from = { scaleX: (_c = fromAttrs.scaleX) !== null && _c !== void 0 ? _c : 0 };
+                to = { scaleX: (_d = attrs === null || attrs === void 0 ? void 0 : attrs.scaleX) !== null && _d !== void 0 ? _d : 1 };
+                break;
+            case 'y':
+                from = { scaleY: (_e = fromAttrs.scaleY) !== null && _e !== void 0 ? _e : 0 };
+                to = { scaleY: (_f = attrs === null || attrs === void 0 ? void 0 : attrs.scaleY) !== null && _f !== void 0 ? _f : 1 };
+                break;
+            case 'xy':
+            default:
+                from = { scaleX: (_g = fromAttrs.scaleX) !== null && _g !== void 0 ? _g : 0, scaleY: (_h = fromAttrs.scaleY) !== null && _h !== void 0 ? _h : 0 };
+                to = {
+                    scaleX: (_j = attrs === null || attrs === void 0 ? void 0 : attrs.scaleX) !== null && _j !== void 0 ? _j : 1,
+                    scaleY: (_k = attrs === null || attrs === void 0 ? void 0 : attrs.scaleY) !== null && _k !== void 0 ? _k : 1
+                };
+        }
+        this.props = to;
+        this.propKeys = Object.keys(to);
+        this.animate.reSyncProps();
+        this.from = from;
+        this.to = to;
+        this.target.setAttributes(from);
+    }
+    onEnd(cb) {
+        super.onEnd(cb);
+    }
+    onUpdate(end, ratio, out) {
+        this.propKeys.forEach(key => {
+            out[key] = this.from[key] + (this.to[key] - this.from[key]) * ratio;
+        });
+        this.target.setAttributes(out);
+    }
+}
+class ScaleOut extends ACustomAnimate {
+    constructor(from, to, duration, easing, params) {
+        super(from, to, duration, easing, params);
+    }
+    onBind() {
+        var _a, _b, _c, _d, _e;
+        let from;
+        let to;
+        const attrs = this.target.getFinalAttribute();
+        switch ((_a = this.params) === null || _a === void 0 ? void 0 : _a.direction) {
+            case 'x':
+                from = { scaleX: (_b = attrs === null || attrs === void 0 ? void 0 : attrs.scaleX) !== null && _b !== void 0 ? _b : 1 };
+                to = { scaleX: 0 };
+                break;
+            case 'y':
+                from = { scaleY: (_c = attrs === null || attrs === void 0 ? void 0 : attrs.scaleY) !== null && _c !== void 0 ? _c : 1 };
+                to = { scaleY: 0 };
+                break;
+            case 'xy':
+            default:
+                from = { scaleX: (_d = attrs === null || attrs === void 0 ? void 0 : attrs.scaleX) !== null && _d !== void 0 ? _d : 1, scaleY: (_e = attrs === null || attrs === void 0 ? void 0 : attrs.scaleY) !== null && _e !== void 0 ? _e : 1 };
+                to = {
+                    scaleX: 0,
+                    scaleY: 0
+                };
+        }
+        this.props = to;
+        this.propKeys = Object.keys(to);
+        this.animate.reSyncProps();
+        this.from = from;
+        this.to = to;
+    }
+    onEnd(cb) {
+        super.onEnd(cb);
+    }
+    onUpdate(end, ratio, out) {
+        this.propKeys.forEach(key => {
+            out[key] = this.from[key] + (this.to[key] - this.from[key]) * ratio;
+        });
+        this.target.setAttributes(out);
+    }
+}
+
+class State extends ACustomAnimate {
+    constructor(from, to, duration, easing, params) {
+        super(from, to, duration, easing, params);
+    }
+    update(end, ratio, out) {
+        this.onStart();
+        if (!this.props || !this.propKeys) {
+            return;
+        }
+        const easedRatio = this.easing(ratio);
+        this.animate.interpolateUpdateFunction
+            ? this.animate.interpolateUpdateFunction(this.fromProps, this.props, easedRatio, this, this.target)
+            : this.interpolateUpdateFunctions.forEach((func, index) => {
+                if (!this.animate.validAttr(this.propKeys[index])) {
+                    return;
+                }
+                const key = this.propKeys[index];
+                const fromValue = this.fromProps[key];
+                const toValue = this.props[key];
+                func(key, fromValue, toValue, easedRatio, this, this.target);
+            });
+        this.onUpdate(end, easedRatio, out);
+    }
+}
+
+class Update extends ACustomAnimate {
+    constructor(from, to, duration, easing, params) {
+        const { diffAttrs = {} } = params;
+        super(from, diffAttrs, duration, easing, params);
+        this.params = params;
+    }
+    update(end, ratio, out) {
+        this.onStart();
+        if (!this.props || !this.propKeys) {
+            return;
+        }
+        const easedRatio = this.easing(ratio);
+        this.animate.interpolateUpdateFunction
+            ? this.animate.interpolateUpdateFunction(this.fromProps, this.props, easedRatio, this, this.target)
+            : this.interpolateUpdateFunctions.forEach((func, index) => {
+                if (!this.animate.validAttr(this.propKeys[index])) {
+                    return;
+                }
+                const key = this.propKeys[index];
+                const fromValue = this.fromProps[key];
+                const toValue = this.props[key];
+                func(key, fromValue, toValue, easedRatio, this, this.target);
+            });
+        this.onUpdate(end, easedRatio, out);
+    }
+}
+
+const registerCustomAnimate = () => {
+    AnimateExecutor.registerBuiltInAnimate('scaleIn', ScaleIn);
+    AnimateExecutor.registerBuiltInAnimate('scaleOut', ScaleOut);
+    AnimateExecutor.registerBuiltInAnimate('growHeightIn', GrowHeightIn);
+    AnimateExecutor.registerBuiltInAnimate('growHeightOut', GrowHeightOut);
+    AnimateExecutor.registerBuiltInAnimate('growWidthIn', GrowWidthIn);
+    AnimateExecutor.registerBuiltInAnimate('growWidthOut', GrowWidthOut);
+    AnimateExecutor.registerBuiltInAnimate('growCenterIn', GrowCenterIn);
+    AnimateExecutor.registerBuiltInAnimate('growCenterOut', GrowCenterOut);
+    AnimateExecutor.registerBuiltInAnimate('clipIn', ClipIn);
+    AnimateExecutor.registerBuiltInAnimate('clipOut', ClipOut);
+    AnimateExecutor.registerBuiltInAnimate('fadeIn', FadeIn);
+    AnimateExecutor.registerBuiltInAnimate('fadeOut', FadeOut);
+    AnimateExecutor.registerBuiltInAnimate('growPointsIn', GrowPointsIn);
+    AnimateExecutor.registerBuiltInAnimate('growPointsOut', GrowPointsOut);
+    AnimateExecutor.registerBuiltInAnimate('growPointsXIn', GrowPointsXIn);
+    AnimateExecutor.registerBuiltInAnimate('growPointsXOut', GrowPointsXOut);
+    AnimateExecutor.registerBuiltInAnimate('growPointsYIn', GrowPointsYIn);
+    AnimateExecutor.registerBuiltInAnimate('growPointsYOut', GrowPointsYOut);
+    AnimateExecutor.registerBuiltInAnimate('growAngleIn', GrowAngleIn);
+    AnimateExecutor.registerBuiltInAnimate('growAngleOut', GrowAngleOut);
+    AnimateExecutor.registerBuiltInAnimate('growRadiusIn', GrowRadiusIn);
+    AnimateExecutor.registerBuiltInAnimate('growRadiusOut', GrowRadiusOut);
+    AnimateExecutor.registerBuiltInAnimate('update', Update);
+    AnimateExecutor.registerBuiltInAnimate('state', State);
+};
+
+export { ACustomAnimate, Animate, AnimateExecutor, AnimateMode, AnimateStatus, AnimateStepType, AnimationStateManager, AnimationStateStore, AnimationTransitionRegistry, ClipAngleAnimate, ClipDirectionAnimate, ClipGraphicAnimate, ClipRadiusAnimate, DefaultTicker, DefaultTimeline, GraphicStateExtension, GroupFadeIn, GroupFadeOut, IncreaseCount, InputText, ManualTicker, RotateBySphereAnimate, Step, TagPointsUpdate, generatorPathEasingFunc, registerAnimate, registerCustomAnimate, transitionRegistry };