@visactor/vrender-animate
Version:
This module provides a graph-based animation system for VRender.
221 lines (215 loc) • 7.65 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: !0
}), exports.LabelItemDisappear = exports.LabelItemAppear = void 0;
const custom_animate_1 = require("./custom-animate"), component_1 = require("../component"), input_text_1 = require("./input-text");
class LabelItemAppear extends custom_animate_1.AComponentAnimate {
onBind() {
super.onBind();
const animator = (0, component_1.createComponentAnimator)(this.target);
this._animator = animator;
const duration = this.duration, easing = this.easing, target = this.target, {symbolStartOuterType: symbolStartOuterType = "scale", titleType: titleType = "typewriter", titlePanelType: titlePanelType = "scale"} = this.params, symbolTime = duration / 10;
let symbolStartOuterFrom, symbolStartOuterTo;
if (target._symbolStart.setAttributes({
scaleX: 0,
scaleY: 0
}), animator.animate(target._symbolStart, {
type: "to",
to: {
scaleX: 1,
scaleY: 1
},
duration: 5 * symbolTime,
easing: easing
}), "scale" === symbolStartOuterType ? (symbolStartOuterFrom = {
scaleX: 0,
scaleY: 0
}, symbolStartOuterTo = {
scaleX: 1,
scaleY: 1
}) : (symbolStartOuterFrom = {
clipRange: 0
}, symbolStartOuterTo = {
clipRange: 1
}), target._symbolStartOuter.setAttributes(symbolStartOuterFrom), animator.animate(target._symbolStartOuter, {
type: "to",
to: symbolStartOuterTo,
duration: 5 * symbolTime,
easing: easing
}), target._symbolEnd.setAttributes({
scaleX: 0,
scaleY: 0
}), animator.animate(target._symbolEnd, {
type: "to",
to: {
scaleX: 1,
scaleY: 1
},
duration: 2 * symbolTime,
delay: 8 * symbolTime,
easing: easing
}), target._line.setAttributes({
clipRange: 0
}), animator.animate(target._line, {
type: "to",
to: {
clipRange: 1
},
duration: 9 * symbolTime,
easing: easing
}), "typewriter" === titleType) {
const titleTopText = target._titleTop.attribute.text;
target._titleTop.setAttributes({
text: ""
}), animator.animate(target._titleTop, {
type: "custom",
delay: 5 * symbolTime,
duration: 4 * symbolTime,
easing: "linear",
to: {
text: titleTopText
},
custom: input_text_1.InputText
});
const titleBottomText = target._titleBottom.attribute.text;
target._titleBottom.setAttributes({
text: ""
}), animator.animate(target._titleBottom, {
type: "custom",
delay: 5 * symbolTime,
duration: 4 * symbolTime,
easing: "linear",
to: {
text: titleBottomText
},
custom: input_text_1.InputText
});
} else target._titleTop.setAttributes({
dy: target._titleTop.AABBBounds.height() + 10
}), animator.animate(target._titleTop, {
type: "to",
to: {
dy: 0
},
delay: 5 * symbolTime,
duration: 4 * symbolTime,
easing: "linear"
}), target._titleBottom.setAttributes({
dy: -(10 + target._titleBottom.AABBBounds.height())
}), animator.animate(target._titleBottom, {
type: "to",
to: {
dy: 0
},
delay: 5 * symbolTime,
duration: 4 * symbolTime,
easing: "linear"
});
"scale" === titlePanelType ? [ target._titleTopPanel, target._titleBottomPanel ].forEach((panel => {
var _a;
const scaleX = null !== (_a = panel.attribute.scaleX) && void 0 !== _a ? _a : 1;
panel.setAttributes({
scaleX: 0
}), animator.animate(panel, {
type: "to",
to: {
scaleX: scaleX
},
duration: duration,
easing: easing
});
})) : "stroke" === titlePanelType && [ target._titleTopPanel, target._titleBottomPanel ].forEach((panel => {
const b = panel.AABBBounds, totalLen = 2 * (b.width() + b.height());
panel.setAttributes({
lineDash: [ 0, 10 * totalLen ]
}), animator.animate(panel, {
type: "to",
to: {
lineDash: [ totalLen, 10 * totalLen ]
},
duration: duration,
easing: easing
});
})), this.completeBind(animator);
}
}
exports.LabelItemAppear = LabelItemAppear;
class LabelItemDisappear extends custom_animate_1.AComponentAnimate {
onBind() {
super.onBind();
const animator = (0, component_1.createComponentAnimator)(this.target);
this._animator = animator;
const duration = this.duration, easing = this.easing, target = this.target, {mode: mode} = this.params;
"scale" === mode ? animator.animate(target._symbolStart, {
type: "to",
to: {
scaleX: 0,
scaleY: 0
},
duration: duration,
easing: easing
}) : (animator.animate(target._line, {
type: "to",
to: {
clipRange: 0
},
duration: duration,
easing: easing
}), animator.animate(target._symbolStart, {
type: "to",
to: {
scaleX: 0,
scaleY: 0
},
duration: duration / 2,
delay: duration / 2,
easing: easing
}), animator.animate(target._symbolEnd, {
type: "to",
to: {
scaleX: 0,
scaleY: 0
},
duration: duration,
easing: easing
}), animator.animate(target._titleTop, {
type: "to",
to: {
dy: target._titleTop.AABBBounds.height() + 10
},
duration: duration / 2,
easing: easing
}), animator.animate(target._titleBottom, {
type: "to",
to: {
dy: -(10 + target._titleBottom.AABBBounds.height())
},
duration: duration / 2,
easing: easing
}), animator.animate(target._symbolStartOuter, {
type: "to",
to: {
clipRange: 0
},
duration: duration / 2,
delay: duration / 2,
easing: easing
}), animator.animate(target._titleTopPanel, {
type: "to",
to: {
scaleX: 0
},
duration: duration,
easing: easing
}), animator.animate(target._titleBottomPanel, {
type: "to",
to: {
scaleX: 0
},
duration: duration,
easing: easing
})), this.completeBind(animator);
}
}
exports.LabelItemDisappear = LabelItemDisappear;
//# sourceMappingURL=label-item-animate.js.map