應用動態連續運動
目的
套用一種節制的運動語言，賦予佈局物理記憶：元素保持可識別性，回應使用者的能量，並在每次動作後穩定於可供下一步決策的狀態。
將提供的參考影片視為設計語言的證據，而非可複製的範本。保留使用者請求的概念、技術、範疇與授權邊界。僅在使用者要求實作時才套用檔案變更；對於規劃或審查請求，回傳指導而不編輯檔案。
何時使用此技能
在以下情況使用此技能：
- GSAP 示範或網頁介面需要在不同空間或佈局狀態之間保持連續性。
- 任務涉及圖片欄位、圖庫、輪播、聯絡表單、錨定預覽、基於路徑的序列、路由群組或節制型動態排版。
- 現有運動感覺不連貫、在快速輸入下顯得停滯、過於裝飾性，或物件身份不明確。
- 使用者希望將提供的運動參考轉譯為原創、可存取且可實作的互動語言。
在以下情況不使用此技能：
- 簡單的懸停、焦點、按壓或透明度變化可用普通的 CSS 過渡處理。
- 請求是無連續性或空間狀態問題的無關動畫任務。
- 任務涉及電影、影片剪輯或角色動畫，而非介面行為。
- 使用者需要全面的可存取性稽核，而非針對運動的規劃、實作或審查。
需檢查的輸入
檢查最小相關的可用輸入集合：
- 使用者請求的任務、觸發條件、主體、起始狀態與目標狀態。
- 相關的元件、模板、樣式、運動工具、測試、示範與文件。
- 現有的動畫依賴項，特別是已使用的 GSAP 外掛。
- 使用者提供的影片、原型、螢幕截圖、故事板或運動分析筆記。
- 響應式行為、指標與觸控行為、鍵盤路徑、焦點行為以及減少動作需求。
- 效能限制，如重複項目、圖片重量、幾何測量與高頻輸入。
不要假設參考媒體、GSAP 外掛或專案慣例在不存在時就已存在。
參考資料路由
在選擇運動原語、調整時序與緩動、定義減少動作行為或審查自然度時，請閱讀 references/pattern-catalog.md。
此目錄是自包含的。如果任務需要每個影片的來源資訊或與指定剪輯進行比較，請檢查該任務工作空間中提供的參考媒體或運動分析文件，而不是假設此技能的細節。
核心運動合約
- 在位置、縮放與佈局變化期間保持物件身份。
- 每個運動節拍賦予一個主要方向。
- 讓相鄰元素以一個空間場的方式回應，具有相關的速度與基於距離的錯開。
- 在下一個繪製影格上回應直接輸入。對「穩定」而非「抓取點」套用緩動。
- 短暫加速，並在減速階段花費更多時間。
- 重疊離開與進入狀態，以避免出現空白影格。
- 一致地使用縮放來傳達焦點、深度或優先順序。
- 將活躍的段落解析為穩定、可讀的靜止狀態。
- 保持表現性的變形短暫、局部、可逆且非必要。
優先選擇連續性而非壯觀效果。移除不解釋狀態、層級、方向或回饋的運動。
選擇一個主要原語
選擇最能解釋狀態變化的原語。不要為了增加視覺新奇感而組合多個原語。
- 慣性場： 一個可平移或漂移的星座，作為一個系統移動。
- 平行軌道： 重複的媒體軌道，具有節制的速度變化。
- 路由群組： 在可見的通道或類別之間移動的叢集。
- 錨定預覽交換： 一個穩定的索引控制一個有界限的預覽區域。
- 曲線行進： 卡片從一個路徑進度值衍生出位置、縮放與堆疊順序。
- 收斂鏈： 一個概覽彎曲並縮放成一個聚焦的構圖。
- 聯絡表單解析： 保留的項目橋接了密集與策展的佈局。
- 有界限的文字中斷： 顯示文字短暫偏移，然後乾淨地重構。
當互動僅需要簡單的懸停、焦點、按壓或透明度變化時，請使用普通的 CSS 過渡。
工作流程
- 確認請求是規劃、實作還是審查，並保持該邊界。
- 識別觸發條件、主體、起始狀態、目標狀態與使用者任務。
- 撰寫一句運動論點，解釋為何需要運動。
- 選擇一個主要原語，並定義其穩定的起始與結束構圖。
- 在添加完整編排之前，先定義減少動作狀態。
- 建立微觀、中觀與宏觀層級。並非每個元素都需要在每個層級上運動。
- 實作或指定直接回應、協調行進與安靜的穩定。
- 讓快速輸入重新定位到當前渲染的狀態，而不是排隊動畫。
- 驗證指標、觸控、鍵盤、焦點、減少動作、中斷與失敗路徑。
- 以正常速度審查，並以逐影格或
0.25x速度檢查，以發現不連續性與堆疊錯誤。 - 當請求實作時，執行儲存庫的相關測試或檢查，並報告仍待完成的手動驗證。
時序簽章
使用參考標記作為起點，然後根據行進距離與互動頻率進行適度調整：
- 即時確認：約
90ms。 - 懸停或焦點：約
180ms。 - 緊湊狀態變化：約
320ms。 - 佈局重新配置：約
520ms。 - 大型空間場景：約
780ms，通常上限低於1000ms。 - 空間錯開：
35–60ms，按與運動來源的距離排序。
對於標準的穩定，優先使用 power3.out；對於更強烈的編輯型進入，使用 power4.out；對於已知狀態的重新配置，使用 power2.inOut。僅在進度跟隨滾動、拖曳或其他連續輸入時使用線性運動。
不要將彈性或回彈緩動設為系統標誌。如果需要釋放時的回彈過衝，請將其保持在約 3% 以下。
實施不變量
- 使用 CSS 處理簡單的狀態過渡，使用 GSAP 時間軸處理協調序列。
- 在共享元素連續性有價值時，對真實佈局變化使用 GSAP Flip。
- 僅在拖曳是真實互動且存在等效的可見控制項時，才使用 Draggable。
- 僅在真正有滾動敘事時使用 ScrollTrigger；不要引入滾動劫持。
- 從一個歸一化的進度值推導曲線運動屬性，使
x、y、縮放、不透明度與堆疊順序不會漂移。 - 使用
overwrite: "auto"、quickTo()或一個進度驅動的時間軸來處理可中斷的運動。 - 優先動畫
transform與opacity。 - 批量執行 DOM 讀取，快取幾何數據，並避免在高頻更新內部進行測量。
- 僅在活躍運動期間套用
will-change，並在實際可行時於大型一次性序列後移除它。 - 確保最終內容在 JavaScript 失敗時仍然可用。不需要一個進入時間軸來揭示必要內容。
遵循儲存庫現有的 HTML、CSS、JavaScript、資產與示範文件慣例。未經使用者授權，請勿添加或替換動畫依賴項。
互動與可存取性不變量
- 匹配懸停與焦點以及點擊或輕觸行為。
- 保持焦點樣式可見，且至少與懸停一樣清晰。
- 當視覺項目變為空間性時，保留語意來源順序。
- 對於分割或中斷的排版，保留一個完整的可讀文字來源。
- 將拖曳、滑動與滾輪設為可選輸入方法；提供「上一頁」與「下一頁」控制項或另一種鍵盤路徑。
- 當新手勢開始時，取消慣性。
- 在有意義的互動期間以及頁面不可見時，暫停連續運動。
- 對於
prefers-reduced-motion: reduce，移除慣性、環繞、自動播放、縮放行進與文字中斷。透過即時變化或簡短的不透明度過渡來保留內容與選擇。 - 未經測試，請勿聲明符合可存取性標準。
審查標準
當運動有以下情況時標記為問題：
- 瞬間移動或替換本應保持可識別的物件；
- 使用隨機錯開而沒有空間來源；
- 排隊過時的懸停狀態；
- 在閱讀內容旁邊保持持續運動；
- 使縮放變為裝飾性而非有意義；
- 依賴拖曳、懸停或動畫來揭露必要內容；
- 在每個動畫影格上造成佈局工作；
- 轉換一個 sticky 擁有者而不是內場景層；
- 比狀態變化所應有的時間更長或更精細。
輸出格式
回傳符合模式的結果：
規劃
- 運動論點與選擇的原語。
- 起始、過渡與穩定狀態。
- 運動層級、時序、中斷與減少動作行為。
- 可存取性、效能、實作與驗證備註。
實作
- 套用運動行為的摘要。
- 變更的檔案以及每個變更的角色。
- 選擇的原語、運動層級、減少動作結果、可存取性行為與效能策略。
- 已執行的測試或檢查，以及仍待完成的手動檢查。
審查
| 優先級 | 問題 | 證據 | 建議 |
|---|
同時報告推斷的原語、運動層級、減少動作結果、可存取性行為、效能策略與任何證據限制。
品質標準
僅在以下情況下任務才算完成：
- 選擇的原語比更簡單的過渡更清楚地解釋了狀態變化。
- 物件身份、方向、回應、中斷、穩定與靜止是連貫的。
- 完整運動與減少動作狀態保留相同的內容與任務結果。
- 指標、觸控、鍵盤與焦點行為在適用時具有等效的可使用路徑。
- 高頻運動避免重複的佈局測量與過時的排隊狀態。
- 審查發現引用具體的介面狀態、程式碼或可觀察的行為。
- 實作工作遵循專案慣例並包含相稱的驗證。
邊界情況
- 如果專案不使用 GSAP，保留其現有技術棧，除非使用者要求添加 GSAP；使用可用的平台 API 表達相同的原則，或提供一個計劃。
- 如果參考媒體不可用，使用捆綁的模式目錄，並揭露未執行特定剪輯比較。
- 如果多個狀態變化需要不同的原語，為每個狀態變化選擇一個主要原語，並保持共享的時序與物理規則一致。
- 如果動畫失敗或 JavaScript 不可用，必要的內容與控制項必須保持可用。
- 如果一個 sticky 或滾動擁有的元素看起來需要轉換，請動畫一個內場景層，而不是 sticky 擁有者。
- 如果一個概念與減少動作、鍵盤或內容存取需求衝突，請在簡化編排的同時保留任務結果與狀態關係。
相關技能
motion-behavior-planner用於與函式庫無關的運動計劃，不包含實作。motion-experience-director用於更廣泛的站點級運動系統。motion-animation-accessibility-audit用於全面的運動可存取性稽核。creative-technologist用於更廣泛的前端可行性與漸進增強規劃。