@visactor/vrender-animate
Version:
This module provides a graph-based animation system for VRender.
218 lines (213 loc) • 7.56 kB
JavaScript
import { AComponentAnimate } from "./custom-animate";
import { createComponentAnimator } from "../component";
import { InputText } from "./input-text";
import { applyAppearStartAttributes } from "./transient";
export class LabelItemAppear extends AComponentAnimate {
onBind() {
super.onBind();
const animator = 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 (applyAppearStartAttributes(target._symbolStart, {
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
}), applyAppearStartAttributes(target._symbolStartOuter, symbolStartOuterFrom),
animator.animate(target._symbolStartOuter, {
type: "to",
to: symbolStartOuterTo,
duration: 5 * symbolTime,
easing: easing
}), applyAppearStartAttributes(target._symbolEnd, {
scaleX: 0,
scaleY: 0
}), animator.animate(target._symbolEnd, {
type: "to",
to: {
scaleX: 1,
scaleY: 1
},
duration: 2 * symbolTime,
delay: 8 * symbolTime,
easing: easing
}), applyAppearStartAttributes(target._line, {
clipRange: 0
}), animator.animate(target._line, {
type: "to",
to: {
clipRange: 1
},
duration: 9 * symbolTime,
easing: easing
}), "typewriter" === titleType) {
const titleTopText = target._titleTop.attribute.text;
applyAppearStartAttributes(target._titleTop, {
text: ""
}), animator.animate(target._titleTop, {
type: "custom",
delay: 5 * symbolTime,
duration: 4 * symbolTime,
easing: "linear",
to: {
text: titleTopText
},
custom: InputText
});
const titleBottomText = target._titleBottom.attribute.text;
applyAppearStartAttributes(target._titleBottom, {
text: ""
}), animator.animate(target._titleBottom, {
type: "custom",
delay: 5 * symbolTime,
duration: 4 * symbolTime,
easing: "linear",
to: {
text: titleBottomText
},
custom: InputText
});
} else applyAppearStartAttributes(target._titleTop, {
dy: target._titleTop.AABBBounds.height() + 10
}), animator.animate(target._titleTop, {
type: "to",
to: {
dy: 0
},
delay: 5 * symbolTime,
duration: 4 * symbolTime,
easing: "linear"
}), applyAppearStartAttributes(target._titleBottom, {
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;
applyAppearStartAttributes(panel, {
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());
applyAppearStartAttributes(panel, {
lineDash: [ 0, 10 * totalLen ]
}), animator.animate(panel, {
type: "to",
to: {
lineDash: [ totalLen, 10 * totalLen ]
},
duration: duration,
easing: easing
});
})), this.completeBind(animator);
}
}
export class LabelItemDisappear extends AComponentAnimate {
onBind() {
super.onBind();
const animator = 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);
}
}
//# sourceMappingURL=label-item-animate.js.map