快捷導(dǎo)航

WPF實(shí)現(xiàn)動(dòng)畫效果的入門教程

更新時(shí)間：2023年09月15日 10:14:52 作者：百寶門園地

WPF是一種用于創(chuàng)建Windows客戶端應(yīng)用程序的UI框架,它讓我們能夠創(chuàng)建豐富的圖形界面,包括各種各樣的動(dòng)畫效果,下面我們就來看看如何利用wpf實(shí)現(xiàn)簡單的動(dòng)畫效果吧

Windows Presentation Foundation (WPF)是一種用于創(chuàng)建Windows客戶端應(yīng)用程序的UI框架。它讓我們能夠創(chuàng)建豐富的圖形界面，包括各種各樣的動(dòng)畫效果。接下來，我們將介紹如何在WPF中創(chuàng)建簡單的動(dòng)畫。文章最后將給出源碼，源碼包括文章中的動(dòng)畫和一個(gè)水印按鈕，一個(gè)簡單的時(shí)鐘動(dòng)畫，一個(gè)復(fù)雜的時(shí)鐘動(dòng)畫。

在WPF中，通常會(huì)使用以下的一些標(biāo)簽來創(chuàng)建和控制動(dòng)畫。

1.Storyboard：

Storyboard 是 Window Presentation Foundation (WPF) 中一種強(qiáng)大的工具，可用于創(chuàng)建自定義動(dòng)畫效果。WPF 中的動(dòng)畫是通過變化特定屬性的值來產(chǎn)生的，并且這些變化都是隨時(shí)間而進(jìn)行的。

Storyboard 主要特性和功能：

時(shí)間線控制： Storyboard 允許你控制動(dòng)畫時(shí)間線，包括開始時(shí)間，停止時(shí)間，持續(xù)時(shí)間等。

動(dòng)畫類型： Storyboard 支持各種類型的動(dòng)畫，如雙精度動(dòng)畫，顏色動(dòng)畫，點(diǎn)動(dòng)畫等。

復(fù)雜動(dòng)畫：通過組合多個(gè)動(dòng)畫效果，你可以創(chuàng)建復(fù)雜的動(dòng)畫。這可以通過在 Storyboard 中包含多個(gè)動(dòng)畫實(shí)現(xiàn)。

控制動(dòng)畫流程： Storyboard 提供了開始，暫停，恢復(fù)，停止等方法來控制動(dòng)畫的播放流程。

交互性：在 XAML 中，可以通過Storyboard.TargetName 和 Storyboard.TargetProperty 屬性來指定應(yīng)用動(dòng)畫的對(duì)象與 property。

2.Animation：

WPF中的動(dòng)畫通常通過更改屬性的值來產(chǎn)生動(dòng)畫效果。例如，我們可以使用DoubleAnimation，它可以在指定的時(shí)間內(nèi)將目標(biāo)屬性的值從一個(gè)浮點(diǎn)數(shù)改變?yōu)榱硪粋€(gè)浮點(diǎn)數(shù)。除了DoubleAnimation，WPF還提供了其他類型的Animation，如ColorAnimation、PointAnimation等。

3.From, To, Duration：

From和To指定了動(dòng)畫的開始和結(jié)束值，而Duration決定了動(dòng)畫的持續(xù)時(shí)間。

4.Storyboard.TargetName 和 Storyboard.TargetProperty：

這兩個(gè)屬性分別用于指定動(dòng)畫的目標(biāo)對(duì)象和目標(biāo)屬性。

5.Triggers：

Triggers類用于設(shè)定啟動(dòng)動(dòng)畫的條件。我們通常會(huì)在其中設(shè)定一些事件觸發(fā)條件，比如按鈕被點(diǎn)擊。當(dāng)事件被觸發(fā)時(shí)，設(shè)定的動(dòng)畫效果就會(huì)開始執(zhí)行。

