WPF 动画初学者教程

• 下载演示 - 3.88 KB
• 下载源码 - 174.25 KB

引言

本文的目标读者是WPF的初学者。 但您应该了解任何.NET CLR语言。 我使用我最喜欢的C#进行描述。 另外，别忘了，WPF用于.NET Framework 3.x+，我使用了Visual Studio Express 2008。

动画按钮

本教程是关于使用System.Windows.Media.Animation namespace 创建一个简单的按钮动画。 像往常一样，我使用 C# 来演示这个例子，因为它是我继 C 语言之后最喜欢的语言。 另请注意，我为程序员编写这些文章，即使我们可以用 XAML 本身完成所有这些，我也会用 C# 编写代码。

步骤 1：在窗体上放置一个按钮。 我们将其命名为Button1。

步骤 2：现在将这些行添加到按钮单击事件中。（如果您在 Visual Studio 中，只需双击该按钮）。 请记住使用语言下拉菜单设置代码段的语言。

DoubleAnimation da = new DoubleAnimation();
da.From = 30;
da.To = 100;
da.Duration = new Duration(TimeSpan.FromSeconds(1));
Button1.BeginAnimation(Button.HeightProperty, da);

步骤 3：按 F5。 即执行。

您将看到一个按钮在您单击时自动增加其大小。

技巧

1. 在BeginAnimation之前添加以下行。 这将在动画之后恢复按钮。 当然它也是动画的。

   da.AutoReverse = true;

2. 在BeginAnimation之前添加以下行。 您可以看到动画永远不会停止。

   da.RepeatBehavior = RepeatBehavior.Forever

旋转矩形

步骤 1：在窗体上放置一个按钮和一个矩形。（不需要按钮。我只是用它来引发一个事件。）

步骤 2：在按钮单击事件中添加以下代码
注意：不要忘记import System.Windows.Media.Animation namespace。

DoubleAnimation da = new DoubleAnimation();
da.From = 0;
da.To = 360;
da.Duration = new Duration(TimeSpan.FromSeconds(3));
da.RepeatBehavior = RepeatBehavior.Forever;
RotateTransform rt = new RotateTransform();
rectangle1.RenderTransform = rt;
rt.BeginAnimation(RotateTransform.AngleProperty, da);

步骤 3：执行并享受。 您可以看到一个矩形连续旋转 360 度。 正如我在另一篇文章中提到的，您可以添加自动反向等。

这是完整的 C# 代码

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
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.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
using System.Windows.Media.Animation;
 
namespace WpfApplication1
{
    /// 

    /// Interaction logic for Window1.xaml
    /// 
    public partial class Window1 : Window
    {
        public Window1()
        {
            InitializeComponent();
        }
 
        private void button1_Click(object sender, RoutedEventArgs e)
        {
            DoubleAnimation da = new DoubleAnimation();
            da.From = 0;
            da.To = 360;
            da.Duration = new Duration(TimeSpan.FromSeconds(3));
            da.RepeatBehavior = RepeatBehavior.Forever;
            RotateTransform rt = new RotateTransform();
            rectangle1.RenderTransform = rt;
            rt.BeginAnimation(RotateTransform.AngleProperty, da);
        }
    }
}

人为地旋转车轮

在本文中，您可以在顶部看到一个车轮图片。 我们将使用image1.RenderTransformOrigin来保持图像的中心点。 检查附件中的示例源代码。

这是“车轮转动”的代码

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
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.Imaging;
using System.Windows.Navigation;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
 
namespace WpfApplication1
{
    /// 

    /// Interaction logic for Window1.xaml
    /// 
    public partial class Window1 : Window
    {
        public Window1()
        {
            InitializeComponent();
        }
        private void Window_Loaded(object sender, RoutedEventArgs e)
        {
            DoubleAnimation da = new DoubleAnimation
                (360, 0, new Duration(TimeSpan.FromSeconds(3)));
            RotateTransform rt = new RotateTransform();
            image1.RenderTransform = rt;
            image1.RenderTransformOrigin = new Point(0.5, 0.5);
            da.RepeatBehavior = RepeatBehavior.Forever;
            rt.BeginAnimation(RotateTransform.AngleProperty, da);
        }
    }
}

与 WPF 中隐藏的范围相比，本文中指定的动画过程简直是“无”。 希望初学者所拥有的恐惧会因这篇示例文章而消除。 WPF 就像 ABC 一样简单。

历史

• 2008 年 1 月 28 日：首次发布