Pixate 作為早期原型神器，雖已停止更新，但其「圖層動畫 + 條件觸發」的核心邏輯至今仍具參考價值。本文完整拆解如何利用「偷梁換柱」技巧，實現封面圖從圓角卡片無縫擴展為銳角詳情頁縮圖的 Shared Element 轉場，包含關鍵細節拆解、元素拆分策略、佈局結構與動畫調試心法。

目標效果關鍵細節拆解

• 封面圖轉場視覺上無縫銜接，使用者感知為同一元素位置/尺寸/形狀變化
• 預設狀態：封面圖左/右上角圓角與卡片容器圓角一致
• 詳情頁狀態：縮圖四角為直角（無圓角）
• 標題獨立具備淡入/淡出漸變動畫
• 卡片容器具有從中間拉伸展開的轉場動畫

元素拆分策略：一張卡片拆為四層

1. Image for Transition（轉場專用圖層）：轉場過程中顯示，最終作為詳情頁縮圖（直角）
2. Cover Image（預設顯示圖層）：帶圓角，初始狀態顯示，轉場瞬間隱藏
3. Card Background（卡片背景）：預設顯示；複製一層參與轉場時的拉伸動畫
4. Title（獨立標題層）：獨立控制淡入/淡出，不受容器縮放影響

核心實現原理：「偷梁換柱」瞬間切換

1. 初始：顯示 Cover Image（圓角） + Card Background；Image for Transition（直角） 置於同位置但隱藏
2. 觸發點擊：Cover Image 隱藏，Image for Transition 同時顯示（位置/尺寸完全重合，視覺零差異）
3. 執行動畫：Image for Transition 進行位移（X/Y 軸）+ 縮放，移動至詳情頁目標位置/尺寸
4. 同步執行：複製的 Card Background 執行從中心拉伸展開動畫；Title 執行淡出
5. 完成：詳情頁呈現直角縮圖 + 展開容器 + 隱藏標題，實現圓角→直角的無縫形變

佈局結構最佳實踐

雖理論上圖層順序無硬性限制，但將「靜態顯示組」與「動態轉場層」分離，利於：

• 圖層面板整理與語義化命名
• 關鍵場景（預設/轉場中/詳情頁）的顯隱狀態統一控制
• 團隊協作時的可維護性

曲線路徑動畫模擬技巧

Pixate 無自定義路徑功能，但可通過拆解向量分量模擬：

1. 建立兩個 Move 動畫：Move Y（下降）+ Move X（水平位移）
2. 設定 Delay 差值：讓 Y 軸動畫稍微提前/延後啟動，產生「下降同時平移」的視覺合成
3. 同步添加 Scale 動畫，配合 Easing 曲線（如 Ease Out Cubic）控制縮放節奏
4. 反覆微調：Duration、Delay、Easing 參數需耐心疊代測試，直到視覺軌跡自然流暢

避坑指南與心法

• 圖層命名規範化：`Card/Background`、`Card/CoverImage`、`Transition/Image`、`Card/Title`，利用群組管理
• 關鍵幀對齊：Cover Image 隱藏與 Transition Image 顯示必須同幀，否則會出現閃爍
• 座標系一致性：所有位移動畫參考同一座標原點（建議以畫布左上角或父容器左上角）
• 動畫曲線統一：同一轉場內的所有動畫建議使用相同 Easing，避免節奏撕裂感
• 耐心疊代：複雜轉場無標準參數，唯有「假設→測試→觀察→調整」循環才能逼近理想效果

掌握「元素拆分 + 狀態切換 + 向量分解」三大核心技巧，不僅能在 Pixate 中實現高階 Shared Element 轉場，更能建立可遷移至 Principle、Framer、ProtoPie、甚至 Flutter/React Native 動畫開發的通用思維模型。動畫設計的本質，正是將連續變化拆解為可控的離散參數編排。