WPF 緩動函數實作系列（四）：圓弧緩動 - 戲劇性的加減速體驗

圓弧緩動特性

弧形緩動的曲線為圓弧段，若以曲線斜率代表速度，其加速/減速變化極為劇烈，接近 5 次方緩動的效果。適用於需要強烈視覺衝擊、突變感的動畫場景。

核心實作碼

// 圓形緩動
protected override double GetCurrentValueCore(
    double defaultOriginValue, 
    double defaultDestinationValue, 
    AnimationClock animationClock)
{
    double from = (this.From == null ? defaultDestinationValue : (double)this.From);
    double to = (this.To == null ? defaultOriginValue : (double)this.To);
    double delta = to - from;
    double value = animationClock.CurrentProgress.Value;

    double t = value * this.Duration.TimeSpan.Ticks;
    double d = this.Duration.TimeSpan.Ticks;

    // 加速 (Ease In)
    // return delta * (1 - Math.Sqrt(1 - (t /= d) * t)) + from;

    // 減速 (Ease Out)
    // return delta * Math.Sqrt(1 - (t = t / d - 1) * t) + from;

    // 先加速後減速 (Ease InOut)
    if ((t /= (d / 2)) < 1)
    {
        return delta / 2 * (1 - Math.Sqrt(1 - t * t)) + from;
    }
    return delta / 2 * (Math.Sqrt(1 - (t -= 2) * t) + 1) + from;
}

數學原理

• Ease In：$y = 1 - \sqrt{1 - (t/d)^2}$，對應圓弧第 1 象限，斜率從 0 增至無限大。
• Ease Out：$y = \sqrt{1 - (t/d - 1)^2}$，第 2 象限，斜率從無限大降至 0。
• Ease InOut：前半段 Ease In，後半段 Ease Out，於 $t = d/2$ 連接，形成完整半圓弧。

使用建議

• 繼承 DoubleAnimationBase，定義 From、To 依賴屬性。
• 覆寫 CreateInstanceCore 回傳 `new CircularEaseAnimation()`。
• 在 XAML 中直接使用：<local:CircularEaseAnimation From="0" To="100" Duration="0:0:1" />

結語

圓弧緩動以簡單的平方根運算產生極具戲劇張力的動態效果，是豐富 WPF 動畫庫的優秀補充。完整原始碼可下載參考。