[.NET] WPF DoubleAnimation 動畫, 一篇文章悟透!

完全了解 DoubleAnimation! 僅需這一篇文章.

介紹

首先, DoubleAnimation可以用來建立一些簡單的動畫, 這些動畫僅限于使用Double值的屬性, 例如控件的位置, 尺寸, 縮放, 旋轉, 或者透明度變化等.

一個DoubleAnimation執行個體, 應該至少指定3個值:

From (值從哪裡開始), To (值到哪裡結束), Duration (值的變化經過多少時間)

例如, 如果要建立一個 1s 内從值從 0 到 1 的動畫, From 就是0, To 就是 1, Duration就是 1s.

啟動動畫, 需要調用将要執行這個動畫的對象的 BeginAnimation 方法, 例如一個控件, 或者一個視窗, 參數包括 DependencyProperty(這個動畫将對哪個屬性執行), AnimationTimeline(執行哪個動畫)

執行個體:

例如, 建立一個, 當點選按鈕時, 按鈕的高度增加 30 個像素.

CS代碼:

然後, 看看效果吧:

其實, DoubleAnimation還可以指定運動時, 加速在整個時間線中的占比以及減速在整個時間線中的占比.

例如, 你想指定這個運動中, 前半部分是加速, 後半部分是勻速, 那麼加速占比就是0.5, 減速占比就是0, 如下:

然後, 看看運作效果吧:

可以看出, 有加速的效果了, 或者, 再狠點, 我們指定全部是減速, 加速占比0, 減速占比1:

果然減速看起來非常好看啊.

純XAML使用:

DoubleAnimation是可以在純 xaml 中聲明并使用的. 有種東西叫做 Trigger, 在 xaml 中聲明他, 然後可以合适的觸發動畫, 如下:

然後, 運作效果的話, 除了不能不斷增加高度, 其他的是一樣的, 點一次, 就會從20到50, 第二次點選, 還是從20到50.

貼代碼:

按鈕事件:

private void Button_Click(object sender, RoutedEventArgs e)
{

    DoubleAnimation animation = new DoubleAnimation(
        button1.ActualHeight,                       // From        從按鈕的 高度 開始
        button1.ActualHeight + 30,                  // To          到按鈕的 高度 + 30 結束
        new Duration(TimeSpan.FromSeconds(1)))      // Duration    間隔是 1s
    {
        AccelerationRatio = 0,       // 設定加速占比為一半, 即 0.5
        DecelerationRatio = 1,       // 設定減速占比為0, 其實這裡可以省略, 因為預設是0
    };

    button1.BeginAnimation(
        Button.HeightProperty,       // DependencyProperty      動畫是針對于高度的
        animation);                  // AnimationTimeline       指定剛剛建立好的動畫
}
           

純xaml實作:

<Button Name="button1" Content="Button" HorizontalAlignment="Left" Margin="343,182,0,0" VerticalAlignment="Top" Width="75" Height="20">
    <Button.Triggers>
        <EventTrigger RoutedEvent="Button.Click">
            <BeginStoryboard>
                <Storyboard>
                    <DoubleAnimation
                                Storyboard.TargetProperty="Height"
                                From="20" 
                                To="50"
                                Duration="0:0:1"
                                AccelerationRatio="0"
                                DecelerationRatio="1"/>
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger>
    </Button.Triggers>
</Button>
           

小彩蛋~ 是視窗加載時的透明度變化動畫欸嘿

<Window.Triggers>
    <EventTrigger RoutedEvent="Loaded">
        <BeginStoryboard >
            <Storyboard>
                <DoubleAnimation From="0" To="1" Duration="0:0:0.3" Storyboard.TargetProperty="Opacity"/>
            </Storyboard>
        </BeginStoryboard>
    </EventTrigger>
</Window.Triggers>
           

參考文章:

以下文章對本文章的了解有幫助噢~

[.NET] WPF XAML 原理, 節點與執行個體, 以及一些重要的零碎知識點.

[.NET] WPF Triggers 觸發器, EventTrigger, Trigger