feat: 动画类 Animater

packages/animate/src/animater.ts

@@ -0,0 +1,505 @@
+import { logger } from '@motajs/common';
+import {
+    ExcitationCurve,
+    IAnimatable,
+    IAnimater,
+    IAnimationPlan,
+    IExcitableController,
+    IExcitation,
+    IAnimatePlanIdentifier
+} from './types';
+import { linear } from './utils';
+
+interface IAnimaterTimedInfo extends IAnimatePlanIdentifier {
+    /** 等待时长 */
+    readonly time: number;
+}
+
+interface IAnimaterResolvedTimedInfo extends IAnimaterTimedInfo {
+    /** 当前定时动画计划被唤起的时刻 */
+    readonly arousedTime: number;
+}
+
+interface IAnimaterRawPlan extends IAnimationPlan {
+    /** 当此动画开始时需要执行的计划 */
+    readonly when: Set<IAnimaterTimedInfo>;
+    /** 当此动画结束后需要执行的计划 */
+    readonly after: Set<IAnimaterTimedInfo>;
+    /** 兑现函数，当本次动画计划执行完毕后执行 */
+    readonly resolve: () => void;
+}
+
+interface IAnimatingContent extends IAnimaterRawPlan {
+    /** 动画执行开始的时刻 */
+    readonly startTime: number;
+    /** 动画执行的初始值 */
+    readonly startValue: number;
+    /** 动画终值与初值的差值 */
+    readonly diff: number;
+}
+
+interface IAnimaterContentPlan {
+    /** 当前动画对象中所有的动画计划 */
+    readonly animationPlan: Map<number, IAnimaterRawPlan>;
+    /** 计数器，用于计算动画计划的索引 */
+    counter: number;
+}
+
+interface IAnimaterPlanGroupBase {
+    /** 计划执行前的等待时间 */
+    readonly preTime: number;
+    /** 计划执行后的等待时间 */
+    readonly postTime: number;
+    /** 计划组的首个动画计划 */
+    readonly planStart: Set<IAnimatePlanIdentifier>;
+}
+
+interface IAnimaterPlanGroup extends IAnimaterPlanGroupBase {
+    /** 当前计划组中所有的动画对象计划 */
+    readonly contentStore: Map<IAnimatable, IAnimaterContentPlan>;
+}
+
+export class Animater implements IAnimater {
+    /** 当前是否正在定义动画计划 */
+    private planning: boolean = false;
+
+    /** 当前绑定的激励源 */
+    private excitation: IExcitation<number> | null = null;
+    /** 当前定义在绑定激励源上的可激励对象 */
+    private controller: IExcitableController<number> | null = null;
+
+    /** 计划组计数器 */
+    private groupCounter: number = 0;
+    /** 当前正在计划的动画计划 */
+    private planningStore: Map<IAnimatable, IAnimaterContentPlan> = new Map();
+    /** 计划存储 */
+    private groupStore: Map<number, IAnimaterPlanGroup> = new Map();
+    /** 需要执行的计划队列 */
+    private pendingGroups: number[] = [];
+
+    /** 当前所有正在等待执行的 `when` 操作 */
+    private whens: Set<IAnimaterResolvedTimedInfo> = new Set();
+    /** 当前所有正在等待执行的 `after` 操作 */
+    private afters: Set<IAnimaterResolvedTimedInfo> = new Set();
+
+    /** 当前正在执行的计划组 */
+    private executingGroup: number = -1;
+    /** 当前正在执行的计划组对象 */
+    private executingGroupObj: IAnimaterPlanGroup | null = null;
+    /** 当前正在执行的动画 */
+    private executing: Set<IAnimatingContent> = new Set();
+    /** 当前动画对象正在被哪个动画执行 */
+    private executingMap: Map<IAnimatable, IAnimatingContent> = new Map();
+
+    /** 当前使用的速率曲线 */
+    private curveStatus: ExcitationCurve = linear();
+    /** 当前使用的动画对象计划 */
+    private animatableStatus: IAnimaterContentPlan | null = null;
+    /** 当前使用的动画对象 */
+    private currentAnimatable: IAnimatable | null = null;
+    /** 当前正在计划的计划组的起始动画 */
+    private planningStart: Set<IAnimatePlanIdentifier> = new Set();
+
+    /** 当前的 `when` 计划内容 */
+    private whenBind: IAnimaterRawPlan | null = null;
+    /** 当前的 `after` 计划内容 */
+    private afterBind: IAnimaterRawPlan | null = null;
+    /** 当前的 `when` 等待时长 */
+    private whenTime: number = 0;
+    /** 当前的 `after` 等待时长 */
+    private afterTime: number = 0;
+
+    /** 计划组是否正在进行执行前等待 */
+    private waitingPre = false;
+    /** 计划组执行前等待的时间 */
+    private waitingPreStart = 0;
+    /** 计划组是否正在进行执行后等待 */
+    private waitingPost = false;
+    /** 计划组执行后等待的时间 */
+    private waitingPostStart = 0;
+
+    /** 上一个定义的动画计划 */
+    private lastAnimatable: IAnimaterRawPlan | null = null;
+
+    constructor() {
+        this.excited = this.excited.bind(this);
+    }
+
+    bindExcitation(excitation: IExcitation<number>): void {
+        if (excitation === this.excitation) return;
+        this.unbindExcitation();
+        this.controller = excitation.add(this);
+        this.excitation = excitation;
+    }
+
+    unbindExcitation(): void {
+        if (!this.excitation) return;
+        this.controller?.revoke();
+        this.excitation = null;
+    }
+
+    //#region 动画计划
+
+    animate(content: IAnimatable): this {
+        if (!this.planningStore.has(content)) {
+            const plan: IAnimaterContentPlan = {
+                animationPlan: new Map(),
+                counter: 0
+            };
+            this.animatableStatus = plan;
+            this.planningStore.set(content, plan);
+        } else {
+            const plan = this.planningStore.get(content)!;
+            this.animatableStatus = plan;
+        }
+        this.currentAnimatable = content;
+        return this;
+    }
+
+    curve(curve: ExcitationCurve): this {
+        this.curveStatus = curve;
+        return this;
+    }
+
+    to(value: number, time: number): this {
+        if (!this.animatableStatus || !this.currentAnimatable) return this;
+        this.planning = true;
+        // 定义动画计划
+        const index = ++this.animatableStatus.counter;
+        const { promise, resolve } = Promise.withResolvers<void>();
+        const plan: IAnimaterRawPlan = {
+            identifier: { content: this.currentAnimatable, index },
+            curve: this.curveStatus,
+            targetValue: value,
+            time,
+            promise,
+            resolve,
+            when: new Set(),
+            after: new Set()
+        };
+        this.animatableStatus.animationPlan.set(index, plan);
+        // 检查 when after 状态，如果是在这个状态下，加入到对应的计划中
+        if (this.whenBind) {
+            const identifier: IAnimaterTimedInfo = {
+                content: this.currentAnimatable,
+                index,
+                time: this.whenTime
+            };
+            this.whenBind.when.add(identifier);
+        } else if (this.afterBind) {
+            const identifier: IAnimaterTimedInfo = {
+                content: this.currentAnimatable,
+                index,
+                time: this.afterTime
+            };
+            this.afterBind.after.add(identifier);
+        } else {
+            const identifier: IAnimatePlanIdentifier = {
+                content: this.currentAnimatable,
+                index
+            };
+            this.planningStart.add(identifier);
+        }
+        // 将上一次的计划设为本计划，用于 after when 的调用
+        this.lastAnimatable = plan;
+        return this;
+    }
+
+    after(time: number = 0): this {
+        if (!this.lastAnimatable) return this;
+        this.afterBind = this.lastAnimatable;
+        this.afterTime = time;
+        this.whenBind = null;
+        return this;
+    }
+
+    afterPlan(content: IAnimatable, index: number, time: number = 0): this {
+        const plan = this.queryRaw(content, index);
+        if (!plan) return this;
+        this.afterBind = plan;
+        this.afterTime = time;
+        this.whenBind = null;
+        return this;
+    }
+
+    when(time: number = 0): this {
+        if (!this.lastAnimatable) return this;
+        this.whenBind = this.lastAnimatable;
+        this.whenTime = time;
+        this.afterBind = null;
+        return this;
+    }
+
+    whenPlan(content: IAnimatable, index: number, time: number = 0): this {
+        const plan = this.queryRaw(content, index);
+        if (!plan) return this;
+        this.whenBind = plan;
+        this.whenTime = time;
+        this.afterBind = null;
+        return this;
+    }
+
+    /**
+     * 类内查询动画计划，可以获取到外界获取不到的信息
+     * @param content 动画对象
+     * @param index 动画计划索引
+     * @param plan 计划组索引，不填时表示当前正在计划中的计划组，即从上一次调用 `planEnd` 至现在的这个区间。
+     */
+    private queryRaw(
+        content: IAnimatable,
+        index: number,
+        plan: number = -1
+    ): IAnimaterRawPlan | null {
+        if (plan === -1) {
+            const animation = this.planningStore.get(content);
+            if (!animation) return null;
+            const result = animation.animationPlan.get(index);
+            return result ?? null;
+        } else {
+            const group = this.groupStore.get(plan);
+            if (!group) return null;
+            const animation = group.contentStore.get(content);
+            if (!animation) return null;
+            const result = animation.animationPlan.get(index);
+            return result ?? null;
+        }
+    }
+
+    query(
+        content: IAnimatable,
+        index: number,
+        plan: number = -1
+    ): IAnimationPlan | null {
+        return this.queryRaw(content, index, plan);
+    }
+
+    wait(
+        content: IAnimatable,
+        index: number,
+        plan: number = this.executingGroup
+    ): Promise<void> | undefined {
+        const raw = this.query(content, index, plan);
+        return raw?.promise;
+    }
+
+    planEnd(preTime: number = 0, postTime: number = 0): number {
+        if (!this.planning) return -1;
+        const group: IAnimaterPlanGroup = {
+            contentStore: this.planningStore,
+            planStart: this.planningStart,
+            preTime,
+            postTime
+        };
+        this.whenBind = null;
+        this.afterBind = null;
+        this.currentAnimatable = null;
+        this.animatableStatus = null;
+        this.lastAnimatable = null;
+        this.planningStart = new Set();
+        this.planningStore = new Map();
+        this.planning = false;
+        const index = ++this.groupCounter;
+        this.groupStore.set(index, group);
+        this.pendingGroups.push(index);
+        this.startPlanGroup();
+        return index;
+    }
+
+    //#endregion
+
+    //#region 动画执行
+
+    excited(payload: number): void {
+        if (this.planning) {
+            logger.error(50);
+            return;
+        }
+        // 计划组未执行
+        if (this.executingGroup === -1 || !this.executingGroupObj) return;
+
+        // 计划组 preTime 等待
+        if (this.waitingPre) {
+            const dt = payload - this.waitingPreStart;
+            if (dt < this.executingGroupObj.preTime) return;
+            this.waitingPre = false;
+            // 启动所有 planStart 动画
+            for (const identifier of this.executingGroupObj.planStart) {
+                this.executeAnimate(identifier);
+            }
+        }
+
+        // 计划组 postTime 等待
+        if (this.waitingPost) {
+            const dt = payload - this.waitingPostStart;
+            if (dt >= this.executingGroupObj.postTime) {
+                this.waitingPost = false;
+                this.endPlanGroup();
+            }
+            return;
+        }
+
+        // 处理 when/after 等待
+        const whenToDelete = new Set<IAnimaterResolvedTimedInfo>();
+        for (const w of this.whens) {
+            if (payload - w.arousedTime >= w.time) {
+                whenToDelete.add(w);
+                this.executeAnimate(w);
+            }
+        }
+        whenToDelete.forEach(v => this.whens.delete(v));
+
+        const afterToDelete = new Set<IAnimaterResolvedTimedInfo>();
+        for (const a of this.afters) {
+            if (payload - a.arousedTime >= a.time) {
+                afterToDelete.add(a);
+                this.executeAnimate(a);
+            }
+        }
+        afterToDelete.forEach(v => this.afters.delete(v));
+
+        // 动画执行
+        const endedAnimate = new Set<IAnimatingContent>();
+        const afters = new Set<IAnimaterTimedInfo>();
+        for (const anim of this.executing) {
+            const progress = (payload - anim.startTime) / anim.time;
+            const content = anim.identifier.content;
+            if (progress >= 1) {
+                // 动画结束
+                content.value = anim.targetValue;
+                anim.resolve();
+                endedAnimate.add(anim);
+                // 检查 after
+                anim.after.forEach(v => afters.add(v));
+            } else {
+                const completion = anim.curve(progress);
+                content.value = completion * anim.diff + anim.startValue;
+            }
+        }
+        afters.forEach(v => {
+            this.startAfter({ ...v, arousedTime: payload });
+        });
+        // 必要清理
+        endedAnimate.forEach(v => {
+            this.executing.delete(v);
+            this.executingMap.delete(v.identifier.content);
+        });
+
+        // 检查计划组是否全部结束
+        if (
+            this.executing.size === 0 &&
+            this.whens.size === 0 &&
+            this.afters.size === 0
+        ) {
+            this.waitingPost = true;
+            this.waitingPostStart = payload;
+        }
+    }
+
+    /**
+     * 开始执行指定的动画
+     * @param identifier 要执行的动画标识符
+     */
+    private executeAnimate(identifier: IAnimatePlanIdentifier) {
+        if (!this.executingGroupObj || !this.excitation) return;
+        const plan = this.queryRaw(
+            identifier.content,
+            identifier.index,
+            this.executingGroup
+        );
+        if (!plan) return;
+        // 冲突检测
+        if (this.executingMap.has(identifier.content)) {
+            const current = this.executingMap.get(identifier.content)!;
+            if (current.startTime === this.excitation?.payload()) {
+                logger.error(51);
+                return;
+            }
+            // 终止前一个动画
+            current.resolve();
+            this.executing.delete(current);
+        }
+        // 记录动画初始值和开始时间
+        const startValue = identifier.content.value;
+        const startTime = this.excitation.payload();
+        const anim: IAnimatingContent = {
+            ...plan,
+            startTime,
+            startValue,
+            diff: plan.targetValue - startValue
+        };
+        this.executing.add(anim);
+        this.executingMap.set(identifier.content, anim);
+        // 检查 when
+        for (const when of plan.when) {
+            this.startWhen({ ...when, arousedTime: startTime });
+        }
+    }
+
+    /**
+     * 开始 `when` 状态计时
+     * @param when `when` 状态
+     */
+    private startWhen(when: IAnimaterResolvedTimedInfo) {
+        if (when.time === 0) {
+            this.executeAnimate(when);
+        } else {
+            this.whens.add(when);
+        }
+    }
+
+    /**
+     * 开始 `after` 状态计时
+     * @param after `after` 状态
+     */
+    private startAfter(after: IAnimaterResolvedTimedInfo) {
+        if (after.time === 0) {
+            this.executeAnimate(after);
+        } else {
+            this.afters.add(after);
+        }
+    }
+
+    /**
+     * 开始指定计划组动画的执行
+     */
+    private startPlanGroup() {
+        if (this.executingGroup !== -1) return;
+        if (this.pendingGroups.length === 0) return;
+        if (!this.excitation) return;
+        const group = this.pendingGroups.shift();
+        if (group === void 0) return;
+        const obj = this.groupStore.get(group);
+        if (!obj) return;
+        this.executingGroup = group;
+        this.executingGroupObj = obj;
+        // preTime 等待
+        if (obj.preTime > 0) {
+            this.waitingPre = true;
+            this.waitingPreStart = this.excitation.payload();
+        } else {
+            // 立即启动所有 planStart 动画
+            for (const identifier of this.executingGroupObj.planStart) {
+                this.executeAnimate(identifier);
+            }
+        }
+    }
+
+    /**
+     * 结束计划组的执行
+     */
+    private endPlanGroup() {
+        // 清理状态
+        this.executingGroup = -1;
+        this.executingGroupObj = null;
+        this.executing.clear();
+        this.executingMap.clear();
+        this.whens.clear();
+        this.afters.clear();
+        this.waitingPre = false;
+        this.waitingPost = false;
+        // 启动下一个计划组
+        this.startPlanGroup();
+    }
+
+    //#endregion
+}

