腳本之家服務器常用軟件

快捷導航

WPF實現(xiàn)動畫效果的入門教程

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

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

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

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

1.Storyboard：

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

Storyboard 主要特性和功能：

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

動畫類型： Storyboard 支持各種類型的動畫，如雙精度動畫，顏色動畫，點動畫等。

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

控制動畫流程： Storyboard 提供了開始，暫停，恢復，停止等方法來控制動畫的播放流程。

交互性：在 XAML 中，可以通過Storyboard.TargetName 和 Storyboard.TargetProperty 屬性來指定應用動畫的對象與 property。

2.Animation：

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

3.From, To, Duration：

From和To指定了動畫的開始和結束值，而Duration決定了動畫的持續(xù)時間。

4.Storyboard.TargetName 和 Storyboard.TargetProperty：

這兩個屬性分別用于指定動畫的目標對象和目標屬性。

5.Triggers：

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

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

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

需要的工具

Visual Studio

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

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

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

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

<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：編寫動畫效果

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

通過代碼實現(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; // 結束值
    widthAnimation.Duration = new Duration(TimeSpan.FromSeconds(1)); // 動畫長度
    Storyboard storyboard = new Storyboard();
    storyboard.Children.Add(widthAnimation);
    Storyboard.SetTarget(widthAnimation, DemoButton);
    Storyboard.SetTargetProperty(widthAnimation, new PropertyPath(Button.WidthProperty));
    storyboard.Begin();
}

這個方法是 DemoButton 的點擊事件處理器。當點擊這個按鈕時，這個方法就會被調(diào)用。

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

Storyboard 是動畫的容器，而 DoubleAnimation 是這個動畫的定義。設置起始值（From）、結束值（To）、動畫的持續(xù)時間（Duration），并確認動畫的目標（要改變的是哪個元素的哪個屬性）。

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

完整代碼如下：

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; // 結束值
        widthAnimation.Duration = new Duration(TimeSpan.FromSeconds(2)); // 動畫長度
        Storyboard storyboard = new Storyboard();
        storyboard.Children.Add(widthAnimation);
        Storyboard.SetTarget(widthAnimation, DemoButton);
        Storyboard.SetTargetProperty(widthAnimation, new PropertyPath(Button.WidthProperty));
        storyboard.Begin();
    }
}

通過xaml實現(xiàn)

下面我們用xaml來實現(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 ...>
? ? <!-- ... -->

這個<Window...>標簽用于定義整個窗口的開始和結束。

<Grid>

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

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

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

<Button.Triggers>

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

<EventTrigger RoutedEvent="Button.Click">

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

<BeginStoryboard>

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

<Storyboard>

Storyboard是WPF中對動畫的最高級別的封裝。一個Storyboard可以包含多個動畫，這些動畫會在BeginStoryboard命令下同步啟動。

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

這段代碼定義了一個DoubleAnimation雙值動畫。

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

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

以上是各個元素的結束標簽，用于指定相應元素的結束位置。

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