WPF 關鍵幀動畫：DoubleAnimationUsingKeyFrames、Spline 插值與多型別支援

從簡單雙點到複雜軌跡

簡單動畫只用 From/To/By 定義起訖，中間線性插值。關鍵幀動畫允許指定多個「時間-值」關鍵點，WPF 自動補間，構建複雜軌跡。

關鍵幀動畫類型命名慣例

<Type>AnimationUsingKeyFrames，如 DoubleAnimationUsingKeyFrames、ColorAnimationUsingKeyFrames 等（支援表 8-2 列出的所有基本型別）。

範例：彈跳矩形（水平線性 + 垂直關鍵幀）

<SetterTimeline TargetName="rect" Path="(Canvas.Left)" RepeatBehavior="Forever" AutoReverse="True">
    <DoubleAnimation From="0" To="800" Duration="0:0:10" />
</SetterTimeline>

<SetterTimeline TargetName="rect" Path="(Canvas.Top)">
    <DoubleAnimationUsingKeyFrames Duration="0:0:2" RepeatBehavior="Forever">
        <DoubleAnimationUsingKeyFrames.KeyFrames>
            <LinearDoubleKeyFrame Value="0"   KeyTime="0:0:0"   />
            <LinearDoubleKeyFrame Value="50"  KeyTime="0:0:0.5" />
            <LinearDoubleKeyFrame Value="200" KeyTime="0:0:1"   />
            <LinearDoubleKeyFrame Value="50"  KeyTime="0:0:1.5" />
            <LinearDoubleKeyFrame Value="0"   KeyTime="0:0:2"   />
        </DoubleAnimationUsingKeyFrames.KeyFrames>
    </DoubleAnimationUsingKeyFrames>
</SetterTimeline>

• 水平用一般 DoubleAnimation 往返。
• 垂直用 5 個關鍵幀描述彈跳軌跡，WPF 自動補間。

插值方式：線性 vs 樣條

• LinearDoubleKeyFrame：勻速插值，速度突變感明顯（圖 8-13 左）。
• SplineDoubleKeyFrame：貝茲曲線控制速度曲線，平滑自然（圖 8-13 右）。

KeySpline 參數解析

KeySpline="Cp1x,Cp1y Cp2x,Cp2y" 定義兩個控制點，曲線固定從 (0,0) 到 (1,1)。

• 直線 (0,0 1,1) = 線性。
• 凸起曲線 = 先慢後快（下落加速）。
• 凹陷曲線 = 先快後慢（上拋減速）。

改良版彈跳：Spline 讓動畫更真實

<SplineDoubleKeyFrame Value="50"  KeyTime="0:0:0.5" KeySpline="0.4,0 0.75,0.75" />
<SplineDoubleKeyFrame Value="200" KeyTime="0:0:1"   KeySpline="0.2,0.2 1,0.4" />
<SplineDoubleKeyFrame Value="50"  KeyTime="0:0:1.5" KeySpline="0,0.3 0.75,0.75" />
<SplineDoubleKeyFrame Value="0"   KeyTime="0:0:2"   KeySpline="0.25,0.25 0.6,1" />

• 下落段用「先慢後快」曲線模擬重力加速。
• 上升段用「先快後慢」曲線模擬重力減速。
• 無需增加關鍵幀即獲平滑真實感。

離散關鍵幀

DiscreteDoubleKeyFrame：無插值，直接跳至指定值，適合製造突變效果。

支援關鍵幀的完整型別清單

表 8-2 列出所有 *AnimationUsingKeyFrames 型別，涵蓋 Boolean、Byte、Char、Color、Decimal、Double、Int16/32/64、Matrix、Point/Point3D、Rect/Rect3D、Rotation3D、Single、Size/Size3D、String、Thickness、Vector/Vector3D 等。