以上就是WPF中常用的一些動(dòng)畫元素。要?jiǎng)?chuàng)建復(fù)雜的動(dòng)畫效果，你可能還需要了解更多的標(biāo)簽和屬性，比如RepeatBehavior（用于設(shè)定動(dòng)畫的重復(fù)行為）、AutoReverse（用于設(shè)定動(dòng)畫播放結(jié)束后是否自動(dòng)倒回）、KeyFrames（用于設(shè)定動(dòng)畫的關(guān)鍵幀）等等。

接下來，我們將介紹如何在WPF中創(chuàng)建簡單的動(dòng)畫。

需要的工具

Visual Studio

步驟 1：創(chuàng)建一個(gè)新的WPF項(xiàng)目

在Visual Studio中，通過點(diǎn)擊文件 -> 新建 -> 項(xiàng)目來創(chuàng)建一個(gè)新的WPF應(yīng)用程序。

步驟 2：向窗體中添加控件

在主窗口 MainWindow.xaml 文件中，我們將添加一個(gè)Button控件。我們將為此控件添加一個(gè)簡單的動(dòng)畫效果。

<Window x:Class="WpfAnimationDemo.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="WPF Animation Demo" Height="350" Width="525">
    <Grid>
        <Button Name="DemoButton" Content="Click me" Width="100" Height="50"/>
    </Grid>
</Window>

步驟 3：編寫動(dòng)畫效果

我們創(chuàng)建一個(gè)當(dāng)用戶點(diǎn)擊按鈕時(shí)執(zhí)行的動(dòng)畫效果。這個(gè)效果將使按鈕的寬度在1秒鐘內(nèi)擴(kuò)大到200。

通過代碼實(shí)現(xiàn)

給button增加Click方法

<Button x:Name="DemoButton" Width="100" Height ="100" Content="Animate Me!" Click="DemoButton_Click"
        Grid.Row="0" Grid.Column="0"/>

private void DemoButton_Click(object sender, RoutedEventArgs e)
{
    DoubleAnimation widthAnimation = new DoubleAnimation();
    widthAnimation.From = 100; // 起始值
    widthAnimation.To = 300; // 結(jié)束值
    widthAnimation.Duration = new Duration(TimeSpan.FromSeconds(1)); // 動(dòng)畫長度
    Storyboard storyboard = new Storyboard();
    storyboard.Children.Add(widthAnimation);
    Storyboard.SetTarget(widthAnimation, DemoButton);
    Storyboard.SetTargetProperty(widthAnimation, new PropertyPath(Button.WidthProperty));
    storyboard.Begin();
}

這個(gè)方法是 DemoButton 的點(diǎn)擊事件處理器。當(dāng)點(diǎn)擊這個(gè)按鈕時(shí)，這個(gè)方法就會(huì)被調(diào)用。

點(diǎn)擊時(shí)將會(huì)發(fā)生動(dòng)畫效果，按鈕的寬度內(nèi)部值從100逐漸變化到300，過程時(shí)間為1秒。這是通過WPF中的 Storyboard 和 DoubleAnimation 來完成的。

Storyboard 是動(dòng)畫的容器，而 DoubleAnimation 是這個(gè)動(dòng)畫的定義。設(shè)置起始值（From）、結(jié)束值（To）、動(dòng)畫的持續(xù)時(shí)間（Duration），并確認(rèn)動(dòng)畫的目標(biāo)（要改變的是哪個(gè)元素的哪個(gè)屬性）。

最后，調(diào)用 Storyboard 的 Begin 方法以開始動(dòng)畫。

完整代碼如下：

public partial class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();           
    }       
    private void DemoButton_Click(object sender, RoutedEventArgs e)
    {
        DoubleAnimation widthAnimation = new DoubleAnimation();
        widthAnimation.From = 100; // 起始值
        widthAnimation.To = 300; // 結(jié)束值
        widthAnimation.Duration = new Duration(TimeSpan.FromSeconds(2)); // 動(dòng)畫長度
        Storyboard storyboard = new Storyboard();
        storyboard.Children.Add(widthAnimation);
        Storyboard.SetTarget(widthAnimation, DemoButton);
        Storyboard.SetTargetProperty(widthAnimation, new PropertyPath(Button.WidthProperty));
        storyboard.Begin();
    }
}

