【WPF學習筆記】WPF中動畫（Animation）的簡單使用

WPF中動畫（Animation）的簡單使用

動畫（Animation）的部分簡單屬性的介紹

使用動畫需要使用以下兩個類：

Storyboard：創建動畫需要使用故事板（Storyboard）元素，用於裝載動畫

XXXAnimation：具體的動畫類，實現具體的動畫效果;

具體的動畫實現通過 XXXAnimation 中的屬性實現，如下，以 DoubleAnimation 為例。不同參數類型的依賴屬性需要對應使用不同的 動畫類。

From：動畫的起始值

To：動畫的結束值。From 和 To 成對使用。

By：可以更改的總數。By 不可以和 From/To 一起使用。

通過查看 XXXAnimation 的基類 Timeline（時間線），還有以下重要屬性

AutoReverse ：時間線在完成向前迭代后是否按相反的順序播放

SpeedRatio：設置在此的時間的推移的速率。

RepeatBehavior：設置此時間線的重復行為。設置重復次數。

Duration：用於此時間線播放，不計數重復的時間長度。

動畫：大小變換、旋轉和平移、漸變

這里就不作詳細的介紹了，直接上代碼，代碼中有詳細的注釋說明，都是最簡單的用法。

頁面XAML代碼

前端頁面 XAML 代碼如下，僅簡單的按鈕展示

<Window
    x:Class="AnimationDemo.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:local="clr-namespace:AnimationDemo"
    Title="MainWindow"
    Width="800"
    Height="450"
    mc:Ignorable="d">
    <Grid>
        <TabControl>
            <TabItem Header="大小變換">
                <Grid>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="80" />
                        <RowDefinition />
                    </Grid.RowDefinitions>
                    <Button
                        Content="啟動"
                        Width="120"
                        Height="30"
                        Click="start_Click1" />
                    <Grid Grid.Row="1">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition />
                            <ColumnDefinition />
                            <ColumnDefinition />
                        </Grid.ColumnDefinitions>
                        <Button x:Name="Sample1"
                            Width="100"
                            Height="50" />
                        <Button x:Name="Sample2" Grid.Column="1"
                            Width="100"
                            Height="50" />
                        <Button x:Name="Sample3" Grid.Column="2"
                            Width="100"
                            Height="50" />
                    </Grid>
                </Grid>
            </TabItem>

            <TabItem Header="旋轉和移動">
                <Grid>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="80" />
                        <RowDefinition />
                    </Grid.RowDefinitions>
                    <Button
                        Content="啟動"
                        Width="120"
                        Height="30"
                        Click="start_Click2" />
                    <Grid Grid.Row="1">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition />
                            <ColumnDefinition />
                            <ColumnDefinition />
                        </Grid.ColumnDefinitions>
                        <Button x:Name="Sample2_1"
                            Width="100"
                            Height="50" />
                        <Button x:Name="Sample2_2" Grid.Column="1"
                            Width="100"
                            Height="50">
                            <Button.RenderTransform>
                                <RotateTransform Angle="0" CenterX="0" CenterY="0" />
                            </Button.RenderTransform>
                        </Button>
                        <Button x:Name="Sample2_3" Grid.Column="2"
                            Width="100"
                            Height="50">
                            <Button.RenderTransform>
                                <TranslateTransform X="0" Y="0" />
                            </Button.RenderTransform>
                        </Button>
                    </Grid>
                </Grid>
            </TabItem>

            <TabItem Header="漸變">
                <Grid>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="80" />
                        <RowDefinition />
                    </Grid.RowDefinitions>
                    <Button
                        Content="啟動"
                        Width="120"
                        Height="30"
                        Click="start_Click3" />
                    <Grid Grid.Row="1">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition />
                            <ColumnDefinition />
                            <ColumnDefinition />
                        </Grid.ColumnDefinitions>
                        <Button x:Name="Sample3_1"
                            Width="100"
                            Height="50"
                            Opacity="0" />
                        <Button x:Name="Sample3_2" Grid.Column="1"
                            Width="100"
                            Height="50"
                            Opacity="0" />
                        <Button x:Name="Sample3_3" Grid.Column="2"
                            Width="100"
                            Height="50"
                            Opacity="0" />
                    </Grid>
                </Grid>
            </TabItem>
        </TabControl>
    </Grid>
</Window>

動畫實現

動畫是在 xaml.cs 中實現的。

