Windows 8 Store Apps 開發實戰 (20)：ThemeAnimation 主題動畫 — 八大精細互動特效

前言：Storyboard 驅動的精細互動動畫

與 ThemeTransition 不同，ThemeAnimation 系列需放入 Storyboard 並由程式碼呼叫 Begin() 觸發，適合針對特定使用者互動（點擊、滑動、拖曳）播放一次性動畫。八大動畫分別對應控件出現/消失、淡入/出、按下/釋放、滑動提示/回彈、重新定位、分裂開合、拖曳放置等微互動場景。本篇逐一拆解參數與實戰用法。

八大 ThemeAnimation 詳細解析

1. PopInThemeAnimation / PopOutThemeAnimation — 彈入/彈出

適用：模擬對話框、面板從遠處彈入或彈出螢幕。
參數：FromHorizontalOffset、FromVerticalOffset（起始偏移量）。

<Storyboard x:Name="storyboardPopIn">
  <PopInThemeAnimation Storyboard.TargetName="border" FromHorizontalOffset="1000" FromVerticalOffset="300" />
</Storyboard>
<Storyboard x:Name="storyboardPopOut">
  <PopOutThemeAnimation Storyboard.TargetName="border" />
</Storyboard>

2. FadeInThemeAnimation / FadeOutThemeAnimation — 淡入/淡出

適用：元素顯示/隱藏的透明度漸變，最輕量的視覺回饋。
參數：無（固定從 0→1 或 1→0）。

3. PointerDownThemeAnimation / PointerUpThemeAnimation — 按下/釋放

適用：按鈕、列表項目觸控按下時的縮放/傾斜回饋，釋放時還原。
參數：無（內建縮放 0.975 + 微小平移）。

4. SwipeHintThemeAnimation / SwipeBackThemeAnimation — 滑動提示/回彈

適用：提示使用者可滑動（如列表項目滑動刪除），或滑動不觸發動作時的回彈。
參數：ToHorizontalOffset/ToVerticalOffset（目標偏移）、FromHorizontalOffset/FromVerticalOffset（回彈起始偏移）。

5. RepositionThemeAnimation — 重新定位

適用：元素瞬間移動到新位置時的平滑補間（不同於 Transition 的自動偵測）。
參數：FromHorizontalOffset、FromVerticalOffset（相對新位置的起始偏移）。

6. SplitOpenThemeAnimation / SplitCloseThemeAnimation — 分裂開合

適用：ComboBox、AutoSuggestBox 等「展開/收合」複合控件。
參數：OpenedTargetName（展開狀態容器）、ClosedTargetName（收合狀態容器）、ContentTargetName（內容區）、ContentTranslationDirection/Offset（內容位移方向/距離）、OpenedLength/ClosedLength（動畫進度 0-1）。

<SplitOpenThemeAnimation 
  OpenedTargetName="border" ContentTargetName="textBlock" ClosedTargetName="rectangle"
  ContentTranslationDirection="Left" ContentTranslationOffset="200"
  OffsetFromCenter="0" OpenedLength="1" ClosedLength="0" />

7. DragItemThemeAnimation / DragOverThemeAnimation / DropTargetItemThemeAnimation — 拖曳三部曲

適用：GridView/ListView 項目拖曳過程：被拖曳項目浮起、目標位置騰空、放置目標高亮。
用法：參考 GridViewItem、ListViewItem ControlTemplate 內建用法，通常配合 DragItemsStarting、Drop 事件手動觸發。

關鍵屬性提醒

• Storyboard.TargetName / TargetProperty：指定動畫目標元素與屬性（如 (UIElement.RenderTransform).(CompositeTransform.TranslateX)）。
• EnableDependentAnimation="True"：針對非獨立動畫（如 PointAnimation、ObjectAnimationUsingKeyFrames）必須開啟，否則不執行。
• AutoReverse、RepeatBehavior：ThemeAnimation 通常不需設定，播放一次即結束。

完整程式碼下載

原始碼完整包（含所有範例專案）