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

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

1.Storyboard：

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

Storyboard 主要特性和功能：

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

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

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

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

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

2.Animation：

WPF中的動(dòng)畫(huà)通常通過(guò)更改屬性的值來(lái)產(chǎn)生動(dòng)畫(huà)效果。例如，我們可以使用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)畫(huà)的開(kāi)始和結(jié)束值，而Duration決定了動(dòng)畫(huà)的持續(xù)時(shí)間。

4.Storyboard.TargetName 和 Storyboard.TargetProperty：

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

5.Triggers：

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

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

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

需要的工具

Visual Studio

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

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

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

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

<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：編寫(xiě)動(dòng)畫(huà)效果

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

通過(guò)代碼實(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)畫(huà)長(zhǎ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)畫(huà)效果，按鈕的寬度內(nèi)部值從100逐漸變化到300，過(guò)程時(shí)間為1秒。這是通過(guò)WPF中的 Storyboard 和 DoubleAnimation 來(lái)完成的。

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

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

完整代碼如下：

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)畫(huà)長(zhǎng)度
        Storyboard storyboard = new Storyboard();
        storyboard.Children.Add(widthAnimation);
        Storyboard.SetTarget(widthAnimation, DemoButton);
        Storyboard.SetTargetProperty(widthAnimation, new PropertyPath(Button.WidthProperty));
        storyboard.Begin();
    }
}

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

下面我們用xaml來(lái)實(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è)窗口的開(kāi)始和結(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開(kāi)始播放。

<Storyboard>

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

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

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

這個(gè)動(dòng)畫(huà)的目標(biāo)對(duì)象通過(guò)Storyboard.TargetName屬性設(shè)置為myButton，也就是我們前面定義的按鈕控件；目標(biāo)動(dòng)畫(huà)屬性通過(guò)Storyboard.TargetProperty設(shè)定為Width；From和To屬性定義了動(dòng)畫(huà)開(kāi)始和結(jié)束時(shí)Width的值；Duration定義了動(dòng)畫(huà)從開(kāi)始到結(jié)束的持續(xù)時(shí)間。這里設(shè)定的動(dòng)畫(huà)效果是，在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è)視覺(jué)上的動(dòng)畫(huà)效果。

步驟 4：運(yùn)行你的動(dòng)畫(huà)

保存你的代碼，運(yùn)行程序，然后點(diǎn)擊按鈕觀察動(dòng)畫(huà)效果。

代碼位置： https://github.com/DXG88/WPF.Animation

到此這篇關(guān)于WPF實(shí)現(xiàn)動(dòng)畫(huà)效果的入門(mén)教程的文章就介紹到這了,更多相關(guān)WPF動(dòng)畫(huà)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論