動畫系統(tǒng)中的狀態(tài)機設(shè)計從簡單過渡到復(fù)雜編排的架構(gòu)演進一、引子if-else 堆砌的動畫代碼無法維護一個下拉菜單的動畫需求打開時遮罩淡入 → 菜單從上方滑入 → 列表項依次彈出stagger關(guān)閉時列表項淡出 → 菜單滑出 → 遮罩淡出快速雙擊時不應(yīng)觸發(fā)兩次動畫動畫進行中切換路由時立即停止動畫用 if-else 寫出來約 80 行但快速雙擊時動畫堆疊用戶看到兩個菜單同時出現(xiàn)路由切換時動畫還在內(nèi)存中運行。引入狀態(tài)機后同樣的邏輯縮減到 30 行且狀態(tài)轉(zhuǎn)換清晰可測。這個下拉菜單的 Bug 在我們的組件庫中存活了三個版本。第一版用setTimeout控制時序快速雙擊時兩個setTimeout同時運行用戶看到菜單打開又打開。第二版加了isAnimating布爾值做鎖但路由切換時鎖沒釋放下次進入頁面菜單永遠打不開。第三版用狀態(tài)機重構(gòu)問題徹底消失——因為狀態(tài)機的當前狀態(tài)是唯一的不存在兩個動畫同時爭奪 DOM 控制權(quán)的情況。狀態(tài)機最優(yōu)雅的地方在于它把什么時候該做什么從命令式代碼變成了聲明式配置狀態(tài)的合法轉(zhuǎn)換被圖結(jié)構(gòu)約束非法路徑在設(shè)計時就被排除。二、狀態(tài)機在動畫系統(tǒng)中的價值狀態(tài)機的核心價值狀態(tài)隔離每個狀態(tài)的行為是確定的不存在某種中間狀態(tài)轉(zhuǎn)換保護非法的狀態(tài)轉(zhuǎn)換被自動拒絕Closed → Closed 關(guān)閉操作被忽略可測試性每條狀態(tài)轉(zhuǎn)換路徑可以獨立測試狀態(tài)機的設(shè)計靈感來自美院的動畫分鏡課。分鏡表上每一格都標注了當前幀的狀態(tài)和觸發(fā)下一幀的事件——離開格子的箭頭只有有限的幾條不可能同時跳到兩個格子。前端動畫的狀態(tài)機也是同理菜單不可能同時處于正在打開和正在關(guān)閉兩個狀態(tài)因為 DOM 元素的display和opacity只有一個值。狀態(tài)機把這個物理約束變成了代碼約束。三、生產(chǎn)級代碼/** * 動畫狀態(tài)機 * * 用于管理復(fù)雜 UI 動畫的生命周期。 * 支持狀態(tài)轉(zhuǎn)換守衛(wèi)、動畫中斷處理、超時回退。 */ // 狀態(tài)定義 type AnimationState idle | entering | entered | exiting | exited; // 事件定義 type AnimationEvent | { type: ENTER } | { type: EXIT } | { type: ANIMATION_COMPLETE } | { type: FORCE_CLOSE }; // 狀態(tài)機配置 interface StateMachineConfig { initialState: AnimationState; states: RecordAnimationState, { on?: PartialRecordAnimationEvent[type], { target: AnimationState; guard?: (context: any) boolean; action?: (context: any) void; }; entry?: (context: any) void; exit?: (context: any) void; }; } class AnimationStateMachine { private currentState: AnimationState; private config: StateMachineConfig; private context: any; constructor(config: StateMachineConfig, context?: any) { this.config config; this.currentState config.initialState; this.context context || {}; // 執(zhí)行初始狀態(tài)的 entry this.config.states[this.currentState].entry?.(this.context); } /** * 發(fā)送事件觸發(fā)狀態(tài)轉(zhuǎn)換 * * returns 是否成功轉(zhuǎn)換 */ send(event: AnimationEvent): boolean { const currentStateConfig this.config.states[this.currentState]; const transition currentStateConfig.on?.[event.type]; // 當前狀態(tài)不處理該事件 → 忽略 if (!transition) { console.warn( 狀態(tài) ${this.currentState} 不支持事件 ${event.type} → 忽略 ); return false; } // 守衛(wèi)檢查 if (transition.guard !transition.guard(this.context)) { console.warn( 事件 ${event.type} 的守衛(wèi)條件未通過 → 忽略 ); return false; } // 退出當前狀態(tài) currentStateConfig.exit?.(this.context); // 轉(zhuǎn)換動作 transition.action?.(this.context); // 進入新狀態(tài) const previousState this.currentState; this.currentState transition.target as AnimationState; // 執(zhí)行新狀態(tài)的 entry this.config.states[this.currentState].entry?.(this.context); console.log(狀態(tài)轉(zhuǎn)換: ${previousState} → ${this.currentState}); return true; } /** 獲取當前狀態(tài) */ getState(): AnimationState { return this.currentState; } /** 是否處于活躍動畫中 */ isAnimating(): boolean { return this.currentState entering || this.currentState exiting; } } /** * 下拉菜單動畫 狀態(tài)機配置 */ const dropdownMenuMachine: StateMachineConfig { initialState: exited, states: { exited: { entry: (ctx) { // 隱藏菜單 DOM ctx.menuElement.style.display none; }, on: { ENTER: { target: entering }, }, }, entering: { entry: (ctx) { // 顯示菜單 → 播放入場動畫 ctx.menuElement.style.display block; ctx.playEnterAnimation().then(() { ctx.machine.send({ type: ANIMATION_COMPLETE }); }); }, exit: (ctx) { // 被打斷時立即停止動畫 ctx.cancelAnimation(); }, on: { ANIMATION_COMPLETE: { target: entered }, EXIT: { target: exiting }, FORCE_CLOSE: { target: exited, action: (ctx) ctx.forceHide() }, }, }, entered: { on: { EXIT: { target: exiting }, FORCE_CLOSE: { target: exited, action: (ctx) ctx.forceHide() }, }, }, exiting: { entry: (ctx) { ctx.playExitAnimation().then(() { ctx.machine.send({ type: ANIMATION_COMPLETE }); }); }, exit: (ctx) { ctx.cancelAnimation(); }, on: { ANIMATION_COMPLETE: { target: exited }, ENTER: { target: entering }, // 關(guān)閉中又打開 → 直接切回 FORCE_CLOSE: { target: exited, action: (ctx) ctx.forceHide() }, }, }, }, }; // 使用 const machine new AnimationStateMachine(dropdownMenuMachine, { menuElement: document.getElementById(dropdown)!, playEnterAnimation: () { /* Web Animations API */ }, playExitAnimation: () { /* Web Animations API */ }, cancelAnimation: () { /* 取消活躍動畫 */ }, forceHide: () { /* 強制隱藏 */ }, machine: null as any, // 自引用 }); machine.context.machine machine;注意entering狀態(tài)的exit回調(diào)——當動畫被中斷時用戶在打開過程中點擊關(guān)閉exit會調(diào)用ctx.cancelAnimation()立即停止當前動畫。這比setTimeout方案優(yōu)雅得多setTimeout被中斷后仍然會執(zhí)行回調(diào)而狀態(tài)機的exit是同步的、確定性的。FORCE_CLOSE事件是緊急逃生通道用于路由切換或組件卸載時——它跳過所有動畫過渡直接跳轉(zhuǎn)到exited狀態(tài)并調(diào)用forceHide()。四、總結(jié)動畫狀態(tài)機解決快速重復(fù)操作導(dǎo)致的動畫堆疊和動畫生命周期管理兩個核心問題五個狀態(tài)idle/entering/entered/exiting/exited覆蓋大多數(shù) UI 動畫場景快速雙擊時狀態(tài)機自動處理轉(zhuǎn)換沖突進入中觸發(fā)退出 → 跳過進入直接退出狀態(tài)機使動畫邏輯可測試——每條轉(zhuǎn)換路徑可以獨立驗證FORCE_CLOSE 事件提供緊急逃生通道路由切換/組件卸載時強制終止從 if-else 到狀態(tài)機的遷移本質(zhì)上是把隱式的狀態(tài)變成顯式的狀態(tài)。if-else 代碼中狀態(tài)藏在布爾變量和定時器的組合里——isAnimating !isClosing timeoutId ! null描述的是一個沒有名字的中間態(tài)。狀態(tài)機給每個中間態(tài)起了名字畫了邊界規(guī)定了誰能過渡到誰。美院教動畫時老師說每一幀都要有明確的姿態(tài)。狀態(tài)機就是給代碼動畫的每一幀都賦予了明確的姿態(tài)——沒有模糊的中間態(tài)沒有不可預(yù)測的并發(fā)只有確定性的狀態(tài)和確定性的轉(zhuǎn)換。狀態(tài)機的五個狀態(tài)對應(yīng)了動畫的五個生命周期階段idle未觸發(fā)、entering入場中、entered已展示、exiting出場中、exited已隱藏。每個狀態(tài)的entry和exit回調(diào)是進入和離開這個姿態(tài)時做什么——entering.entry播放入場動畫entering.exit取消動畫。這種模式可以推廣到所有 UI 動畫場景模態(tài)框、抽屜、Toast、Tooltip、Accordion——只要動畫有打開和關(guān)閉兩個方向就可以復(fù)用這套狀態(tài)機模型。