WPF动画入门教程

Windows Presentation Foundation (WPF)是一种用于创建Windows客户端应用程序的UI框架。它让我们能够创建丰富的图形界面，包括各种各样的动画效果。接下来，我们将介绍如何在WPF中创建简单的动画。文章最后将给出源码，源码包括文章中的动画和一个水印按钮，一个简单的时钟动画，一个复杂的时钟动画。

在WPF中，通常会使用以下的一些标签来创建和控制动画。

Storyboard：

Storyboard 是 Window Presentation Foundation (WPF) 中一种强大的工具，可用于创建自定义动画效果。WPF 中的动画是通过变化特定属性的值来产生的，并且这些变化都是随时间而进行的。

Storyboard 主要特性和功能：

时间线控制： Storyboard 允许你控制动画时间线，包括开始时间，停止时间，持续时间等。

动画类型： Storyboard 支持各种类型的动画，如双精度动画，颜色动画，点动画等。

复杂动画：通过组合多个动画效果，你可以创建复杂的动画。这可以通过在 Storyboard 中包含多个动画实现。

控制动画流程： Storyboard 提供了开始，暂停，恢复，停止等方法来控制动画的播放流程。

交互性：在 XAML 中，可以通过Storyboard.TargetName 和 Storyboard.TargetProperty 属性来指定应用动画的对象与 property。

Animation：

WPF中的动画通常通过更改属性的值来产生动画效果。例如，我们可以使用DoubleAnimation，它可以在指定的时间内将目标属性的值从一个浮点数改变为另一个浮点数。除了DoubleAnimation，WPF还提供了其他类型的Animation，如ColorAnimation、PointAnimation等。

From, To, Duration：

From和To指定了动画的开始和结束值，而Duration决定了动画的持续时间。

Storyboard.TargetName 和 Storyboard.TargetProperty：

这两个属性分别用于指定动画的目标对象和目标属性。

Triggers：

Triggers类用于设定启动动画的条件。我们通常会在其中设定一些事件触发条件，比如按钮被点击。当事件被触发时，设定的动画效果就会开始执行。

以上就是WPF中常用的一些动画元素。要创建复杂的动画效果，你可能还需要了解更多的标签和属性，比如RepeatBehavior（用于设定动画的重复行为）、AutoReverse（用于设定动画播放结束后是否自动倒回）、KeyFrames（用于设定动画的关键帧）等等。

接下来，我们将介绍如何在WPF中创建简单的动画。

需要的工具：

Visual Studio

步骤 1：创建一个新的WPF项目

在Visual Studio中，通过点击文件 -> 新建 -> 项目来创建一个新的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：编写动画效果

我们创建一个当用户点击按钮时执行的动画效果。这个效果将使按钮的宽度在1秒钟内扩大到200。

通过代码实现

给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 的点击事件处理器。当点击这个按钮时，这个方法就会被调用。

点击时将会发生动画效果，按钮的宽度内部值从100逐渐变化到300，过程时间为1秒。这是通过WPF中的 Storyboard 和 DoubleAnimation 来完成的。

Storyboard 是动画的容器，而 DoubleAnimation 是这个动画的定义。设置起始值（From）、结束值（To）、动画的持续时间（Duration），并确认动画的目标（要改变的是哪个元素的哪个属性）。

最后，调用 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实现

下面我们用xaml来实现同样的效果。

<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内的一种特布面板标签，它提供了一个灵活的格子系统，用于在多行和多列中进行UI元素布局。

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

在这里，我们定义了一个按钮(Button)。Name属性是给按钮设定的名称，它在XAML和代码之间可以进行关联；Content属性设置按钮的文本为"Click me"；Width和Height属性则设置了按钮的宽度和高度。

<Button.Triggers>

Triggers标签指定触发器，它定义在一定的条件下触发某些行为。

<EventTrigger RoutedEvent="Button.Click">

此处定义了一个EventTrigger事件触发器。该触发器在Button.Click事件——也就是按钮被点击的事件——发生时触发。

<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定义了动画从开始到结束的持续时间。这里设定的动画效果是，在1秒的时间内，按钮的宽度从100变为200。

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

以上是各个元素的结束标签，用于指定相应元素的结束位置。

最终，这段XAML代码定义了一个窗口，窗口中有一个按钮。当该按钮被点击时，它的宽度将在1秒的时间内从100变为200，从而形成一个视觉上的动画效果。

步骤 4：运行你的动画

保存你的代码，运行程序，然后点击按钮观察动画效果。

运行效果

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

posted on 2023-09-17 14:26 漫思阅读(21) 评论(0) 编辑收藏举报

刷新页面返回顶部

漫思