通過xaml實(shí)現(xiàn)

下面我們用xaml來實(shí)現(xiàn)同樣的效果。

<Window ...>
? ? <!-- ... -->
    <Grid>
        <Button Name="DemoButton" Content="Click me" Width="100" Height="50">
            <Button.Triggers>
                <EventTrigger RoutedEvent="Button.Click">
                    <BeginStoryboard>
                        <Storyboard>
                            <DoubleAnimation Storyboard.TargetName="myButton"
                                             Storyboard.TargetProperty="Width"
                                             From="100"
                                             To="200"
                                             Duration="0:0:1"/>
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
            </Button.Triggers>
        </Button>
    </Grid>
</Window>

<Window ...>
? ? <!-- ... -->

這個(gè)<Window...>標(biāo)簽用于定義整個(gè)窗口的開始和結(jié)束。

<Grid>

是WPF內(nèi)的一種特布面板標(biāo)簽，它提供了一個(gè)靈活的格子系統(tǒng)，用于在多行和多列中進(jìn)行UI元素布局。

<Button Name="myButton" Content="Click me" Width="100" Height="50">

在這里，我們定義了一個(gè)按鈕(Button)。Name屬性是給按鈕設(shè)定的名稱，它在XAML和代碼之間可以進(jìn)行關(guān)聯(lián)；Content屬性設(shè)置按鈕的文本為"Click me"；Width和Height屬性則設(shè)置了按鈕的寬度和高度。

<Button.Triggers>

Triggers標(biāo)簽指定觸發(fā)器，它定義在一定的條件下觸發(fā)某些行為。

<EventTrigger RoutedEvent="Button.Click">

此處定義了一個(gè)EventTrigger事件觸發(fā)器。該觸發(fā)器在Button.Click事件——也就是按鈕被點(diǎn)擊的事件——發(fā)生時(shí)觸發(fā)。

<BeginStoryboard>

BeginStoryboard會(huì)使得包含在其中的Storyboard開始播放。

<Storyboard>

Storyboard是WPF中對(duì)動(dòng)畫的最高級(jí)別的封裝。一個(gè)Storyboard可以包含多個(gè)動(dòng)畫，這些動(dòng)畫會(huì)在BeginStoryboard命令下同步啟動(dòng)。

<DoubleAnimation Storyboard.TargetName="myButton"
                 Storyboard.TargetProperty="Width"
                 From="100"
                 To="200"
                 Duration="0:0:1"/>

這段代碼定義了一個(gè)DoubleAnimation雙值動(dòng)畫。

這個(gè)動(dòng)畫的目標(biāo)對(duì)象通過Storyboard.TargetName屬性設(shè)置為myButton，也就是我們前面定義的按鈕控件；目標(biāo)動(dòng)畫屬性通過Storyboard.TargetProperty設(shè)定為Width；From和To屬性定義了動(dòng)畫開始和結(jié)束時(shí)Width的值；Duration定義了動(dòng)畫從開始到結(jié)束的持續(xù)時(shí)間。這里設(shè)定的動(dòng)畫效果是，在1秒的時(shí)間內(nèi)，按鈕的寬度從100變?yōu)?00。

                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
            </Button.Triggers>
        </Button>
    </Grid>
</Window>

以上是各個(gè)元素的結(jié)束標(biāo)簽，用于指定相應(yīng)元素的結(jié)束位置。

最終，這段XAML代碼定義了一個(gè)窗口，窗口中有一個(gè)按鈕。當(dāng)該按鈕被點(diǎn)擊時(shí)，它的寬度將在1秒的時(shí)間內(nèi)從100變?yōu)?00，從而形成一個(gè)視覺上的動(dòng)畫效果。