@visactor/vrender-core
Version:
## Description
699 lines (670 loc) • 35.6 kB
JavaScript
import { clamp, getDecimalPlaces, isArray, isNumber, isValidNumber, pi, pi2, Point, PointService } from "@visactor/vutils";
import { application } from "../application";
import { AttributeUpdateType } from "../common/enums";
import { CustomPath2D } from "../common/custom-path2d";
import { ACustomAnimate } from "./animate";
import { Easing } from "./easing";
import { pointInterpolation } from "../common/utils";
import { divideCubic } from "../common/segment/curve/cubic-bezier";
export class IncreaseCount extends 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, _g, _h;
this.fromNumber = 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 = 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),
!1 !== this.valid && (this.decimalLength = null !== (_h = null === (_g = this.params) || void 0 === _g ? void 0 : _g.fixed) && void 0 !== _h ? _h : Math.max(getDecimalPlaces(this.fromNumber), getDecimalPlaces(this.toNumber)));
}
onEnd() {}
onUpdate(end, ratio, out) {
var _a;
!1 !== this.valid && (out.text = end ? null === (_a = this.to) || void 0 === _a ? void 0 : _a.text : (this.fromNumber + (this.toNumber - this.fromNumber) * ratio).toFixed(this.decimalLength));
}
}
var Direction;
!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 = {}));
export class FadeInPlus extends 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) {}
}
export class InputText extends ACustomAnimate {
constructor() {
super(...arguments), this.fromText = "", this.toText = "";
}
getEndProps() {
return !1 === this.valid ? {} : {
text: this.to
};
}
onBind() {
var _a, _b, _c;
this.fromText = null !== (_b = null === (_a = this.from) || void 0 === _a ? void 0 : _a.text) && void 0 !== _b ? _b : "",
this.toText = (null === (_c = this.to) || void 0 === _c ? void 0 : _c.text) || "",
(!this.toText || isArray(this.toText) && 0 === this.toText.length) && (this.valid = !1),
isArray(this.toText) && (this.toText = this.toText.map((item => (item || "").toString())));
}
onEnd() {
this.target.detachShadow();
}
onUpdate(end, ratio, out) {
if (!1 === this.valid) return;
const fromCount = this.fromText.length, toTextIsArray = isArray(this.toText), toCount = toTextIsArray ? this.toText.reduce(((c, t) => c + (t || "").length), 0) : this.toText.length, count = Math.ceil(fromCount + (toCount - fromCount) * ratio);
if (toTextIsArray) {
out.text = [];
let len = 0;
this.toText.forEach((t => {
len + t.length > count ? (out.text.push(t.substr(0, count - len)), len = count) : (out.text.push(t),
len += t.length);
}));
} else out.text = this.toText.substr(0, count);
}
}
export class StreamLight extends ACustomAnimate {
constructor(from, to, duration, easing, params) {
super(from, to, duration, easing, params);
}
getEndProps() {
return {};
}
onStart() {
this.target && ("rect" === this.target.type ? this.onStartRect() : "line" === this.target.type ? this.onStartLineOrArea("line") : "area" === this.target.type && this.onStartLineOrArea("area"));
}
onStartLineOrArea(type) {
var _a;
const root = this.target.attachShadow(), line = application.graphicService.creator[type](Object.assign({}, null === (_a = this.params) || void 0 === _a ? void 0 : _a.attribute));
this[type] = line, line.pathProxy = new CustomPath2D, root.add(line);
}
onStartRect() {
var _a, _b, _c;
const root = this.target.attachShadow(), isHorizontal = null === (_b = null === (_a = this.params) || void 0 === _a ? void 0 : _a.isHorizontal) || void 0 === _b || _b, sizeAttr = isHorizontal ? "height" : "width", otherSizeAttr = isHorizontal ? "width" : "height", size = this.target.AABBBounds[sizeAttr](), y = isHorizontal ? 0 : this.target.AABBBounds.y1, rect = application.graphicService.creator.rect(Object.assign(Object.assign({
[sizeAttr]: size,
fill: "#bcdeff",
shadowBlur: 30,
shadowColor: "#bcdeff"
}, null === (_c = this.params) || void 0 === _c ? void 0 : _c.attribute), {
x: 0,
y: y,
[otherSizeAttr]: 0
}));
this.rect = rect, root.add(rect);
}
onBind() {}
onEnd() {
this.target.detachShadow();
}
onUpdate(end, ratio, out) {
return this.rect ? this.onUpdateRect(end, ratio, out) : this.line || this.area ? this.onUpdateLineOrArea(end, ratio, out) : void 0;
}
onUpdateRect(end, ratio, out) {
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
const isHorizontal = null === (_b = null === (_a = this.params) || void 0 === _a ? void 0 : _a.isHorizontal) || void 0 === _b || _b, parentAttr = this.target.attribute;
if (isHorizontal) {
const parentWidth = null !== (_d = null !== (_c = parentAttr.width) && void 0 !== _c ? _c : Math.abs(parentAttr.x1 - parentAttr.x)) && void 0 !== _d ? _d : 250, streamLength = null !== (_f = null === (_e = this.params) || void 0 === _e ? void 0 : _e.streamLength) && void 0 !== _f ? _f : parentWidth, maxLength = null !== (_j = null === (_h = null === (_g = this.params) || void 0 === _g ? void 0 : _g.attribute) || void 0 === _h ? void 0 : _h.width) && void 0 !== _j ? _j : 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,
dx: Math.min(parentAttr.x1 - parentAttr.x, 0)
}, !1, {
type: AttributeUpdateType.ANIMATE_PLAY,
animationState: {
ratio: ratio,
end: end
}
});
} else {
const parentHeight = null !== (_l = null !== (_k = parentAttr.height) && void 0 !== _k ? _k : Math.abs(parentAttr.y1 - parentAttr.y)) && void 0 !== _l ? _l : 250, streamLength = null !== (_o = null === (_m = this.params) || void 0 === _m ? void 0 : _m.streamLength) && void 0 !== _o ? _o : parentHeight, maxLength = null !== (_r = null === (_q = null === (_p = this.params) || void 0 === _p ? void 0 : _p.attribute) || void 0 === _q ? void 0 : _q.height) && void 0 !== _r ? _r : 60, currentY = parentHeight - (streamLength + maxLength) * ratio;
let y = Math.min(currentY, parentHeight);
const h = Math.min(parentHeight - currentY, maxLength);
let height;
y <= 0 ? (height = Math.max(y + h, 0), y = 0) : height = h, this.rect.setAttributes({
y: y,
height: height,
dy: Math.min(parentAttr.y1 - parentAttr.y, 0)
}, !1, {
type: AttributeUpdateType.ANIMATE_PLAY,
animationState: {
ratio: ratio,
end: end
}
});
}
}
onUpdateLineOrArea(end, ratio, out) {
const target = this.line || this.area;
if (!target) return;
const customPath = target.pathProxy, targetLine = this.target;
targetLine.cache || targetLine.cacheArea ? this._onUpdateLineOrAreaWithCache(customPath, targetLine, end, ratio, out) : this._onUpdateLineWithoutCache(customPath, targetLine, end, ratio, out);
const targetAttrs = targetLine.attribute;
target.setAttributes(Object.assign({
stroke: targetAttrs.stroke
}, target.attribute)), target.addUpdateBoundTag();
}
_onUpdateLineOrAreaWithCache(customPath, g, end, ratio, out) {
var _a, _b;
if (customPath.clear(), "line" === g.type) {
let cache = g.cache;
Array.isArray(cache) || (cache = [ cache ]);
const totalLen = cache.reduce(((l, c) => l + c.getLength()), 0), curves = [];
return cache.forEach((c => {
c.curves.forEach((ci => curves.push(ci)));
})), this._updateCurves(customPath, curves, totalLen, ratio);
}
if ("area" === g.type && (null === (_b = null === (_a = g.cacheArea) || void 0 === _a ? void 0 : _a.top) || void 0 === _b ? void 0 : _b.curves)) {
const cache = g.cacheArea, totalLen = cache.top.curves.reduce(((a, b) => a + b.getLength()), 0);
return this._updateCurves(customPath, cache.top.curves, totalLen, ratio);
}
}
_updateCurves(customPath, curves, totalLen, ratio) {
var _a, _b;
const startLen = totalLen * ratio, endLen = Math.min(null !== (_b = startLen + (null === (_a = this.params) || void 0 === _a ? void 0 : _a.streamLength)) && void 0 !== _b ? _b : 10, totalLen);
let lastLen = 0, start = !1;
for (let i = 0; i < curves.length; i++) if (!1 !== curves[i].defined) {
const curveItem = curves[i], len = curveItem.getLength(), startPercent = 1 - (lastLen + len - startLen) / len;
let curveForStart, endPercent = 1 - (lastLen + len - endLen) / len;
if (lastLen < startLen && lastLen + len > startLen) if (start = !0, curveItem.p2 && curveItem.p3) {
const [_, curve2] = divideCubic(curveItem, startPercent);
customPath.moveTo(curve2.p0.x, curve2.p0.y), curveForStart = curve2;
} else {
const p = curveItem.getPointAt(startPercent);
customPath.moveTo(p.x, p.y);
}
if (lastLen < endLen && lastLen + len > endLen) {
if (curveItem.p2 && curveItem.p3) {
curveForStart && (endPercent = (endLen - startLen) / curveForStart.getLength());
const [curve1] = divideCubic(curveForStart || curveItem, endPercent);
customPath.bezierCurveTo(curve1.p1.x, curve1.p1.y, curve1.p2.x, curve1.p2.y, curve1.p3.x, curve1.p3.y);
} else {
const p = curveItem.getPointAt(endPercent);
customPath.lineTo(p.x, p.y);
}
break;
}
if (start) if (curveItem.p2 && curveItem.p3) {
const curve = curveForStart || curveItem;
customPath.bezierCurveTo(curve.p1.x, curve.p1.y, curve.p2.x, curve.p2.y, curve.p3.x, curve.p3.y);
} else customPath.lineTo(curveItem.p1.x, curveItem.p1.y);
lastLen += len;
}
}
_onUpdateLineWithoutCache(customPath, line, end, ratio, out) {
var _a, _b;
const {points: points, curveType: curveType} = line.attribute;
if (!points || points.length < 2 || "linear" !== curveType) return;
let totalLen = 0;
for (let i = 1; i < points.length; i++) totalLen += PointService.distancePP(points[i], points[i - 1]);
const startLen = totalLen * ratio, endLen = Math.min(null !== (_b = startLen + (null === (_a = this.params) || void 0 === _a ? void 0 : _a.streamLength)) && void 0 !== _b ? _b : 10, totalLen), nextPoints = [];
let lastLen = 0;
for (let i = 1; i < points.length; i++) {
const len = PointService.distancePP(points[i], points[i - 1]);
if (lastLen < startLen && lastLen + len > startLen && nextPoints.push(PointService.pointAtPP(points[i - 1], points[i], 1 - (lastLen + len - startLen) / len)),
lastLen < endLen && lastLen + len > endLen) {
nextPoints.push(PointService.pointAtPP(points[i - 1], points[i], 1 - (lastLen + len - endLen) / len));
break;
}
nextPoints.length && nextPoints.push(points[i]), lastLen += len;
}
if (nextPoints.length && !(nextPoints.length < 2)) {
customPath.clear(), customPath.moveTo(nextPoints[0].x, nextPoints[0].y);
for (let i = 1; i < nextPoints.length; i++) customPath.lineTo(nextPoints[i].x, nextPoints[i].y);
}
}
}
export class Meteor extends 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: 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 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);
}
}
export class MotionPath extends 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);
}
}
export class TagPointsUpdate extends ACustomAnimate {
constructor(from, to, duration, easing, params) {
var _a, _b;
super(from, to, duration, easing, params), this.newPointAnimateType = null !== (_a = null == params ? void 0 : params.newPointAnimateType) && void 0 !== _a ? _a : "grow",
this.clipRangeByDimension = null !== (_b = null == params ? void 0 : params.clipRangeByDimension) && void 0 !== _b ? _b : "x";
}
getPoints(attribute, cache = !1) {
if (attribute.points) return attribute.points;
if (attribute.segments) {
const points = [];
return this.segmentsCache || (this.segmentsCache = []), attribute.segments.map((segment => {
var _a, _b;
segment.points && points.push(...segment.points), cache && this.segmentsCache.push(null !== (_b = null === (_a = segment.points) || void 0 === _a ? void 0 : _a.length) && void 0 !== _b ? _b : 0);
})), points;
}
return [];
}
onBind() {
const originFromPoints = this.getPoints(this.from), originToPoints = this.getPoints(this.to, !0);
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;
}
"clip" === this.newPointAnimateType && 0 !== this.toPoints.length && (Number.isFinite(lastMatchedIndex) ? (this.clipRange = this.toPoints[lastMatchedIndex][this.clipRangeByDimension] / this.toPoints[this.toPoints.length - 1][this.clipRangeByDimension],
1 === this.clipRange && (this.shrinkClipRange = this.toPoints[lastMatchedIndex][this.clipRangeByDimension] / this.fromPoints[this.fromPoints.length - 1][this.clipRangeByDimension]),
isValidNumber(this.clipRange) ? this.clipRange = clamp(this.clipRange, 0, 1) : this.clipRange = 0) : this.clipRange = 0);
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 || "clip" === 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 Point(fromPoint.x, fromPoint.y, fromPoint.x1, fromPoint.y1);
return newPoint.defined = toPoint.defined, newPoint.context = toPoint.context, newPoint;
}));
}
onFirstRun() {
const lastClipRange = this.target.attribute.clipRange;
isValidNumber(lastClipRange * this.clipRange) && (this.clipRange *= lastClipRange);
}
onUpdate(end, ratio, out) {
if (this.points = this.points.map(((point, index) => {
const newPoint = pointInterpolation(this.interpolatePoints[index][0], this.interpolatePoints[index][1], ratio);
return newPoint.context = point.context, newPoint;
})), this.clipRange) {
if (this.shrinkClipRange) return void (end ? (out.points = this.toPoints, out.clipRange = 1) : (out.points = this.fromPoints,
out.clipRange = this.clipRange - (this.clipRange - this.shrinkClipRange) * ratio));
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], points = this.points.slice(start, end);
return start = end, Object.assign(Object.assign({}, segment), {
points: points
});
}));
} else out.points = this.points;
}
}
export class GraphicAnimate extends 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;
}));
}
}
export class ClipGraphicAnimate extends 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: AttributeUpdateType.ANIMATE_BIND
}));
}
onEnd() {
this._group && this._group.setAttributes({
clip: this._lastClip,
path: this._lastPath
}, !1, {
type: 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: AttributeUpdateType.ANIMATE_UPDATE,
animationState: {
ratio: ratio,
end: end
}
});
}
}
export 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.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
});
}
}
export 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.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
});
}
}
export 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.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
});
}
}
export class RotateBySphereAnimate extends 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 = 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, cb: cb} = "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 + pi / 2; out.alpha > pi2; ) out.alpha -= pi2;
out.alpha = pi2 - out.alpha, out.zIndex = -1e4 * out.z, cb && cb(out);
}
}
export class AttributeAnimate extends 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);
}
}
export class AnimateGroup extends 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();
}));
}
onStart() {
this.customAnimates.forEach((a => {
a.onStart();
}));
}
onUpdate(end, ratio, out) {
this.updating || (this.updating = !0, this.customAnimates.forEach((a => {
const easing = a.easing, easingFunc = "string" == typeof easing ? Easing[easing] : easing;
ratio = easingFunc(ratio), a.onUpdate(end, ratio, out);
})), this.updating = !1);
}
}
export class AnimateGroup1 extends 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[easing] : easing;
ratio = easingFunc(ratio), a.onUpdate(end, ratio, out);
})), this.updating = !1);
}
}