Windows 8 Store Apps 開發實戰 (19)：動畫核心三大支柱 — 線性、關鍵幀、緩動函數完整指南

前言：Timeline 體系下的三種動畫範式

WinRT 動畫系統以 Timeline 為基底，衍生出三大類動畫：線性動畫（From/To/By 插值）、關鍵幀動畫（多關鍵點精確控制）、緩動動畫（數學函數模擬物理真實感）。掌握三者差異與適用場景，是打造流暢介面的關鍵。本篇系統整理 API、參數與實戰範例。

一、線性動畫 — 簡單直接的插值

核心屬性

• From、To、By：起始/結束/增量值（To 優先於 By）
• Duration：持續時間（0:0:3 = 3 秒）
• AutoReverse、RepeatBehavior：往返/重複（3x、Forever）
• BeginTime、SpeedRatio、FillBehavior：延遲、倍速、結束行為
• EnableDependentAnimation：非獨立動畫（如 PointAnimation）必須設 True

範例：三種線性動畫並行

<Grid.Resources>
  <Storyboard x:Name="storyboardColor">
    <ColorAnimation Storyboard.TargetName="ellipse" 
        Storyboard.TargetProperty="(Ellipse.Fill).(SolidColorBrush.Color)"
        From="Red" To="Yellow" Duration="0:0:3" AutoReverse="True" RepeatBehavior="3x" />
  </Storyboard>
  <Storyboard x:Name="storyboardDouble">
    <DoubleAnimation Storyboard.TargetName="rectangle" 
        Storyboard.TargetProperty="(Canvas.Left)" From="100" By="100"
        Duration="0:0:3" AutoReverse="True" RepeatBehavior="Forever" />
  </Storyboard>
  <Storyboard x:Name="storyboardPoint">
    <PointAnimation EnableDependentAnimation="True" 
        Storyboard.TargetName="ellipseGeometry" Storyboard.TargetProperty="Center"
        From="50,50" To="200,200" Duration="0:0:3" AutoReverse="True" RepeatBehavior="Forever" />
  </Storyboard>
</Grid.Resources>

二、關鍵幀動畫 — 多階段精確控制

四種 KeyFrame 行為

• Linear：線性插值，勻速過渡
• Discrete：無插值，關鍵點瞬間切換
• Spline：三次貝茲曲線，KeySpline="x1,y1 x2,y2" 控制加速度曲線
• Easing：套用緩動函數，最自然

範例：色彩關鍵幀串聯四種行為

<ColorAnimationUsingKeyFrames Storyboard.TargetName="solidColorBrush" Storyboard.TargetProperty="Color" Duration="0:0:10">
  <LinearColorKeyFrame Value="Green" KeyTime="0:0:3" />
  <DiscreteColorKeyFrame Value="Blue" KeyTime="0:0:4" />
  <SplineColorKeyFrame Value="Red" KeySpline="0.6,0.0 0.9,0.00" KeyTime="0:0:6" />
  <EasingColorKeyFrame Value="Orange" KeyTime="0:0:8">
    <EasingColorKeyFrame.EasingFunction><ElasticEase EasingMode="EaseInOut" /></EasingColorKeyFrame.EasingFunction>
  </EasingColorKeyFrame>
</ColorAnimationUsingKeyFrames>

三、緩動函數 — 11 種經典物理模擬

WinRT 內建 11 種 EasingFunctionBase 衍生類別，搭配三種 EasingMode：

EasingMode 三模式

• EaseIn：起始緩慢，結束加速
• EaseOut：起始加速，結束緩慢（最常用，符合物理慣性）
• EaseInOut：首尾緩慢，中間加速

範例：動態切換緩動函數繪製曲線圖

// 程式碼後置動態建立緩動函數
EasingFunctionBase easing = new ElasticEase { Oscillations = 3, Springiness = 3 };
easing.EasingMode = EasingMode.EaseInOut;

// 套用至動畫
aniEasingDemo.EasingFunction = easing;
aniBallY.EasingFunction = easing; // 同步顯示軌跡球

// 繪製曲線：0-1 取樣 200 點
Path path = new Path();
PathGeometry geo = new PathGeometry();
PathFigure fig = new PathFigure { StartPoint = new Point(0, 0) };
for (double i = 0; i < 1; i += 0.005)
{
    double x = i * width;
    double y = easing.Ease(i) * height;
    fig.Segments.Add(new LineSegment { Point = new Point(x, y) });
}
geo.Figures.Add(fig);
path.Data = geo;

獨立 vs 相依動畫 — 效能關鍵

• Independent Animation：Color/Double/Point（特定屬性）由 Composition 執行緒驅動，不阻塞 UI，效能最佳。
• Dependent Animation：需 UI 執行緒計算（如 PointAnimation、ObjectAnimationUsingKeyFrames、非標準屬性），預設關閉，需設 EnableDependentAnimation="True"。
• 全域關閉：Timeline.AllowDependentAnimations = false。

完整程式碼下載

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