@visactor/vrender-core 0.16.0-alpha.0

package/es/animate/animate.d.ts

@@ -0,0 +1,146 @@
+import type { EasingType, EasingTypeFunc, IAnimate, IAnimateStepType, IAnimateTarget, ICustomAnimate, IStep, IStepConfig, ISubAnimate, ITimeline } from '../interface';
+import { AnimateMode, AnimateStatus } from '../common/enums';
+export declare abstract class ACustomAnimate<T> implements ICustomAnimate {
+    from: T;
+    to: T;
+    duration: number;
+    easing: EasingType;
+    params: any;
+    target: IAnimateTarget;
+    updateCount: number;
+    subAnimate: ISubAnimate;
+    step?: IStep;
+    mode?: AnimateMode;
+    _endProps?: any;
+    _mergedEndProps?: any;
+    constructor(from: T, to: T, duration: number, easing: EasingType, params?: any);
+    bind(target: IAnimateTarget, subAni: ISubAnimate): void;
+    onBind(): void;
+    onFirstRun(): void;
+    onStart(): void;
+    onEnd(): void;
+    getEndProps(): Record<string, any> | void;
+    getFromProps(): Record<string, any> | void;
+    getMergedEndProps(): Record<string, any> | void;
+    abstract onUpdate(end: boolean, ratio: number, out: Record<string, any>): void;
+    update(end: boolean, ratio: number, out: Record<string, any>): void;
+}
+export declare class CbAnimate extends ACustomAnimate<null> {
+    cb: () => void;
+    constructor(cb: () => void);
+    onUpdate(end: boolean, ratio: number, out: Record<string, any>): void;
+    onStart(): void;
+}
+type InterpolateFunc = (key: string, ratio: number, from: any, to: any, target: IAnimateTarget, out: Record<string, any>) => boolean;
+export declare class Animate implements IAnimate {
+    static mode: AnimateMode;
+    target: IAnimateTarget;
+    timeline: ITimeline;
+    nextAnimate?: IAnimate;
+    prevAnimate?: IAnimate;
+    status: AnimateStatus;
+    readonly id: string | number;
+    protected _startTime: number;
+    protected _duringTime: number;
+    subAnimates: SubAnimate[];
+    tailAnimate: SubAnimate;
+    rawPosition: number;
+    timeScale: number;
+    interpolateFunc: (key: string, ratio: number, from: any, to: any, nextAttributes: any) => boolean;
+    _onStart?: (() => void)[];
+    _onFrame?: ((step: IStep, ratio: number) => void)[];
+    _onEnd?: (() => void)[];
+    _onRemove?: (() => void)[];
+    _preventAttrs?: Set<string>;
+    static interpolateMap: Map<string, InterpolateFunc>;
+    constructor(id?: string | number, timeline?: ITimeline);
+    setTimeline(timeline: ITimeline): void;
+    getStartTime(): number;
+    getDuration(): number;
+    after(animate: IAnimate): this;
+    afterAll(list: IAnimate[]): this;
+    parallel(animate: IAnimate): this;
+    static AddInterpolate(name: string, cb: InterpolateFunc): void;
+    play(customAnimate: ICustomAnimate): this;
+    trySetAttribute(attr: Record<string, any> | void, mode?: AnimateMode): void;
+    runCb(cb: (a: IAnimate, step: IStep) => void): this;
+    customInterpolate(key: string, ratio: number, from: any, to: any, target: IAnimateTarget, ret: Record<string, any>): boolean;
+    pause(): void;
+    resume(): void;
+    to(props: Record<string, any>, duration: number, easing: EasingType, params?: IStepConfig): this;
+    from(props: Record<string, any>, duration: number, easing: EasingType, params?: IStepConfig): this;
+    wait(duration: number): this;
+    startAt(t: number): this;
+    loop(l: number): this;
+    reversed(r: boolean): this;
+    bounce(b: boolean): this;
+    subAnimate(): this;
+    getStartProps(): Record<string, any>;
+    getEndProps(): Record<string, any>;
+    depreventAttr(key: string): void;
+    preventAttr(key: string): void;
+    preventAttrs(keys: string[]): void;
+    validAttr(key: string): boolean;
+    bind(target: IAnimateTarget): this;
+    advance(delta: number): void;
+    setPosition(rawPosition: number): boolean;
+    onStart(cb: () => void): void;
+    onEnd(cb: () => void): void;
+    onRemove(cb: () => void): void;
+    onFrame(cb: (step: IStep, ratio: number) => void): void;
+    release(): void;
+    stop(nextVal?: 'start' | 'end' | Record<string, any>): void;
+}
+export declare class SubAnimate implements ISubAnimate {
+    target: IAnimateTarget;
+    animate: IAnimate;
+    protected stepHead: Step;
+    protected stepTail: Step;
+    bounce: boolean;
+    reversed: boolean;
+    loop: number;
+    duration: number;
+    position: number;
+    rawPosition: number;
+    dirty: boolean;
+    _totalDuration: number;
+    _startAt: number;
+    _lastStep: IStep;
+    _deltaPosition: number;
+    get totalDuration(): number;
+    constructor(animate: IAnimate, lastSubAnimate?: SubAnimate);
+    protected calcAttr(): void;
+    bind(target: IAnimateTarget): this;
+    play(customAnimate: ICustomAnimate): this;
+    to(props: Record<string, any>, duration: number, easing: EasingType, params?: IStepConfig): this;
+    from(props: Record<string, any>, duration: number, easing: EasingType, params?: IStepConfig): void;
+    startAt(t: number): this;
+    getStartProps(): any;
+    getEndProps(): any;
+    getLastStep(): IStep;
+    wait(duration: number): this;
+    protected _addStep(duration: number, props: any, easingFunc?: EasingTypeFunc): Step;
+    protected _appendProps(props: any, step: Step, tempProps?: boolean): void;
+    protected _appendCustomAnimate(customAnimate: ICustomAnimate, step: Step): void;
+    setPosition(rawPosition: number): boolean;
+    protected updatePosition(end: boolean, rev: boolean): void;
+    tryCallCustomAnimateLifeCycle(step: IStep, lastStep: IStep, rev: boolean): void;
+    getLastPropByName(name: string, step: Step): any;
+    protected updateTarget(step: Step, ratio: number, end: boolean): void;
+}
+declare class Step implements IStep {
+    prev?: Step;
+    duration: number;
+    position: number;
+    next?: Step;
+    props: any;
+    parsedProps?: any;
+    propKeys?: string[];
+    easing?: EasingTypeFunc;
+    customAnimate?: ICustomAnimate;
+    type: IAnimateStepType;
+    constructor(position: number, duration: number, props?: any, easing?: EasingTypeFunc);
+    append(step: Step): void;
+    getLastProps(): any;
+}
+export {};

