Juicy Motion
像動態設計師一樣思考：運用預期、衝擊和消散，讓每個事件都充滿表現力且易於理解。 使用者欣賞的參考是 Quinas 提案 03 · 薪水進來了： 一個信封活了起來，以分層的方式揭曉獎勵。其可重複運用的核心原則是運動語言；物體、品牌和強度則取決於產品。
選擇類別
在此技能中維護核心內容，僅查閱所需的食譜：
- 獎勵與揭曉： 寶箱、信封、成就、物品和金幣。 查閱 獎勵與時間點食譜。
- 衝擊與戰鬥： 打擊、劍弧、射擊和目標反應。 查閱 衝擊與 VFX。
- 魔法與元素： 蓄力、投射物、閃電和冰凍。也可查閱 衝擊與 VFX 中的對應食譜。
gutsune / EgorV 的七個影片位於 參考目錄，並附有觀察記錄和建議應用方式。請查閱它以選擇參考或 近似所需的效果。寶箱已經是 Quinas 食譜的視覺來源； 其餘影片則將技能範圍擴展至衝擊和 VFX。當有自己獨特且實質的工作流程時，才將其拆分為另一個技能， 例如著色器和特定引擎的 VFX 整合；一個不同的視覺元素只需作為此技能中的一個食譜即可。
設計事件
- 識別觸發器、動作的起源、被揭曉的內容或擊中的目標，以及最終結果。在貨幣收益中，目的地可能是錢包；在 解鎖中，是可用的新選項；在攻擊中，是接觸與目標的反應。
- 選擇合適的預備動作：開啟時的搖晃與壓縮、揮擊前的後拉，或發射能量前的蓄力。在有意義時，協調拉伸（stretch）與發射、 投射（overshoot）與抵達、沉降（settling）與閱讀。避免一組元素僅一起淡入。
- 在時間上分離圖層。以獎勵為例：開啟 → 發光 → 揭曉物體/數值 → 標記衝擊 → 星形消散 → 以灰塵延續。 以攻擊為例：預備 → 發射/揮擊 → 接觸 → 反應 → 消散。 敘事優先於粒子數量或圖層數量。
- 根據頻率調整強度。罕見的慶祝可以更華麗； 頻繁的提示需要更少的等待和更少的面積佔用。將衝擊定位在物體/卡片上，不要自動選擇搖晃整個應用程式。
- 在頻繁效果或戰鬥中，保留動作、目標和 指令的可讀性。獎勵的儀式性時間點不適用於攻擊的時間點。
- 教學的建構順序不會決定效果的延遲。 將圖層錨定在同一事件上：閃光、反應和聲音可以在接觸時同時發生，而軌跡和殘留物則有各自的持續時間。影片的長度 也不是所展示動作的持續時間。
建構與預覽
偏好使用 HTML/CSS/SVG 和 Web Animations API 來處理介面物件和效果。 使用專案的資源和架構；不要為依賴變形、開啟和可調整軌跡的效果產生點陣圖。 在遊戲中，使用現有的渲染器和更新循環來處理世界中的效果；網頁預覽可以研究時間點，而不必將 DOM/CSS 強加於整合。
要開始一個獨立的獎勵實驗，請複製並改寫
assets/reward-envelope.html。這是一個自給自足的
範例，無需函式庫、圖片或網路：包含信封、通用獎章、光線、星星、灰塵、收益和模擬錢包，並具備重播、時間軸拖動、速度、
圖層和減少動畫功能。根據需求修改 CONFIG、組合和軌跡；此範例並不能取代特定產品的設計。
預覽應能讓人感受結果並檢查時間點：重播、 播放/暫停、慢動作和時間軸。圖層切換有助於理解預備動作、光線和粒子的貢獻。在探索時，將基礎動作 與添加的圖層進行比較，並識別每個圖層解決的問題： 不明確的起源、微弱的接觸、無反應的目標或難以辨識的後果。顯示使用大小 和上下文，而不僅僅是一個孤立的巨大物體。變體的數量 根據需求和本地規則；在優化已批准的變體時，保留原始範例 並專注於優化，而不是重新開始探索。
螢幕截圖只是輔助；它不能證明動態。請回放影片，並 在準備、動作/接觸、響應和結論處暫停時間軸。提供 互動範例的直接連結。區分模擬數值與真實事件和付款。
有用的不變原則
- 使用共享的時間軸來管理所有圖層。重播/拖動應能產生 相同的狀態，並避免粒子、計時器或監聽器的重複。 當存在程式生成變化時，保留隨機種子以便重現和比較。
- 在 UI 中，主要對
transform和opacity進行動畫處理。當多個效果爭奪同一屬性時，使用包裝器來分離變形、 位移和輸出。 - 延遲的輸出不應覆蓋初始狀態：在 WAAPI 中，在該輸出上使用
fill: 'forwards'，或將各階段組合成一個動畫。檢查 t=0 時以及向後拖動時間軸後的狀態。 - 根據錢包在場景中的實際位置計算金幣的目標，並在調整視窗大小時重新計算。不要將軌跡固定在使用者的螢幕上。
- 在減少動畫模式下，保持內容和結果直接可讀，並 移除搖晃、擠壓、粒子、飛行、抖動和閃爍。預覽可以提供一個明確的指令來體驗動態；保持使用者的手動選擇。
- 聲音是可選圖層，需由互動觸發並可控制。保留 現有設定，避免為同一收益播放兩種聲音。
- 在整合時，尊重領域的事件和契約。獎勵 源自已確認的事件；動畫不會分配金錢、更改 庫存或透過餘額差異或計時器結束來推斷收益。 在戰鬥中，區分發射、接觸和已確認的傷害；尊重 現有的視覺預測，不要將效果結束視為命中的證據。
保存與重複使用
在 Quinas 中，查閱倉庫中的 docs/Identity/MOTION.md 和
docs/Identity/motion/recompensas-03/。這是選擇、T01/Q 資源和已批准範例的權威來源。也請遵循
本地有關預覽、S2/T2、主題和成品儲存的規則。
在其他專案中，保留方法並使用該產品的身份識別。不要 自動帶入 Quinas 的品牌、貨幣或控制項。
當使用者批准並要求保存時，將可重現的程式碼、 資源、時間點和選擇範圍存放在身份識別的持久位置，並在設計索引中加入連結。區分已批准的參考與實際整合。預覽或保存任務屬於該範圍；實作請求則遵循現有授權，無需發明新的審核關卡。
檢查最小的相關範圍：重播、向後拖動、重播、內容切換、 主題、小螢幕、軌跡目的地、資源和控制檯。在修改產品時，執行專案要求的整合檢查。