@visactor/vrender-animate
Version:
This module provides a graph-based animation system for VRender.
142 lines (135 loc) • 6.34 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: !0
}), exports.WaitStep = exports.Step = void 0;
const vrender_core_1 = require("@visactor/vrender-core"), easing_1 = require("./utils/easing"), store_1 = require("./interpolate/store"), vutils_1 = require("@visactor/vutils");
function noop() {}
class Step {
constructor(type, props, duration, easing) {
var _a;
this._startTime = 0, this._hasFirstRun = !1, this._syncAttributeUpdate = () => {
this.target.setAttributes(this.target.attribute);
}, this.type = type, this.props = props, this.duration = duration, this.easing = easing ? "function" == typeof easing ? easing : null !== (_a = easing_1.Easing[easing]) && void 0 !== _a ? _a : easing_1.Easing.linear : easing_1.Easing.linear,
"wait" === type && (this.onUpdate = noop), this.id = vrender_core_1.Generator.GenAutoIncrementId(),
this.syncAttributeUpdate = noop;
}
bind(target, animate) {
this.target = target, this.animate = animate, this.onBind(), this.syncAttributeUpdate();
}
append(step) {
this.next = step, step.prev = this, step.setStartTime(this.getStartTime() + this.duration, !1);
}
updateDownstreamStartTimes() {
let currentStep = this.next, currentStartTime = this._startTime + this.duration;
for (;currentStep; ) currentStep.setStartTime(currentStartTime, !1), currentStartTime += currentStep.duration,
currentStep = currentStep.next;
this.animate.updateDuration();
}
getLastProps() {
return this.prev ? this.prev.props || {} : this.animate.getStartProps();
}
setDuration(duration, updateDownstream = !0) {
this.duration = duration, updateDownstream && this.updateDownstreamStartTimes();
}
getDuration() {
return this.duration;
}
determineInterpolateUpdateFunction() {
if (!this.props) return;
const funcs = [];
this.propKeys.forEach((key => {
if ("fill" === key || "stroke" === key) {
const from = this.fromProps[key], to = this.props[key];
if ((0, vutils_1.isString)(from) && (0, vutils_1.isString)(to)) {
const fromArray = vrender_core_1.ColorStore.Get(from, vrender_core_1.ColorType.Color255), toArray = vrender_core_1.ColorStore.Get(to, vrender_core_1.ColorType.Color255);
this.fromParsedProps || (this.fromParsedProps = {}), this.toParsedProps || (this.toParsedProps = {}),
this.fromParsedProps[key] = fromArray, this.toParsedProps[key] = toArray, funcs.push(store_1.interpolateUpdateStore["fill" === key ? "fillPure" : "strokePure"]);
} else store_1.interpolateUpdateStore[key] ? funcs.push(store_1.interpolateUpdateStore[key]) : funcs.push(store_1.commonInterpolateUpdate);
} else store_1.interpolateUpdateStore[key] ? funcs.push(store_1.interpolateUpdateStore[key]) : funcs.push(store_1.commonInterpolateUpdate);
})), this.interpolateUpdateFunctions = funcs;
}
setStartTime(time, updateDownstream = !0) {
this._startTime = time, updateDownstream && this.updateDownstreamStartTimes();
}
getStartTime() {
return this._startTime;
}
onBind() {
"glyph" === this.target.type && (this.syncAttributeUpdate = this._syncAttributeUpdate);
}
onFirstRun() {}
onStart() {
if (!this._hasFirstRun) {
this._hasFirstRun = !0, this.fromProps = this.getLastProps();
const startProps = this.animate.getStartProps();
this.propKeys && this.propKeys.forEach((key => {
var _a;
this.fromProps[key] = null !== (_a = this.fromProps[key]) && void 0 !== _a ? _a : startProps[key];
})), this.determineInterpolateUpdateFunction(), this.tryPreventConflict(), this.trySyncStartProps(),
this.onFirstRun();
}
}
tryPreventConflict() {
const animate = this.animate;
this.target.animates.forEach((a => {
if (a === animate || a.priority > animate.priority || a.priority === 1 / 0) return;
const fromProps = a.getStartProps();
this.propKeys.forEach((key => {
null != fromProps[key] && a.preventAttr(key);
}));
}));
}
deleteSelfAttr(key) {
var _a;
delete this.props[key], this.fromProps && delete this.fromProps[key];
const index = this.propKeys.indexOf(key);
-1 !== index && (this.propKeys.splice(index, 1), null === (_a = this.interpolateUpdateFunctions) || void 0 === _a || _a.splice(index, 1));
}
trySyncStartProps() {
this.propKeys.forEach((key => {
this.fromProps[key] = this.animate.target.getComputedAttribute(key);
}));
}
update(end, ratio, out) {
if (this.onStart(), !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];
func(key, this.fromProps[key], this.props[key], easedRatio, this, this.target);
})), this.onUpdate(end, easedRatio, out), this.syncAttributeUpdate();
}
onUpdate(end, ratio, out) {}
onEnd(cb) {
this.target.setAttributes(this.props), cb ? this._endCb = cb : this._endCb && this._endCb(this.animate, this);
}
getEndProps() {
return this.props;
}
getFromProps() {
return this.fromProps;
}
getMergedEndProps() {
return this.getEndProps();
}
stop() {}
}
exports.Step = Step;
class WaitStep extends Step {
constructor(type, props, duration, easing) {
super(type, props, duration, easing);
}
onStart() {
super.onStart();
}
onFirstRun() {
const fromProps = this.getFromProps();
this.target.setAttributes(fromProps);
}
update(end, ratio, out) {
this.onStart();
}
determineInterpolateUpdateFunction() {}
}
exports.WaitStep = WaitStep;
//# sourceMappingURL=step.js.map