feat: add Tween animation utility

src/core/Game.ts

@@ -7,6 +7,7 @@ import {
 import { Orientation } from "@/enums/Orientation";
 import { initDevtools } from "@pixi/devtools";
 import { logger } from "./Logger";
+import { tweenManager } from "@/utils/Tween";
 
 class Game {
   private static instance: Game;
@@ -70,6 +71,10 @@ class Game {
     this._ticker = Ticker.shared;
     this._ticker.autoStart = true;
 
+    this._ticker.add(() => {
+      tweenManager.update();
+    });
+
     if (import.meta.env.DEV) {
       initDevtools({ stage: this._stage, renderer: this._renderer });
     }

src/utils/Tween.ts

@@ -0,0 +1,50 @@
+import { Group, Tween as TweenJS } from "@tweenjs/tween.js";
+
+class TweenManager {
+  private group: Group;
+
+  constructor() {
+    this.group = new Group();
+    // 在 ticker 中更新
+    // 由 Game 更新循环自动处理
+  }
+
+  /**
+   * 创建一个新的 Tween
+   * @example
+   * const tween = tweenManager.create({ x: 0, y: 0 })
+   *   .to({ x: 100, y: 100 }, 1000)
+   *   .onUpdate(obj => { obj.x })
+   *   .start();
+   */
+  create<T extends object>(obj: T): TweenJS<T> {
+    const tween = new TweenJS(obj as object, this.group) as TweenJS<T>;
+    return tween;
+  }
+
+  update(time?: number): void {
+    this.group.update(time);
+  }
+
+  removeAll(): void {
+    this.group.removeAll();
+  }
+}
+
+export const tweenManager = new TweenManager();
+export default tweenManager;
+
+// 便捷方法
+export function tweenFromTo<T extends object>(
+  from: T,
+  to: Partial<T>,
+  duration: number,
+  onUpdate: (obj: T) => void,
+  onComplete?: () => void
+): TweenJS<T> {
+  const t = tweenManager.create(from).to(to as unknown as object, duration).onUpdate(onUpdate as (obj: object) => void);
+  if (onComplete) {
+    t.onComplete(onComplete);
+  }
+  return t.start() as TweenJS<T>;
+}