packages/animate/src/excitation.ts

@@ -214,8 +214,10 @@ export class ExcitationVariator
             return;
         }
 
+        const now = excitation.payload();
         this.source = excitation;
-        this.sourceTs = excitation.payload();
+        this.sourceTs = now;
+        this.now = now;
         this.selfTs = this.sourceTs;
         this.speed = 1;
 
@@ -271,14 +273,14 @@ export class ExcitationVariator
             return Promise.resolve();
         }
 
-        return new Promise<void>(resolve => {
-            this.curveQueue.push({ curve, time, mode, resolve });
+        const { promise, resolve } = Promise.withResolvers<void>();
+        this.curveQueue.push({ curve, time, mode, resolve });
+        // 如果没有正在执行的曲线，立即开始
+        if (this.currentCurve === null) {
+            this.startNextCurve();
+        }
 
-            // 如果没有正在执行的曲线，立即开始
-            if (this.currentCurve === null) {
-                this.startNextCurve();
-            }
-        });
+        return promise;
     }
 
     private startNextCurve(): void {

packages/animate/src/index.ts

@@ -1,3 +1,4 @@
+export * from './animater';
 export * from './excitation';
 export * from './types';
 export * from './utils';

packages/animate/src/types.ts

@@ -127,3 +127,170 @@ export interface IExcitationVariator extends IExcitation<number> {
      */
     endAllCurves(): void;
 }
+
+export interface IAnimatable {
+    /** 动画数值 */
+    value: number;
+}
+
+export interface IAnimatePlanIdentifier {
+    /** 动画对象 */
+    readonly content: IAnimatable;
+    /** 动画对象对应的动画计划 */
+    readonly index: number;
+}
+
+export interface IAnimationPlan {
+    /** 动画计划的标识符 */
+    readonly identifier: IAnimatePlanIdentifier;
+    /** 动画的速率曲线 */
+    readonly curve: ExcitationCurve;
+    /** 动画的目标值 */
+    readonly targetValue: number;
+    /** 动画时长 */
+    readonly time: number;
+    /** 动画结束后兑现的 `Promise` */
+    readonly promise: Promise<void>;
+}
+
+export interface IAnimater extends IExcitable<number> {
+    /**
+     * 在动画执行器上绑定激励源
+     * @param excitation 绑定的激励源
+     */
+    bindExcitation(excitation: IExcitation<number>): void;
+
+    /**
+     * 取消绑定激励源
+     */
+    unbindExcitation(): void;
+
+    /**
+     * 绑定动画对象，之后的接口调用都将施加在此对象上
+     * @param content 动画对象
+     */
+    animate(content: IAnimatable): this;
+
+    /**
+     * 设置当前的速率曲线
+     * @param curve 速率曲线
+     */
+    curve(curve: ExcitationCurve): this;
+
+    /**
+     * 将动画对象的值按照当前设置改变至目标值，为一次动画操作，计入动画索引（参考 {@link query} 的描述）。
+     * 如果动画开始时当前动画对象有动画正在执行，那么会立刻结束正在执行的动画，开始执行当前动画。
+     * @param value 目标值
+     * @param time 动画时长
+     */
+    to(value: number, time: number): this;
+
+    /**
+     * 在刚刚定义的动画结束后指定时长再开始后续计划。
+     *
+     * ```ts
+     * const obj1 = { value: 0 };
+     * const obj2 = { value: 0 };
+     * animater.animate(obj1)
+     *   .curve(linear())
+     *   .to(100, 500)
+     *   .animate(obj2)
+     *   .after()
+     *   .to(200, 200)
+     *   .planEnd();
+     * ```
+     *
+     * @param time 等待时长，默认为 0
+     */
+    after(time?: number): this;
+
+    /**
+     * 在指定动画结束后指定时长再开始后续计划。计划索引参考 {@link query} 的定义。
+     *
+     * ```ts
+     * const obj1 = { value: 0 };
+     * const obj2 = { value: 0 };
+     * animater.animate(obj1)
+     *   .curve(linear())
+     *   .to(100, 500)
+     *   .animate(obj2)
+     *   .to(200, 200)
+     *   .afterObject(obj1, 1)
+     *   ...
+     *   .planEnd();
+     * ```
+     *
+     * @param content 动画对象
+     * @param index 动画对象对应的计划索引
+     * @param time 等待时长，默认为 0
+     */
+    afterPlan(content: IAnimatable, index: number, time?: number): this;
+
+    /**
+     * 等待刚刚定义的动画开始指定时长后再开始后续计划，与 {@link after} 类似，但是是以刚刚定义的动画开始执行为基准
+     * @param time 等待时长
+     */
+    when(time?: number): this;
+
+    /**
+     * 等待指定动画计划开始指定时长后再开始后续计划，与 {@link afterPlan} 类似，但是是以指定动画开始执行为基准
+     * @param content 动画对象
+     * @param index 动画对象对应的计划索引
+     * @param time 等待时长，默认为 0
+     */
+    whenPlan(content: IAnimatable, index: number, time?: number): this;
+
+    /**
+     * 查询动画计划。
+     *
+     * 动画计划采用计划组的方式查询，每个计划组之间的动画计划互不干扰。`plan` 描述需要查询的计划组，
+     * `index` 表示在这个计划组内的动画计划索引，`content` 表示要查询哪个动画对象的动画计划。
+     * 动画计划索引描述的是该动画对象在本计划组中的第几次动画计划，从 1 开始计算。举例来说：
+     *
+     * ```ts
+     * const obj = { value: 0 };
+     * animater.animate()
+     *   .curve(linear())
+     *   .to(100, 1000) // 索引为 1
+     *   .after()
+     *   .curve(sin(CurveMode.EaseOut))
+     *   .to(200, 500) // 索引为 2
+     *   .animate(obj2)
+     *   ...
+     *   .animate(obj)
+     *   .to(100, 500) // 索引为 3
+     *   .planEnd();
+     * ```
+     *
+     * @param content 动画对象
+     * @param index 动画计划索引
+     * @param plan 计划组索引，不填时表示当前正在计划中的计划组，即从上一次调用 `planEnd` 至现在的这个区间，
+     *             如果期间没有没有任何动画计划，那么会返回 `null`，并不会自动回退到上一次定义的的计划组。
+     */
+    query(
+        content: IAnimatable,
+        index: number,
+        plan?: number
+    ): IAnimationPlan | null;
+
+    /**
+     * 等待指定动画计划执行完毕，参考 {@link query} 的描述
+     * @param content 动画对象
+     * @param index 动画计划索引
+     * @param plan 计划组索引，不填时表示当前正在执行动画的计划组。
+     */
+    wait(
+        content: IAnimatable,
+        index: number,
+        plan?: number
+    ): Promise<void> | undefined;
+
+    /**
+     * 结束当前动画计划的定义，形成动画计划组。该函数必须在动画计划定义完毕后立刻执行来进行必要的处理工作。
+     * 后面的计划组会等待前面的计划组的动画全部执行完毕后再开始执行。
+     * 参考 {@link query} 中对计划组的描述。
+     * @param preTime 计划执行前的等待时长，等待这么长时间之后开始执行首个动画
+     * @param postTime 计划执行后的等待时长，等待这么长时间之后计划才真正结束
+     */
+    planEnd(preTime?: number, postTime?: number): number;
+}

packages/animate/src/utils.ts

@@ -1,4 +1,13 @@
-import { IExcitable } from './types';
+import { cumsum } from '@motajs/common';
+import {
+    ExcitationCurve,
+    ExcitationCurve2D,
+    ExcitationCurve3D,
+    GeneralExcitationCurve,
+    IExcitable
+} from './types';
+
+//#region 工具函数
 
 /**
  * 将一个函数转换为可激励对象
@@ -15,3 +24,419 @@ export function excited<T>(
         return { excited: func };
     }
 }
+
+//#endregion
+
+//#region 曲线计算
+
+/**
+ * 曲线相加 `a(p) + b(p)`
+ * @param curve1 加数
+ * @param curve2 加数
+ */
+export function addCurve(
+    curve1: ExcitationCurve,
+    curve2: ExcitationCurve
+): ExcitationCurve {
+    return p => curve1(p) + curve2(p);
+}
+
+/**
+ * 曲线相减 `a(p) - b(p)`
+ * @param curve1 被减数
+ * @param curve2 减数
+ */
+export function subCurve(
+    curve1: ExcitationCurve,
+    curve2: ExcitationCurve
+): ExcitationCurve {
+    return p => curve1(p) - curve2(p);
+}
+
+/**
+ * 曲线相乘 `a(p) * b(p)`
+ * @param curve1 乘数
+ * @param curve2 乘数
+ */
+export function mulCurve(
+    curve1: ExcitationCurve,
+    curve2: ExcitationCurve
+): ExcitationCurve {
+    return p => curve1(p) * curve2(p);
+}
+
+/**
+ * 曲线相除 `a(p) / b(p)`
+ * @param curve1 乘数
+ * @param curve2 乘数
+ */
+export function divCurve(
+    curve1: ExcitationCurve,
+    curve2: ExcitationCurve
+): ExcitationCurve {
+    return p => curve1(p) / curve2(p);
+}
+
+/**
+ * 曲线取幂 `a(p) ** b(p)`
+ * @param curve1 底数
+ * @param curve2 指数
+ */
+export function powCurve(
+    curve1: ExcitationCurve,
+    curve2: ExcitationCurve
+): ExcitationCurve {
+    return p => curve1(p) ** curve2(p);
+}
+
+/**
+ * 曲线组合，`a(b(p))`
+ * @param curve1 外层曲线
+ * @param curve2 内层曲线
+ */
+export function compositeCurve(
+    curve1: ExcitationCurve,
+    curve2: ExcitationCurve
+): ExcitationCurve {
+    return p => curve1(curve2(p));
+}
+
+/**
+ * 平移曲线，`a(p) + b`
+ * @param curve 曲线
+ * @param move 纵轴平移量
+ */
+export function moveCurve(
+    curve: ExcitationCurve,
+    move: number = 0
+): ExcitationCurve {
+    return p => curve(p) + move;
+}
+
+/**
+ * 曲线求相反数并平移，`b - a(p)`
+ * @param curve 曲线
+ * @param move 纵轴平移量
+ */
+export function oppsiteCurve(
+    curve: ExcitationCurve,
+    move: number = 0
+): ExcitationCurve {
+    return p => move - curve(p);
+}
+
+/**
+ * 纵向缩放曲线，`a(p) * b`
+ * @param curve 曲线
+ * @param scale 缩放比例
+ */
+export function scaleCurve(
+    curve: ExcitationCurve,
+    scale: number = 1
+): ExcitationCurve {
+    return p => curve(p) * scale;
+}
+
+/**
+ * 求曲线的倒数，并缩放，`g(x) = b / f(x)`
+ * @param curve 曲线
+ * @param scale 缩放比例
+ */
+export function reciprocalCurve(
+    curve: ExcitationCurve,
+    scale: number = 1
+): ExcitationCurve {
+    return p => scale / curve(p);
+}
+
+/**
+ * 曲线拼接函数，将按照序列顺序依次调用曲线，序列长度过长（> 100）可能会导致性能下降
+ * @param seq 曲线序列
+ * @param duration 每个曲线的持续时长，范围在 `[0,1]` 之间，所有值之和应该是 1，否则超出 1 的部分不会被执行
+ * @param scale 每个曲线拼接时的缩放比例
+ * @param move 每个曲线拼接时在纵轴上的偏移量
+ */
+export function sequenceCurve(
+    seq: ExcitationCurve[],
+    duration: number[],
+    scale: number[],
+    move: number[]
+): ExcitationCurve {
+    const keep = cumsum(duration);
+    return p => {
+        const index = keep.findIndex(sum => p >= sum);
+        if (index === -1) return 0;
+        const progress = (p - keep[index]) / duration[index];
+        return seq[index](progress) * scale[index] + move[index];
+    };
+}
+
+/**
+ * 将二维速率曲线分割为两个一维速率曲线
+ * @param curve 二维速率曲线
+ */
+export function splitCurve2D(
+    curve: ExcitationCurve2D
+): [ExcitationCurve, ExcitationCurve] {
+    return [p => curve(p)[0], p => curve(p)[1]];
+}
+
+/**
+ * 将三维速率曲线分割为三个一维速率曲线
+ * @param curve 三维速率曲线
+ */
+export function splitCurve3D(
+    curve: ExcitationCurve3D
+): [ExcitationCurve, ExcitationCurve, ExcitationCurve] {
+    return [p => curve(p)[0], p => curve(p)[1], p => curve(p)[2]];
+}
+
+/**
+ * 将 n 维速率曲线分割为 n 个一维速率曲线
+ * @param curve n 维速率曲线
+ */
+export function splitCurve(curve: GeneralExcitationCurve): ExcitationCurve[] {
+    const n = curve(0).length;
+    const arr: ExcitationCurve[] = [];
+    for (let i = 0; i < n; i++) {
+        arr.push(p => curve(p)[i]);
+    }
+    return arr;
+}
+
+/**
+ * 将两个一维速率曲线合并为一个二维速率曲线
+ * @param curve1 第一个速率曲线
+ * @param curve2 第二个速率曲线
+ */
+export function stackCurve2D(
+    curve1: ExcitationCurve,
+    curve2: ExcitationCurve
+): ExcitationCurve2D {
+    return p => [curve1(p), curve2(p)];
+}
+
+/**
+ * 将三个一维速率曲线合并为一个三维速率曲线
+ * @param curve1 第一个速率曲线
+ * @param curve2 第二个速率曲线
+ * @param curve3 第三个速率曲线
+ */
+export function stackCurve3D(
+    curve1: ExcitationCurve,
+    curve2: ExcitationCurve,
+    curve3: ExcitationCurve
+): ExcitationCurve3D {
+    return p => [curve1(p), curve2(p), curve3(p)];
+}
+
+/**
+ * 将 n 个一维速率曲线合并为一个 n 维速率曲线
+ * @param curves 速率曲线列表
+ */
+export function stackCurve(curves: ExcitationCurve[]): GeneralExcitationCurve {
+    return p => curves.map(v => v(p));
+}
+
+/**
+ * 对速率曲线归一化，此函数假设传入的曲线单调，会使用 `curve(0)` 和 `curve(1)` 作为最大值或最小值。
+ *
+ * - `f(0) > f(1)`: `g(x) = (f(x) - f(0)) / (f(0) - f(1))`
+ * - `f(0) < f(1)`: `g(x) = (f(x) - f(1)) / (f(1) - f(0))`
+ * - `f(0) = f(1)`: `g(x) = f(x)`
+ * @param curve 需要归一化的曲线
+ * @returns
+ */
+export function normalize(curve: ExcitationCurve): ExcitationCurve {
+    const head = curve(1);
+    const tail = curve(0);
+    if (head > tail) {
+        const diff = head - tail;
+        return p => (curve(p) - tail) / diff;
+    } else if (head < tail) {
+        const diff = tail - head;
+        return p => (curve(p) - head) / diff;
+    } else {
+        return curve;
+    }
+}
+
+//#endregion
+
+//#region 内置曲线
+
+export const enum CurveMode {
+    /** 缓进快出 */
+    EaseIn,
+    /** 快进缓出 */
+    EaseOut,
+    /** 缓进缓出，中间快 */
+    EaseInOut,
+    /** 快进快出，中间缓 */
+    EaseCenter
+}
+
+/** 输入缓进快出，输出缓进快出 */
+function easeIn(curve: ExcitationCurve): ExcitationCurve {
+    return curve;
+}
+
+/** 输入缓进快出，输出快进缓出 */
+function easeOut(curve: ExcitationCurve): ExcitationCurve {
+    return p => 1 - curve(1 - p);
+}
+
+/** 输入缓进快出，输出缓进缓出，中间快 */
+function easeInOut(curve: ExcitationCurve): ExcitationCurve {
+    return p => (p < 0.5 ? curve(p * 2) * 0.5 : 1 - curve((1 - p) * 2) * 0.5);
+}
+
+/** 输入缓进快出，输出快进快出，中间缓 */
+function easeCenter(curve: ExcitationCurve): ExcitationCurve {
+    return p =>
+        p < 0.5
+            ? 0.5 - curve(1 - p * 2) * 0.5
+            : 0.5 + curve((p - 0.5) * 2) * 0.5;
+}
+
+/**
+ * 实施曲线模式，传入曲线的缓进快出模式，根据传入的参数输出对应的模式
+ * - `CurveMode.EaseIn`: `g(x) = f(x)`
+ * - `CurveMode.EaseOut`: `g(x) = 1 - f(1 - x)`
+ * - `CurveMode.EaseInOut`: `g(x) = 0.5 * f(2x) if x < 0.5 else 1 - 0.5 * f(2 - 2x)`
+ * - `CurveMode.EaseCenter`: `g(x) = 0.5 - 0.5 * f(1 - 2x) if x < 0.5 else 0.5 + 0.5 * f(2x - 1)`
+ * @param func 速率曲线
+ * @param mode 曲线模式
+ * @returns
+ */
+export function applyCurveMode(func: ExcitationCurve, mode: CurveMode) {
+    switch (mode) {
+        case CurveMode.EaseIn:
+            return easeIn(func);
+        case CurveMode.EaseOut:
+            return easeOut(func);
+        case CurveMode.EaseInOut:
+            return easeInOut(func);
+        case CurveMode.EaseCenter:
+            return easeCenter(func);
+    }
+}
+
+/** f(x) = 1 - cos(x * pi/2), x∈[0,1], f(x)∈[0,1] */
+const sinfunc: ExcitationCurve = p => 1 - Math.cos((p * Math.PI) / 2);
+
+/**
+ * 正弦速率曲线，EaseIn: `f(x) = 1 - cos(x * pi/2), x∈[0,1], f(x)∈[0,1]`
+ * @param mode 曲线模式
+ */
+export function sin(mode: CurveMode = CurveMode.EaseIn): ExcitationCurve {
+    return applyCurveMode(sinfunc, mode);
+}
+
+/** f(x) = tan(x * pi/4), x∈[0,1], f(x)∈[0,1] */
+const tanfunc: ExcitationCurve = p => Math.tan((p * Math.PI) / 4);
+
+/**
+ * 正切速率曲线，EaseIn: `f(x) = tan(x * pi/4), x∈[0,1], f(x)∈[0,1]`
+ * @param mode 曲线模式
+ */
+export function tan(mode: CurveMode = CurveMode.EaseIn): ExcitationCurve {
+    return applyCurveMode(tanfunc, mode);
+}
+
+/** f(x) = sec(x * pi/3) - 1, x∈[0,1], f(x)∈[0,1] */
+const secfunc: ExcitationCurve = p => 1 / Math.cos((p * Math.PI) / 3) - 1;
+
+/**
+ * 正割速率曲线，EaseIn: `f(x) = sec(x * pi/3)-1, x∈[0,1], f(x)∈[0,1]`
+ * @param mode 曲线模式
+ */
+export function sec(mode: CurveMode = CurveMode.EaseIn): ExcitationCurve {
+    return applyCurveMode(secfunc, mode);
+}
+
+/**
+ * 幂函数速率曲线，EaseIn: `f(x) = x ** n, x∈[0,1], f(x)∈[0,1]`
+ * @param exp 指数
+ * @param mode 曲线模式
+ */
+export function pow(
+    exp: number,
+    mode: CurveMode = CurveMode.EaseIn
+): ExcitationCurve {
+    // f(x) = x ** n, x∈[0,1], f(x)∈[0,1]
+    const powfunc: ExcitationCurve = p => Math.pow(p, exp);
+    return applyCurveMode(powfunc, mode);
+}
+
+/**
+ * 双曲余弦速率曲线，EaseIn: `f(x) = (cosh(x * k) - 1) / (cosh(k) - 1), x∈[0,1], f(x)∈[0,1]`
+ * @param k 比例参数
+ * @param mode 曲线模式
+ */
+export function cosh(
+    k: number = 2,
+    mode: CurveMode = CurveMode.EaseIn
+): ExcitationCurve {
+    // f(x) = (cosh(x * k) - 1) / cosh(k), x∈[0,1], f(x)∈[0,1]
+    const s = Math.cosh(k) - 1;
+    const coshfunc: ExcitationCurve = p => (Math.cosh(p * k) - 1) / s;
+    return applyCurveMode(coshfunc, mode);
+}
+
+/**
+ * 双曲正切速率曲线，EaseIn: `f(x) = 1 + tanh((x - 1) * k) / tanh(k), x∈[0,1], f(x)∈[0,1]`
+ * @param k 比例参数
+ * @param mode 曲线模式
+ */
+export function tanh(
+    k: number = 2,
+    mode: CurveMode = CurveMode.EaseIn
+): ExcitationCurve {
+    // f(x) = 1 + tanh((x - 1) * k) / tanh(k), x∈[0,1], f(x)∈[0,1]
+    const s = Math.tanh(k);
+    const tanhfunc: ExcitationCurve = p => 1 + Math.tanh((p - 1) * k) / s;
+    return applyCurveMode(tanhfunc, mode);
+}
+
+/**
+ * 双曲正割速率曲线，EaseIn: `f(x) = 1 - sech(x * k) / sech(k), x∈[0,1], f(x)∈[0,1]`
+ * @param k 比例参数
+ * @param mode 曲线模式
+ */
+export function sech(
+    k: number = 2,
+    mode: CurveMode = CurveMode.EaseIn
+): ExcitationCurve {
+    // f(x) = 1 - sech(x * k) / sech(k), x∈[0,1], f(x)∈[0,1]
+    // sech(x) = 1 / cosh(x)
+    const s = 1 / Math.cosh(k);
+    const sechfunc: ExcitationCurve = p => 1 - 1 / Math.cosh(p * k) / s;
+    return applyCurveMode(sechfunc, mode);
+}
+
+/**
+ * 常数速率曲线，`f(x) = b, x∈[0,1], f(x)∈R`
+ * @param k 常数值
+ */
+export function constant(k: number): ExcitationCurve {
+    return _ => k;
+}
+
+/**
+ * 线性速率曲线，`f(x) = x, x∈[0,1], f(x)∈[0,1]`
+ */
+export function linear(): ExcitationCurve {
+    return p => p;
+}
+
+/**
+ * 阶梯速率曲线，`f(x) = floor(x * k) / k, x∈[0,1], f(x)∈[0,1]`
+ * @param k 阶梯参数
+ */
+export function step(k: number): ExcitationCurve {
+    // f(x) = floor(x * k) / k, x∈[0,1], f(x)∈[0,1]
+    return p => Math.floor(p * k) / k;
+}
+
+//#endregion