代碼中首先展示了如何具體操作動畫的各個屬性，然后將動畫效果封裝成了一個方法。

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace AnimationDemo
{
    /// <summary>
    /// MainWindow.xaml 的交互邏輯
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }

        
		/// <summary>
        /// 大小變化
        /// </summary>
        private void start_Click1(object sender, RoutedEventArgs e)
        {
            //創建動畫使用 故事板（Storyboard）
            Storyboard storyboard = new Storyboard();

            //定義變更大小的動畫 
            //根據屬性的類型設置動畫的類型。 因為下面設置的屬性 Width 是 double 類型的屬性，故使用DoubleAnimation
            DoubleAnimation doubleAnimation = new DoubleAnimation();

            //設置動畫起始值
            //doubleAnimation.From = 0;
            //設置動畫結束值
            //doubleAnimation.To = 100;

            //設置動畫在原有的基礎上增加一個范圍
            doubleAnimation.By = 30;

            doubleAnimation.Duration = TimeSpan.FromSeconds(2);
            //設置動畫無限次播放(不設置的話默認是無限次)
            doubleAnimation.RepeatBehavior = RepeatBehavior.Forever;
            //設置動畫在指示時間線在完成向前迭代后是否按相反的順序播放，從而實現反復的效果
            doubleAnimation.AutoReverse = true;

            //綁定到控件
            Storyboard.SetTarget(doubleAnimation, Sample1);
            //綁定到控件的依賴屬性
            Storyboard.SetTargetProperty(doubleAnimation, new PropertyPath("Width"));

            //將動畫添加到故事板
            storyboard.Children.Add(doubleAnimation);

            //將動畫效果封裝成方法
            storyboard.Children.Add(CreatDoubleAnimation(Sample2, true, RepeatBehavior.Forever, "Height", 50));//更改Height，循環播放
            storyboard.Children.Add(CreatDoubleAnimation(Sample3, true, new RepeatBehavior(2), "Width", 50));//更改Width，播放2次

            //啟動故事板包含的所有動畫
            storyboard.Begin();
        }

        /// <summary>
        /// 封裝動畫方法
        /// </summary>
        /// <param name="uIElement">動畫生效的界面元素</param>
        /// <param name="autoReverse">是否倒序</param>
        /// <param name="repeatBehavior">執行次數</param>
        /// <param name="propertyPath">動畫生效的依賴屬性</param>
        /// <param name="by"></param>
        /// <returns></returns>
        private Timeline CreatDoubleAnimation(UIElement uIElement, bool autoReverse, RepeatBehavior repeatBehavior, string propertyPath, double by)
        {
            DoubleAnimation doubleAnimation = new DoubleAnimation();
            doubleAnimation.By = by;
            doubleAnimation.Duration = TimeSpan.FromSeconds(2);
            doubleAnimation.RepeatBehavior = repeatBehavior;
            doubleAnimation.AutoReverse = autoReverse;
            Storyboard.SetTarget(doubleAnimation, uIElement);
            Storyboard.SetTargetProperty(doubleAnimation, new PropertyPath(propertyPath));
            return doubleAnimation;
        }

		/// <summary>
        /// 旋轉和平移
        /// </summary>
        private void start_Click2(object sender, RoutedEventArgs e)
        {
            Storyboard sb = new Storyboard();

            //按鈕元素要支持移動\旋轉的效果的話，需要給元素先添加支持移動\旋轉的特性。
            Sample2_1.RenderTransform = new TranslateTransform(0, 0); //添加支持平移
            DoubleAnimation da = new DoubleAnimation();
            da.By = 50;
            da.Duration = TimeSpan.FromSeconds(1);

            Storyboard.SetTarget(da, Sample2_1);
            //這里的參數是弱類型的：new PropertyPath("(UIElement.RenderTransform).(TranslateTransform.X)") 所以參數的拼寫一定不能錯
            Storyboard.SetTargetProperty(da, new PropertyPath("(UIElement.RenderTransform).(TranslateTransform.X)"));

            sb.Children.Add(da);

            sb.Children.Add(CreatDoubleAnimation(Sample2_2, false, new RepeatBehavior(2), 
                "(UIElement.RenderTransform).(RotateTransform.Angle)", 360));
            sb.Children.Add(CreatDoubleAnimation(Sample2_3, true, RepeatBehavior.Forever,
                "(UIElement.RenderTransform).(TranslateTransform.Y)", 30));

            sb.Begin();
        }
        
		/// <summary>
        /// 漸變
        /// </summary>
        private void start_Click3(object sender, RoutedEventArgs e)
        {
            Storyboard sb = new Storyboard();

            sb.Children.Add(CreatDoubleAnimation(Sample3_1, false, RepeatBehavior.Forever, "Opacity", 1));
            sb.Children.Add(CreatDoubleAnimation(Sample3_2, true, RepeatBehavior.Forever, "Opacity", 1));
            sb.Children.Add(CreatDoubleAnimation(Sample3_3, true, RepeatBehavior.Forever, "Opacity", 0.5));

            sb.Begin();
        }
    }
}

上述實現的動畫效果，也可以使用前端 XAML 代碼實現，實現格式如下：

<Window.Resources>
    <!--  動畫的xaml格式  -->
    <Storyboard x:Key="test">
        <DoubleAnimation
                         Storyboard.TargetName=""
                         Storyboard.TargetProperty=""
                         From="0"
                         To="100"
                         Duration="0:0:5" />
    </Storyboard>
</Window.Resources>