@visactor/vrender-core 0.16.0-alpha.0

package/cjs/animate/custom-animate.js

@@ -0,0 +1,643 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+    value: !0
+}), exports.AnimateGroup1 = exports.AnimateGroup = exports.AttributeAnimate = exports.GroupFadeOut = exports.GroupFadeIn = exports.RotateBySphereAnimate = exports.ClipDirectionAnimate = exports.ClipRadiusAnimate = exports.ClipAngleAnimate = exports.ClipGraphicAnimate = exports.GraphicAnimate = exports.TagPointsUpdate = exports.MotionPath = exports.Meteor = exports.StreamLight = exports.InputText = exports.FadeInPlus = exports.IncreaseCount = void 0;
+
+const vutils_1 = require("@visactor/vutils"), application_1 = require("../application"), enums_1 = require("../common/enums"), animate_1 = require("./animate"), easing_1 = require("./easing"), utils_1 = require("../common/utils");
+
+class IncreaseCount extends animate_1.ACustomAnimate {
+    constructor(from, to, duration, easing, params) {
+        super(from, to, duration, easing, params);
+    }
+    getEndProps() {
+        return !1 === this.valid ? {} : {
+            text: this.to
+        };
+    }
+    onBind() {
+        var _a, _b, _c, _d, _e, _f;
+        this.fromNumber = (0, vutils_1.isNumber)(null === (_a = this.from) || void 0 === _a ? void 0 : _a.text) ? null === (_b = this.from) || void 0 === _b ? void 0 : _b.text : Number.parseFloat(null === (_c = this.from) || void 0 === _c ? void 0 : _c.text), 
+        this.toNumber = (0, vutils_1.isNumber)(null === (_d = this.to) || void 0 === _d ? void 0 : _d.text) ? null === (_e = this.to) || void 0 === _e ? void 0 : _e.text : Number.parseFloat(null === (_f = this.to) || void 0 === _f ? void 0 : _f.text), 
+        Number.isFinite(this.toNumber) || (this.fromNumber = 0), Number.isFinite(this.toNumber) || (this.valid = !1);
+    }
+    onEnd() {}
+    onUpdate(end, ratio, out) {
+        var _a, _b;
+        !1 !== this.valid && (out.text = end ? this.toNumber.toFixed() : (this.fromNumber + (this.toNumber - this.fromNumber) * ratio).toFixed(null !== (_b = null === (_a = this.params) || void 0 === _a ? void 0 : _a.fixed) && void 0 !== _b ? _b : 0));
+    }
+}
+
+var Direction;
+
+exports.IncreaseCount = IncreaseCount, function(Direction) {
+    Direction[Direction.LEFT_TO_RIGHT = 0] = "LEFT_TO_RIGHT", Direction[Direction.RIGHT_TO_LEFT = 1] = "RIGHT_TO_LEFT", 
+    Direction[Direction.TOP_TO_BOTTOM = 2] = "TOP_TO_BOTTOM", Direction[Direction.BOTTOM_TO_TOP = 3] = "BOTTOM_TO_TOP", 
+    Direction[Direction.STROKE = 4] = "STROKE";
+}(Direction || (Direction = {}));
+
+class FadeInPlus extends animate_1.ACustomAnimate {
+    constructor(from, to, duration, easing, params) {
+        super(from, to, duration, easing, params);
+        const {direction: direction = Direction.LEFT_TO_RIGHT, fill: fill = !0, stroke: stroke = !0} = params || {};
+        this.direction = direction, this.fill = fill, this.stroke = stroke, this.fillGradient = {
+            gradient: "linear",
+            stops: []
+        }, this.strokeGradient = {
+            gradient: "linear",
+            stops: []
+        };
+    }
+    getEndProps() {
+        return {
+            fill: this.toFill,
+            stroke: this.toStroke
+        };
+    }
+    onBind() {
+        this.toFill = this.target.getComputedAttribute("fill"), this.toStroke = this.target.getComputedAttribute("stroke");
+    }
+    onEnd() {}
+    onUpdate(end, ratio, out) {
+        if (this.toFill && this.toStroke) switch (this.direction) {
+          case Direction.RIGHT_TO_LEFT:
+            this.rightToLeft(end, ratio, out);
+            break;
+
+          case Direction.TOP_TO_BOTTOM:
+            this.topToBottom(end, ratio, out);
+            break;
+
+          case Direction.BOTTOM_TO_TOP:
+            this.bottomToTop(end, ratio, out);
+            break;
+
+          case Direction.STROKE:
+            this.strokePath(end, ratio, out);
+            break;
+
+          default:
+            this.leftToRight(end, ratio, out);
+        }
+    }
+    leftToRight(end, ratio, out) {
+        if (this.fill) {
+            const toFillColor = this.toFill;
+            this.fillGradient.x0 = 0, this.fillGradient.y0 = 0, this.fillGradient.x1 = 1, this.fillGradient.y1 = 0, 
+            this.fillGradient.stops = [ {
+                offset: 0,
+                color: toFillColor
+            }, {
+                offset: ratio,
+                color: toFillColor
+            }, {
+                offset: Math.min(1, 2 * ratio),
+                color: "transparent"
+            } ], out.fill = this.fillGradient;
+        }
+        if (this.stroke) {
+            const toStrokeColor = this.toStroke;
+            this.strokeGradient.x0 = 0, this.strokeGradient.y0 = 0, this.strokeGradient.x1 = 1, 
+            this.strokeGradient.y1 = 0, this.strokeGradient.stops = [ {
+                offset: 0,
+                color: toStrokeColor
+            }, {
+                offset: ratio,
+                color: toStrokeColor
+            }, {
+                offset: Math.min(1, 6 * ratio),
+                color: "transparent"
+            } ], out.stroke = this.strokeGradient;
+        }
+    }
+    strokePath(end, ratio, out) {
+        if (this.fill) {
+            const toFillColor = this.toFill;
+            this.fillGradient.x0 = 0, this.fillGradient.y0 = 0, this.fillGradient.x1 = 1, this.fillGradient.y1 = 0, 
+            this.fillGradient.stops = [ {
+                offset: 0,
+                color: toFillColor
+            }, {
+                offset: ratio,
+                color: toFillColor
+            }, {
+                offset: Math.min(1, 2 * ratio),
+                color: "transparent"
+            } ], out.fill = this.fillGradient;
+        }
+        if (this.stroke) {
+            const dashLen = 300, offset = ratio * dashLen;
+            out.lineDash = [ offset, dashLen - offset ];
+        }
+    }
+    rightToLeft(end, ratio, out) {}
+    topToBottom(end, ratio, out) {}
+    bottomToTop(end, ratio, out) {}
+}
+
+exports.FadeInPlus = FadeInPlus;
+
+class InputText extends animate_1.ACustomAnimate {
+    constructor() {
+        super(...arguments), this.fromText = "", this.toText = "";
+    }
+    getEndProps() {
+        return !1 === this.valid ? {} : {
+            text: this.to
+        };
+    }
+    onBind() {
+        var _a, _b, _c, _d;
+        if (this.fromText = null !== (_b = null === (_a = this.from) || void 0 === _a ? void 0 : _a.text) && void 0 !== _b ? _b : "", 
+        this.toText = null !== (_d = null === (_c = this.to) || void 0 === _c ? void 0 : _c.text) && void 0 !== _d ? _d : "", 
+        !this.toText || (0, vutils_1.isArray)(this.toText)) this.valid = !1; else {
+            this.toText = this.toText.toString();
+            const root = this.target.attachShadow(), line = application_1.application.graphicService.creator.line({
+                x: 0,
+                y: 0,
+                points: [ {
+                    x: 0,
+                    y: 0
+                }, {
+                    x: 0,
+                    y: this.target.getComputedAttribute("fontSize")
+                } ],
+                stroke: "black",
+                lineWidth: 1
+            });
+            root.add(line);
+        }
+    }
+    onEnd() {
+        this.target.detachShadow();
+    }
+    onUpdate(end, ratio, out) {
+        var _a;
+        if (!1 === this.valid) return;
+        const fromCount = this.fromText.length, toCount = this.toText.length, count = Math.ceil(fromCount + (toCount - fromCount) * ratio);
+        out.text = this.toText.substr(0, count);
+        const line = null === (_a = this.target.shadowRoot) || void 0 === _a ? void 0 : _a.at(0), endX = this.target.clipedWidth + 2;
+        line.setAttribute("x", endX);
+    }
+}
+
+exports.InputText = InputText;
+
+class StreamLight extends animate_1.ACustomAnimate {
+    constructor(from, to, duration, easing, params) {
+        super(from, to, duration, easing, params);
+    }
+    getEndProps() {
+        return {};
+    }
+    onStart() {
+        var _a;
+        const root = this.target.attachShadow(), height = this.target.AABBBounds.height(), rect = application_1.application.graphicService.creator.rect(Object.assign(Object.assign({
+            height: height,
+            fill: "#bcdeff",
+            shadowBlur: 30,
+            shadowColor: "#bcdeff"
+        }, null === (_a = this.params) || void 0 === _a ? void 0 : _a.attribute), {
+            x: 0,
+            y: 0,
+            width: 0
+        }));
+        this.rect = rect, root.add(rect);
+    }
+    onBind() {}
+    onEnd() {
+        this.target.detachShadow();
+    }
+    onUpdate(end, ratio, out) {
+        var _a, _b, _c, _d, _e, _f;
+        const parentWidth = null !== (_a = this.target.attribute.width) && void 0 !== _a ? _a : 250, streamLength = null !== (_c = null === (_b = this.params) || void 0 === _b ? void 0 : _b.streamLength) && void 0 !== _c ? _c : parentWidth, maxLength = null !== (_f = null === (_e = null === (_d = this.params) || void 0 === _d ? void 0 : _d.attribute) || void 0 === _e ? void 0 : _e.width) && void 0 !== _f ? _f : 60, startX = -maxLength, currentX = startX + (streamLength - startX) * ratio, x = Math.max(currentX, 0), w = Math.min(Math.min(currentX + maxLength, maxLength), streamLength - currentX), width = w + x > parentWidth ? Math.max(parentWidth - x, 0) : w;
+        this.rect.setAttributes({
+            x: x,
+            width: width
+        }, !1, {
+            type: enums_1.AttributeUpdateType.ANIMATE_PLAY,
+            animationState: {
+                ratio: ratio,
+                end: end
+            }
+        });
+    }
+}
+
+exports.StreamLight = StreamLight;
+
+class Meteor extends animate_1.ACustomAnimate {
+    get lastPos() {
+        return this.posList[this.posList.length - 1];
+    }
+    constructor(size, duration, easing, params) {
+        super(null, null, duration, easing, params), this.size = size, this.posList = [];
+    }
+    onBind() {
+        const root = this.target.attachShadow();
+        this.root = root;
+        for (let i = 0; i < this.size; i++) {
+            const g = this.target.clone(), scale = Math.min((this.size - i) / this.size * 3, 1), opacity = Math.min(.2 + .7 / this.size);
+            g.setAttributes({
+                x: 0,
+                y: 0,
+                dx: 0,
+                dy: 0,
+                scaleX: scale,
+                scaleY: scale,
+                opacity: opacity
+            }, !1, {
+                type: enums_1.AttributeUpdateType.ANIMATE_BIND
+            }), root.add(g);
+        }
+    }
+    onUpdate(end, ratio, out) {
+        if (end) return this.target.detachShadow(), void (this.posList.length = 0);
+        const x = this.target.getComputedAttribute("x"), y = this.target.getComputedAttribute("y"), nextPos = new vutils_1.Point(x, y);
+        this.posList.length ? (this.target.shadowRoot.forEachChildren(((g, i) => {
+            const pos = this.posList[Math.max(this.posList.length - i - 1, 0)];
+            g.setAttributes({
+                x: pos.x - x,
+                y: pos.y - y
+            }, !1);
+        })), this.posList.push(nextPos)) : this.posList.push(nextPos);
+    }
+}
+
+exports.Meteor = Meteor;
+
+class MotionPath extends animate_1.ACustomAnimate {
+    constructor(from, to, duration, easing, params) {
+        var _a;
+        super(from, to, duration, easing, params), params && (this.pathLength = params.path.getLength(), 
+        this.path = params.path, this.distance = params.distance, this.to = params.distance * this.pathLength, 
+        this.initAngle = null !== (_a = params.initAngle) && void 0 !== _a ? _a : 0, this.changeAngle = !!params.changeAngle, 
+        this.cb = params.cb);
+    }
+    onUpdate(end, ratio, out) {
+        const at = this.to * ratio, {pos: pos, angle: angle} = this.path.getAttrAt(at);
+        out.x = pos.x, out.y = pos.y, this.changeAngle && (out.angle = angle + this.initAngle), 
+        this.cb && this.cb(this.from, this.to, ratio, this.target);
+    }
+}
+
+exports.MotionPath = MotionPath;
+
+class TagPointsUpdate extends animate_1.ACustomAnimate {
+    constructor(from, to, duration, easing, params) {
+        super(from, to, duration, easing, params), this.newPointAnimateType = "appear" === (null == params ? void 0 : params.newPointAnimateType) ? "appear" : "grow";
+    }
+    onBind() {
+        var _a, _b;
+        const originFromPoints = null === (_a = this.from) || void 0 === _a ? void 0 : _a.points, originToPoints = null === (_b = this.to) || void 0 === _b ? void 0 : _b.points;
+        this.fromPoints = originFromPoints ? Array.isArray(originFromPoints) ? originFromPoints : [ originFromPoints ] : [], 
+        this.toPoints = originToPoints ? Array.isArray(originToPoints) ? originToPoints : [ originToPoints ] : [];
+        const tagMap = new Map;
+        this.fromPoints.forEach((point => {
+            point.context && tagMap.set(point.context, point);
+        }));
+        let firstMatchedPoint, lastMatchedPoint, firstMatchedIndex = 1 / 0, lastMatchedIndex = -1 / 0;
+        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;
+        }
+        let prevMatchedPoint = this.toPoints[0];
+        this.interpolatePoints = this.toPoints.map(((point, index) => {
+            const matchedPoint = tagMap.get(point.context);
+            return matchedPoint ? (prevMatchedPoint = matchedPoint, [ matchedPoint, point ]) : "appear" === this.newPointAnimateType ? [ point, point ] : index < firstMatchedIndex && firstMatchedPoint ? [ firstMatchedPoint, point ] : index > lastMatchedIndex && lastMatchedPoint ? [ lastMatchedPoint, point ] : [ prevMatchedPoint, point ];
+        })), this.points = this.interpolatePoints.map((interpolate => {
+            const fromPoint = interpolate[0], toPoint = interpolate[1], newPoint = new vutils_1.Point(fromPoint.x, fromPoint.y, fromPoint.x1, fromPoint.y1);
+            return newPoint.defined = toPoint.defined, newPoint.context = toPoint.context, newPoint;
+        }));
+    }
+    onUpdate(end, ratio, out) {
+        this.points = this.points.map(((point, index) => {
+            const newPoint = (0, utils_1.pointInterpolation)(this.interpolatePoints[index][0], this.interpolatePoints[index][1], ratio);
+            return newPoint.context = point.context, newPoint;
+        })), out.points = this.points;
+    }
+}
+
+exports.TagPointsUpdate = TagPointsUpdate;
+
+class GraphicAnimate extends animate_1.ACustomAnimate {
+    constructor(from, to, duration, easing, params) {
+        super(from, to, duration, easing, params), this.graphic = null == params ? void 0 : params.graphic;
+    }
+    onUpdate(end, ratio, out) {
+        this.graphic && Object.keys(this.from).forEach((k => {
+            out[k] = this.from[k] + (this.to[k] - this.from[k]) * ratio;
+        }));
+    }
+}
+
+exports.GraphicAnimate = GraphicAnimate;
+
+class ClipGraphicAnimate extends animate_1.ACustomAnimate {
+    constructor(from, to, duration, easing, params) {
+        super(null, null, duration, easing, params), this.clipFromAttribute = from, this.clipToAttribute = to, 
+        this._group = null == params ? void 0 : params.group, this._clipGraphic = null == params ? void 0 : params.clipGraphic;
+    }
+    onBind() {
+        this._group && this._clipGraphic && (this._lastClip = this._group.attribute.clip, 
+        this._lastPath = this._group.attribute.path, this._group.setAttributes({
+            clip: !0,
+            path: [ this._clipGraphic ]
+        }, !1, {
+            type: enums_1.AttributeUpdateType.ANIMATE_BIND
+        }));
+    }
+    onEnd() {
+        this._group && this._group.setAttributes({
+            clip: this._lastClip,
+            path: this._lastPath
+        }, !1, {
+            type: enums_1.AttributeUpdateType.ANIMATE_END
+        });
+    }
+    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, !1, {
+            type: enums_1.AttributeUpdateType.ANIMATE_UPDATE,
+            animationState: {
+                ratio: ratio,
+                end: end
+            }
+        });
+    }
+}
+
+exports.ClipGraphicAnimate = ClipGraphicAnimate;
+
+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 = null !== (_b = null === (_a = null == params ? void 0 : params.group) || void 0 === _a ? void 0 : _a.attribute) && void 0 !== _b ? _b : {}, width = null !== (_c = groupAttribute.width) && void 0 !== _c ? _c : 0, height = null !== (_d = groupAttribute.height) && void 0 !== _d ? _d : 0, animationType = null !== (_e = null == params ? void 0 : params.animationType) && void 0 !== _e ? _e : "in", startAngle = null !== (_f = null == params ? void 0 : params.startAngle) && void 0 !== _f ? _f : 0, orient = null !== (_g = null == params ? void 0 : params.orient) && void 0 !== _g ? _g : "clockwise";
+        let arcStartAngle = 0, arcEndAngle = 0;
+        "anticlockwise" === orient ? (arcEndAngle = "in" === animationType ? startAngle + 2 * Math.PI : startAngle, 
+        arcEndAngle = startAngle + 2 * Math.PI) : (arcStartAngle = startAngle, arcEndAngle = "out" === animationType ? startAngle + 2 * Math.PI : startAngle);
+        const arc = application_1.application.graphicService.creator.arc({
+            x: null !== (_j = null === (_h = null == params ? void 0 : params.center) || void 0 === _h ? void 0 : _h.x) && void 0 !== _j ? _j : width / 2,
+            y: null !== (_l = null === (_k = null == params ? void 0 : params.center) || void 0 === _k ? void 0 : _k.y) && void 0 !== _l ? _l : height / 2,
+            outerRadius: null !== (_m = null == params ? void 0 : params.radius) && void 0 !== _m ? _m : (width + height) / 2,
+            innerRadius: 0,
+            startAngle: arcStartAngle,
+            endAngle: arcEndAngle,
+            fill: !0
+        });
+        let fromAttributes, toAttributes;
+        "anticlockwise" === orient ? (fromAttributes = {
+            startAngle: startAngle + 2 * Math.PI
+        }, toAttributes = {
+            startAngle: startAngle
+        }) : (fromAttributes = {
+            endAngle: startAngle
+        }, toAttributes = {
+            endAngle: startAngle + 2 * Math.PI
+        }), super("in" === animationType ? fromAttributes : toAttributes, "in" === animationType ? toAttributes : fromAttributes, duration, easing, {
+            group: null == params ? void 0 : params.group,
+            clipGraphic: arc
+        });
+    }
+}
+
+exports.ClipAngleAnimate = ClipAngleAnimate;
+
+class ClipRadiusAnimate extends ClipGraphicAnimate {
+    constructor(from, to, duration, easing, params) {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+        const groupAttribute = null !== (_b = null === (_a = null == params ? void 0 : params.group) || void 0 === _a ? void 0 : _a.attribute) && void 0 !== _b ? _b : {}, width = null !== (_c = groupAttribute.width) && void 0 !== _c ? _c : 0, height = null !== (_d = groupAttribute.height) && void 0 !== _d ? _d : 0, animationType = null !== (_e = null == params ? void 0 : params.animationType) && void 0 !== _e ? _e : "in", startRadius = null !== (_f = null == params ? void 0 : params.startRadius) && void 0 !== _f ? _f : 0, endRadius = null !== (_g = null == params ? void 0 : params.endRadius) && void 0 !== _g ? _g : Math.sqrt((width / 2) ** 2 + (height / 2) ** 2), arc = application_1.application.graphicService.creator.arc({
+            x: null !== (_j = null === (_h = null == params ? void 0 : params.center) || void 0 === _h ? void 0 : _h.x) && void 0 !== _j ? _j : width / 2,
+            y: null !== (_l = null === (_k = null == params ? void 0 : params.center) || void 0 === _k ? void 0 : _k.y) && void 0 !== _l ? _l : height / 2,
+            outerRadius: "out" === animationType ? endRadius : startRadius,
+            innerRadius: 0,
+            startAngle: 0,
+            endAngle: 2 * Math.PI,
+            fill: !0
+        }), fromAttributes = {
+            outerRadius: startRadius
+        }, toAttributes = {
+            outerRadius: endRadius
+        };
+        super("in" === animationType ? fromAttributes : toAttributes, "in" === animationType ? toAttributes : fromAttributes, duration, easing, {
+            group: null == params ? void 0 : params.group,
+            clipGraphic: arc
+        });
+    }
+}
+
+exports.ClipRadiusAnimate = ClipRadiusAnimate;
+
+class ClipDirectionAnimate extends ClipGraphicAnimate {
+    constructor(from, to, duration, easing, params) {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+        const groupAttribute = null !== (_b = null === (_a = null == params ? void 0 : params.group) || void 0 === _a ? void 0 : _a.attribute) && void 0 !== _b ? _b : {}, width = null !== (_d = null !== (_c = null == params ? void 0 : params.width) && void 0 !== _c ? _c : groupAttribute.width) && void 0 !== _d ? _d : 0, height = null !== (_f = null !== (_e = null == params ? void 0 : params.height) && void 0 !== _e ? _e : groupAttribute.height) && void 0 !== _f ? _f : 0, animationType = null !== (_g = null == params ? void 0 : params.animationType) && void 0 !== _g ? _g : "in", direction = null !== (_h = null == params ? void 0 : params.direction) && void 0 !== _h ? _h : "x", orient = null !== (_j = null == params ? void 0 : params.orient) && void 0 !== _j ? _j : "positive", rect = application_1.application.graphicService.creator.rect({
+            x: 0,
+            y: 0,
+            width: "in" === animationType && "x" === direction ? 0 : width,
+            height: "in" === animationType && "y" === direction ? 0 : height,
+            fill: !0
+        });
+        let fromAttributes = {}, toAttributes = {};
+        "y" === direction ? "negative" === orient ? (fromAttributes = {
+            y: height,
+            height: 0
+        }, toAttributes = {
+            y: 0,
+            height: height
+        }) : (fromAttributes = {
+            height: 0
+        }, toAttributes = {
+            height: height
+        }) : "negative" === orient ? (fromAttributes = {
+            x: width,
+            width: 0
+        }, toAttributes = {
+            x: 0,
+            width: width
+        }) : (fromAttributes = {
+            width: 0
+        }, toAttributes = {
+            width: width
+        }), super("in" === animationType ? fromAttributes : toAttributes, "in" === animationType ? toAttributes : fromAttributes, duration, easing, {
+            group: null == params ? void 0 : params.group,
+            clipGraphic: rect
+        });
+    }
+}
+
+exports.ClipDirectionAnimate = ClipDirectionAnimate;
+
+class RotateBySphereAnimate extends animate_1.ACustomAnimate {
+    onStart() {
+        const {center: center, r: r} = "function" == typeof this.params ? this.params() : this.params, startX = this.target.getComputedAttribute("x"), startY = this.target.getComputedAttribute("y"), startZ = this.target.getComputedAttribute("z"), phi = Math.acos((startY - center.y) / r);
+        let theta = Math.acos((startX - center.x) / r / Math.sin(phi));
+        startZ - center.z < 0 && (theta = vutils_1.pi2 - theta), this.theta = theta, this.phi = phi;
+    }
+    onBind() {}
+    onEnd() {}
+    onUpdate(end, ratio, out) {
+        if (null == this.phi || null == this.theta) return;
+        const {center: center, r: r} = "function" == typeof this.params ? this.params() : this.params, deltaAngle = 2 * Math.PI * ratio, theta = this.theta + deltaAngle, phi = this.phi, x = r * Math.sin(phi) * Math.cos(theta) + center.x, y = r * Math.cos(phi) + center.y, z = r * Math.sin(phi) * Math.sin(theta) + center.z;
+        for (out.x = x, out.y = y, out.z = z, out.alpha = theta + vutils_1.pi / 2; out.alpha > vutils_1.pi2; ) out.alpha -= vutils_1.pi2;
+        out.alpha = vutils_1.pi2 - out.alpha, out.zIndex = -1e4 * out.z;
+    }
+}
+
+exports.RotateBySphereAnimate = RotateBySphereAnimate;
+
+class GroupFadeIn extends animate_1.ACustomAnimate {
+    getEndProps() {
+        return {};
+    }
+    onBind() {
+        this.target.setTheme({
+            common: {
+                opacity: 0
+            }
+        });
+    }
+    onEnd() {
+        this.target.setTheme({
+            common: {
+                opacity: 1
+            }
+        });
+    }
+    onUpdate(end, ratio, out) {
+        this.target.setTheme({
+            common: {
+                opacity: ratio
+            }
+        });
+    }
+}
+
+exports.GroupFadeIn = GroupFadeIn;
+
+class GroupFadeOut extends animate_1.ACustomAnimate {
+    getEndProps() {
+        return {};
+    }
+    onBind() {
+        this.target.setTheme({
+            common: {
+                opacity: 1
+            }
+        });
+    }
+    onEnd() {
+        this.target.setTheme({
+            common: {
+                opacity: 0
+            }
+        });
+    }
+    onUpdate(end, ratio, out) {
+        this.target.setTheme({
+            common: {
+                opacity: 1 - ratio
+            }
+        });
+    }
+}
+
+exports.GroupFadeOut = GroupFadeOut;
+
+class AttributeAnimate extends animate_1.ACustomAnimate {
+    constructor(to, duration, easing) {
+        super({}, to, duration, easing);
+    }
+    getEndProps() {
+        return this.to;
+    }
+    onBind() {
+        Object.keys(this.to).forEach((k => {
+            this.from[k] = this.target.getComputedAttribute(k);
+        }));
+    }
+    onEnd() {}
+    onUpdate(end, ratio, out) {
+        this.target.stepInterpolate(this.subAnimate, this.subAnimate.animate, out, this.step, ratio, end, this.to, this.from);
+    }
+}
+
+exports.AttributeAnimate = AttributeAnimate;
+
+class AnimateGroup extends animate_1.ACustomAnimate {
+    constructor(duration, customAnimates) {
+        super(null, null, duration, "linear"), this.customAnimates = customAnimates;
+    }
+    initAnimates() {
+        this.customAnimates.forEach((a => {
+            a.step = this.step, a.subAnimate = this.subAnimate, a.target = this.target;
+        }));
+    }
+    getEndProps() {
+        const props = {};
+        return this.customAnimates.forEach((a => {
+            Object.assign(props, a.getEndProps());
+        })), props;
+    }
+    onBind() {
+        this.initAnimates(), this.customAnimates.forEach((a => {
+            a.onBind();
+        }));
+    }
+    onEnd() {
+        this.customAnimates.forEach((a => {
+            a.onEnd();
+        }));
+    }
+    onUpdate(end, ratio, out) {
+        this.updating || (this.updating = !0, this.customAnimates.forEach((a => {
+            const easing = a.easing, easingFunc = "string" == typeof easing ? easing_1.Easing[easing] : easing;
+            ratio = easingFunc(ratio), a.onUpdate(end, ratio, out);
+        })), this.updating = !1);
+    }
+}
+
+exports.AnimateGroup = AnimateGroup;
+
+class AnimateGroup1 extends animate_1.ACustomAnimate {
+    constructor(duration, customAnimates) {
+        super(null, null, duration, "linear"), this.customAnimates = customAnimates;
+    }
+    initAnimates() {
+        this.customAnimates.forEach((a => {
+            a.step = this.step, a.subAnimate = this.subAnimate, a.target = this.target;
+        }));
+    }
+    getEndProps() {
+        const props = {};
+        return this.customAnimates.forEach((a => {
+            Object.assign(props, a.getEndProps());
+        })), props;
+    }
+    onBind() {
+        this.initAnimates(), this.customAnimates.forEach((a => {
+            a.onBind();
+        }));
+    }
+    onEnd() {
+        this.customAnimates.forEach((a => {
+            a.onEnd();
+        }));
+    }
+    onUpdate(end, ratio, out) {
+        this.updating || (this.updating = !0, this.customAnimates.forEach((a => {
+            const easing = a.easing, easingFunc = "string" == typeof easing ? easing_1.Easing[easing] : easing;
+            ratio = easingFunc(ratio), a.onUpdate(end, ratio, out);
+        })), this.updating = !1);
+    }
+}
+
+exports.AnimateGroup1 = AnimateGroup1;
+//# sourceMappingURL=custom-animate.js.map