WPF：各種easing 函式(Easing Function)動畫預覽切換

寫了一個小程式，用來示範WPF中的各種easing 函式(Easing Function)動畫類型。

 

使用者可以選擇動畫類型，包含所有WPF 4.0定義的類型：

BackEase, BounceEase, CircleEase, CubicEase, ElasticEase, ExponentialEase, PowerEase, QuadraticEase, QuarticEase, QuinticEase, SineEase

 

緩動模式（即EasingMode枚舉）：

EaseIn, EaseOut, EaseInOut

 

 

原理則是在資源中定義好Storyboard：

<Storyboard x:Key="storyboard" Storyboard.TargetName="ellipse">

    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(Canvas.Left)">

        <EasingDoubleKeyFrame KeyTime="0:0:0" Value="40"/>

        <EasingDoubleKeyFrame KeyTime="0:0:3" Value="300"/>

    </DoubleAnimationUsingKeyFrames>

    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(Canvas.Top)">

        <EasingDoubleKeyFrame KeyTime="0:0:0" Value="40"/>

        <EasingDoubleKeyFrame KeyTime="0:0:3" Value="150"/>

    </DoubleAnimationUsingKeyFrames>

</Storyboard>

 

然後在代碼中根據使用者選擇產生EasingFunctionBase，和EasingMode。最後再設定Storyboard動畫中的參數，然後開始動畫，如下代碼：

void SetKeyFrame(Storyboard storyboard, int idx, EasingFunctionBase easingFunc, EasingMode mode)

{

    //第一個子Timeline是DoubleAnimationUsingKeyFrames

    var frames = storyboard.Children[0] as DoubleAnimationUsingKeyFrames;

    if (frames != null)

    {

        //第一個KeyFrame是時間為0的初始值

        //這裡要設定第二個KeyFrame

        var easingkey = (EasingDoubleKeyFrame)frames.KeyFrames[1];

        easingFunc.EasingMode = mode;

        easingkey.EasingFunction = easingFunc;

    }

}

 

原始碼下載

注意：此為微軟SkyDrive存檔，請用瀏覽器直接下載，用某些下載工具可能無法下載

原始碼環境：Microsoft Visual C# 2010 Express