WPF 緩動函數實作系列（二）：正弦/餘弦緩動 - 最平滑的自然動態

正弦餘弦緩動特性

正弦/餘弦曲線在 $[0, \pi/2]$ 區間單調且二階導數連續，對應速度變化最平緩，無突變感，最接近自然界運動（如擺錘、彈簧振動）。比二次緩動更柔和。

核心實作碼

using System;
using System.Windows;
using System.Windows.Media.Animation;

namespace EaseMoveDemo
{
    public class EaseMoveAnimation : DoubleAnimationBase
    {
        public static readonly DependencyProperty FromProperty =
            DependencyProperty.Register("From", typeof(double?), typeof(EaseMoveAnimation), new PropertyMetadata(null));
        public static readonly DependencyProperty ToProperty =
            DependencyProperty.Register("To", typeof(double?), typeof(EaseMoveAnimation), new PropertyMetadata(null));

        public double? From { get => (double?)GetValue(FromProperty); set => SetValue(FromProperty, value); }
        public double? To { get => (double?)GetValue(ToProperty); set => SetValue(ToProperty, value); }

        // 正餘弦緩動
        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;

            // 加速 (Ease In) - 餘弦
            // return delta * (1 - Math.Cos(Math.PI / 2 * animationClock.CurrentProgress.Value)) + from;

            // 減速 (Ease Out) - 正弦
            // return delta * Math.Sin(Math.PI / 2 * animationClock.CurrentProgress.Value) + from;

            // 先加速後減速 (Ease InOut) - 餘弦完整半週期
            return delta / 2 * (1 - Math.Cos(Math.PI * animationClock.CurrentProgress.Value)) + from;
        }

        protected override Freezable CreateInstanceCore() => new EaseMoveAnimation();
    }
}

數學對應關係

結語

正弦/餘弦緩動以三角函數固有的平滑特性，提供最自然、無機械感的動畫體驗。程式碼簡潔、數學直觀，是 WPF 自訂動畫的首選基礎緩動函數。