package/es/animate/animate.js

@@ -0,0 +1,389 @@
+import { AnimateMode, AnimateStatus, AnimateStepType, AttributeUpdateType } from "../common/enums";
+
+import { Easing } from "./easing";
+
+import { max } from "@visactor/vutils";
+
+import { defaultTimeline } from "./timeline";
+
+import { Generator } from "../common/generator";
+
+export class ACustomAnimate {
+    constructor(from, to, duration, easing, params) {
+        this.from = from, this.to = to, this.duration = duration, this.easing = easing, 
+        this.params = params, this.updateCount = 0;
+    }
+    bind(target, subAni) {
+        this.target = target, this.subAnimate = subAni, this.onBind();
+    }
+    onBind() {}
+    onFirstRun() {}
+    onStart() {}
+    onEnd() {}
+    getEndProps() {}
+    getFromProps() {
+        return this.from;
+    }
+    getMergedEndProps() {
+        var _a;
+        const thisEndProps = this.getEndProps();
+        return thisEndProps ? this._endProps === thisEndProps ? this._mergedEndProps : (this._endProps = thisEndProps, 
+        void (this._mergedEndProps = Object.assign({}, null !== (_a = this.step.prev.getLastProps()) && void 0 !== _a ? _a : {}, thisEndProps))) : this.step.prev ? this.step.prev.getLastProps() : thisEndProps;
+    }
+    update(end, ratio, out) {
+        0 === this.updateCount && this.onFirstRun(), this.updateCount += 1, Object.assign(out, this.step.getLastProps()), 
+        this.onUpdate(end, ratio, out), end && this.onEnd();
+    }
+}
+
+export class CbAnimate extends ACustomAnimate {
+    constructor(cb) {
+        super(null, null, 0, "linear"), this.cb = cb;
+    }
+    onUpdate(end, ratio, out) {}
+    onStart() {
+        this.cb();
+    }
+}
+
+export class Animate {
+    constructor(id = Generator.GenAutoIncrementId(), timeline = defaultTimeline) {
+        this.id = id, this.timeline = timeline, this.status = AnimateStatus.INITIAL, this.tailAnimate = new SubAnimate(this), 
+        this.subAnimates = [ this.tailAnimate ], this.timeScale = 1, this.rawPosition = -1, 
+        this._startTime = 0, this._duringTime = 0, this.timeline.addAnimate(this);
+    }
+    setTimeline(timeline) {
+        timeline !== this.timeline && (this.timeline.removeAnimate(this, !1), timeline.addAnimate(this));
+    }
+    getStartTime() {
+        return this._startTime;
+    }
+    getDuration() {
+        return this.subAnimates.reduce(((t, subAnimate) => t + subAnimate.totalDuration), 0);
+    }
+    after(animate) {
+        const t = animate.getDuration();
+        return this._startTime = t, this;
+    }
+    afterAll(list) {
+        let maxT = -1 / 0;
+        return list.forEach((a => {
+            maxT = max(a.getDuration(), maxT);
+        })), this._startTime = maxT, this;
+    }
+    parallel(animate) {
+        return this._startTime = animate.getStartTime(), this;
+    }
+    static AddInterpolate(name, cb) {
+        Animate.interpolateMap.set(name, cb);
+    }
+    play(customAnimate) {
+        if (this.tailAnimate.play(customAnimate), this.target) {
+            const stage = this.target.stage;
+            stage && stage.renderNextFrame();
+        }
+        return 1 === this.subAnimates.length && this.tailAnimate.duration === customAnimate.duration && this.trySetAttribute(customAnimate.getFromProps(), customAnimate.mode), 
+        this;
+    }
+    trySetAttribute(attr, mode = Animate.mode) {
+        attr && mode & AnimateMode.SET_ATTR_IMMEDIATELY && this.target.setAttributes && this.target.setAttributes(attr, !1, {
+            type: AttributeUpdateType.ANIMATE_PLAY
+        });
+    }
+    runCb(cb) {
+        const customAnimate = new CbAnimate((() => {
+            cb(this, customAnimate.step.prev);
+        }));
+        return this.tailAnimate.play(customAnimate), this;
+    }
+    customInterpolate(key, ratio, from, to, target, ret) {
+        const func = Animate.interpolateMap.get(key) || Animate.interpolateMap.get("");
+        return !!func && func(key, ratio, from, to, target, ret);
+    }
+    pause() {
+        this.status === AnimateStatus.RUNNING && (this.status = AnimateStatus.PAUSED);
+    }
+    resume() {
+        this.status === AnimateStatus.PAUSED && (this.status = AnimateStatus.RUNNING);
+    }
+    to(props, duration, easing, params) {
+        if (this.tailAnimate.to(props, duration, easing, params), this.target) {
+            const stage = this.target.stage;
+            stage && stage.renderNextFrame();
+        }
+        return this;
+    }
+    from(props, duration, easing, params) {
+        if (this.tailAnimate.from(props, duration, easing, params), this.target) {
+            const stage = this.target.stage;
+            stage && stage.renderNextFrame();
+        }
+        return this;
+    }
+    wait(duration) {
+        if (this.tailAnimate.wait(duration), this.target) {
+            const stage = this.target.stage;
+            stage && stage.renderNextFrame();
+        }
+        return this;
+    }
+    startAt(t) {
+        if (this.tailAnimate.startAt(t), this.target) {
+            const stage = this.target.stage;
+            stage && stage.renderNextFrame();
+        }
+        return this;
+    }
+    loop(l) {
+        if (this.tailAnimate.loop = l, this.target) {
+            const stage = this.target.stage;
+            stage && stage.renderNextFrame();
+        }
+        return this;
+    }
+    reversed(r) {
+        if (this.tailAnimate.reversed = r, this.target) {
+            const stage = this.target.stage;
+            stage && stage.renderNextFrame();
+        }
+        return this;
+    }
+    bounce(b) {
+        if (this.tailAnimate.bounce = b, this.target) {
+            const stage = this.target.stage;
+            stage && stage.renderNextFrame();
+        }
+        return this;
+    }
+    subAnimate() {
+        const sa = new SubAnimate(this, this.tailAnimate);
+        return this.tailAnimate = sa, this.subAnimates.push(sa), sa.bind(this.target), this;
+    }
+    getStartProps() {
+        return this.subAnimates[0].getStartProps();
+    }
+    getEndProps() {
+        return this.tailAnimate.getEndProps();
+    }
+    depreventAttr(key) {
+        this._preventAttrs && this._preventAttrs.delete(key);
+    }
+    preventAttr(key) {
+        this._preventAttrs || (this._preventAttrs = new Set), this._preventAttrs.add(key);
+    }
+    preventAttrs(keys) {
+        keys.forEach((key => this.preventAttr(key)));
+    }
+    validAttr(key) {
+        return !this._preventAttrs || !this._preventAttrs.has(key);
+    }
+    bind(target) {
+        return this.target = target, this.target.onAnimateBind && this.target.onAnimateBind(this), 
+        this.subAnimates.forEach((sa => {
+            sa.bind(target);
+        })), this;
+    }
+    advance(delta) {
+        if (this._duringTime < this._startTime) {
+            if (this._duringTime + delta * this.timeScale < this._startTime) return void (this._duringTime += delta * this.timeScale);
+            delta = this._duringTime + delta * this.timeScale - this._startTime, this._duringTime = this._startTime;
+        }
+        this.status === AnimateStatus.INITIAL && (this.status = AnimateStatus.RUNNING, this._onStart && this._onStart.forEach((cb => cb())));
+        this.setPosition(this.rawPosition + delta * this.timeScale) && this.status === AnimateStatus.RUNNING && (this.status = AnimateStatus.END, 
+        this._onEnd && this._onEnd.forEach((cb => cb())));
+    }
+    setPosition(rawPosition) {
+        let sa, d = 0;
+        const prevRawPos = this.rawPosition, maxRawPos = this.subAnimates.reduce(((a, b) => a + b.totalDuration), 0);
+        rawPosition < 0 && (rawPosition = 0);
+        const end = rawPosition >= maxRawPos;
+        if (end && (rawPosition = maxRawPos), rawPosition === prevRawPos) return end;
+        for (let i = 0; i < this.subAnimates.length && (sa = this.subAnimates[i], !(d + sa.totalDuration >= rawPosition)); i++) d += sa.totalDuration, 
+        sa = void 0;
+        return this.rawPosition = rawPosition, sa.setPosition(rawPosition - d), end;
+    }
+    onStart(cb) {
+        this._onStart || (this._onStart = []), this._onStart.push(cb);
+    }
+    onEnd(cb) {
+        this._onEnd || (this._onEnd = []), this._onEnd.push(cb);
+    }
+    onRemove(cb) {
+        this._onRemove || (this._onRemove = []), this._onRemove.push(cb);
+    }
+    onFrame(cb) {
+        this._onFrame || (this._onFrame = []), this._onFrame.push(cb);
+    }
+    release() {
+        this.status = AnimateStatus.END;
+    }
+    stop(nextVal) {
+        nextVal || this.target.onStop(), "start" === nextVal ? this.target.onStop(this.getStartProps()) : "end" === nextVal ? this.target.onStop(this.getEndProps()) : this.target.onStop(nextVal), 
+        this.release();
+    }
+}
+
+Animate.mode = AnimateMode.NORMAL, Animate.interpolateMap = new Map;
+
+export class SubAnimate {
+    get totalDuration() {
+        return this.calcAttr(), this._totalDuration + this._startAt;
+    }
+    constructor(animate, lastSubAnimate) {
+        this.rawPosition = -1, this.position = 0, this.loop = 0, this.duration = 0, this.animate = animate, 
+        this.stepHead = new Step(0, 0, lastSubAnimate ? Object.assign({}, lastSubAnimate.stepTail.props) : {}), 
+        this.stepTail = this.stepHead, this.dirty = !0, this._startAt = 0;
+    }
+    calcAttr() {
+        this.dirty && (this._totalDuration = this.duration * (this.loop + 1));
+    }
+    bind(target) {
+        return this.target = target, this;
+    }
+    play(customAnimate) {
+        let duration = customAnimate.duration;
+        (null == duration || duration < 0) && (duration = 0);
+        const easing = customAnimate.easing, easingFunc = "string" == typeof easing ? Easing[easing] : easing, step = this._addStep(duration, null, easingFunc);
+        return step.type = AnimateStepType.customAnimate, this._appendProps(customAnimate.getEndProps(), step, !1), 
+        this._appendCustomAnimate(customAnimate, step), this;
+    }
+    to(props, duration, easing, params) {
+        (null == duration || duration < 0) && (duration = 0);
+        const easingFunc = "string" == typeof easing ? Easing[easing] : easing, step = this._addStep(duration, null, easingFunc);
+        return step.type = AnimateStepType.to, this._appendProps(props, step, !!params && params.tempProps), 
+        step.propKeys || (step.propKeys = Object.keys(step.props)), params && params.noPreventAttrs || this.target.animates.forEach((a => {
+            a.id !== this.animate.id && a.preventAttrs(step.propKeys);
+        })), this;
+    }
+    from(props, duration, easing, params) {
+        this.to(props, 0, easing, params);
+        const toProps = {};
+        this.stepTail.propKeys || (this.stepTail.propKeys = Object.keys(this.stepTail.props)), 
+        this.stepTail.propKeys.forEach((k => {
+            toProps[k] = this.getLastPropByName(k, this.stepTail);
+        })), this.to(toProps, duration, easing, params), this.stepTail.type = AnimateStepType.from;
+    }
+    startAt(t) {
+        return t < 0 && (t = 0), this._startAt = t, this;
+    }
+    getStartProps() {
+        var _a;
+        return null === (_a = this.stepHead) || void 0 === _a ? void 0 : _a.props;
+    }
+    getEndProps() {
+        return this.stepTail.props;
+    }
+    getLastStep() {
+        return this._lastStep;
+    }
+    wait(duration) {
+        if (duration > 0) {
+            const step = this._addStep(+duration, null);
+            step.type = AnimateStepType.wait, step.prev.customAnimate ? step.props = step.prev.customAnimate.getEndProps() : step.props = step.prev.props, 
+            this.target.onAddStep && this.target.onAddStep(step);
+        }
+        return this;
+    }
+    _addStep(duration, props, easingFunc) {
+        const step = new Step(this.duration, duration, props, easingFunc);
+        return this.duration += duration, this.stepTail.append(step), this.stepTail = step, 
+        step;
+    }
+    _appendProps(props, step, tempProps) {
+        step.props = tempProps ? props : Object.assign({}, props);
+        let lastStep = step.prev;
+        const _props = step.props;
+        for (step.propKeys || (step.propKeys = Object.keys(step.props)), step.propKeys.forEach((k => {
+            void 0 === step.props[k] && (step.props[k] = this.target.getDefaultAttribute(k));
+        })); lastStep.prev; ) lastStep.props && (lastStep.propKeys || (lastStep.propKeys = Object.keys(lastStep.props)), 
+        lastStep.propKeys.forEach((key => {
+            void 0 === _props[key] && (_props[key] = lastStep.props[key]);
+        }))), lastStep = lastStep.prev;
+        const initProps = this.stepHead.props;
+        step.propKeys || (step.propKeys = Object.keys(_props)), step.propKeys.forEach((key => {
+            if (void 0 === initProps[key]) {
+                const parentAnimateInitProps = this.animate.getStartProps();
+                initProps[key] = parentAnimateInitProps[key] = this.target.getComputedAttribute(key);
+            }
+        })), this.target.onAddStep && this.target.onAddStep(step);
+    }
+    _appendCustomAnimate(customAnimate, step) {
+        step.customAnimate = customAnimate, customAnimate.step = step, customAnimate.bind(this.target, this);
+    }
+    setPosition(rawPosition) {
+        var _a;
+        const d = this.duration, loopCount = this.loop, prevRawPos = this.rawPosition;
+        let loop, position, end = !1;
+        const startAt = null !== (_a = this._startAt) && void 0 !== _a ? _a : 0;
+        if (rawPosition < 0 && (rawPosition = 0), rawPosition < startAt) return this.rawPosition = rawPosition, 
+        !1;
+        if (rawPosition -= startAt, d <= 0) return end = !0, end;
+        if (loop = Math.floor(rawPosition / d), position = rawPosition - loop * d, end = rawPosition >= loopCount * d + d, 
+        end && (position = d, loop = loopCount, rawPosition = position * loop + d), rawPosition === prevRawPos) return end;
+        const rev = !this.reversed != !(this.bounce && loop % 2);
+        return rev && (position = d - position), this._deltaPosition = position - this.position, 
+        this.position = position, this.rawPosition = rawPosition + startAt, this.updatePosition(end, rev), 
+        end;
+    }
+    updatePosition(end, rev) {
+        if (!this.stepHead) return;
+        let step = this.stepHead.next;
+        const position = this.position, duration = this.duration;
+        if (this.target && step) {
+            let stepNext = step.next;
+            for (;stepNext && stepNext.position <= position; ) step = stepNext, stepNext = step.next;
+            let ratio = end ? 0 === duration ? 1 : position / duration : (position - step.position) / step.duration;
+            step.easing && (ratio = step.easing(ratio)), this.tryCallCustomAnimateLifeCycle(step, this._lastStep || (rev ? this.stepTail : this.stepHead), rev), 
+            this.updateTarget(step, ratio, end), this._lastStep = step, this.animate._onFrame && this.animate._onFrame.forEach((cb => cb(step, ratio)));
+        }
+    }
+    tryCallCustomAnimateLifeCycle(step, lastStep, rev) {
+        if (step !== lastStep) if (rev) {
+            let _step = lastStep.prev;
+            for (;_step && _step !== step; ) _step.customAnimate && (_step.customAnimate.onStart && _step.customAnimate.onStart(), 
+            _step.customAnimate.onEnd && _step.customAnimate.onEnd()), _step = step.prev;
+            lastStep && lastStep.customAnimate && lastStep.customAnimate.onEnd && lastStep.customAnimate.onEnd(), 
+            step && step.customAnimate && step.customAnimate.onStart && step.customAnimate.onStart();
+        } else {
+            let _step = lastStep.next;
+            for (;_step && _step !== step; ) _step.customAnimate && (_step.customAnimate.onStart && _step.customAnimate.onStart(), 
+            _step.customAnimate.onEnd && _step.customAnimate.onEnd()), _step = _step.next;
+            lastStep && lastStep.customAnimate && lastStep.customAnimate.onEnd && lastStep.customAnimate.onEnd(), 
+            step && step.customAnimate && step.customAnimate.onStart && step.customAnimate.onStart();
+        }
+    }
+    getLastPropByName(name, step) {
+        let lastStep = step.prev;
+        for (;lastStep; ) {
+            if (lastStep.props && void 0 !== lastStep.props[name]) return lastStep.props[name];
+            if (lastStep.customAnimate) {
+                const val = lastStep.customAnimate.getEndProps()[name];
+                if (void 0 !== val) return val;
+            }
+            lastStep = lastStep.prev;
+        }
+        return console.warn("未知错误，step中找不到属性"), step.props[name];
+    }
+    updateTarget(step, ratio, end) {
+        null == step.props && null == step.customAnimate || this.target.onStep(this, this.animate, step, ratio, end);
+    }
+}
+
+class Step {
+    constructor(position, duration, props, easing) {
+        this.duration = duration, this.position = position, this.props = props, this.easing = easing;
+    }
+    append(step) {
+        step.prev = this, step.next = this.next, this.next = step;
+    }
+    getLastProps() {
+        let step = this.prev;
+        for (;step; ) {
+            if (step.props) return step.props;
+            if (step.customAnimate) return step.customAnimate.getMergedEndProps();
+            step = step.prev;
+        }
+        return null;
+    }
+}
+//# sourceMappingURL=animate.js.map