UNPKG

@visactor/vrender-animate

Version:

This module provides a graph-based animation system for VRender.

142 lines (135 loc) 6.34 kB
"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