WPF中动画教程（DoubleAnimation的基本使用）

原创

已于 2024-04-03 17:02:00 修改 · 2k 阅读

19 ·

CC 4.0 BY-SA版权

文章标签：

#wpf

于 2024-04-03 17:01:45 首次发布

本文详细介绍了如何在WPF中使用DoubleAnimation和TranslateTransform创建一个响应鼠标点击的交互式小球动画效果，包括XAML代码和C#实现，以及鼠标事件处理的相关知识。

实现效果

今天以一个交互式小球的例子跟大家分享一下wpf动画中DoubleAnimation的基本使用。该小球会移动到我们鼠标左键或右键点击的地方。

该示例的实现效果如下所示：

实现效果

页面设计

xaml如下所示：

<Window x:Class="AnimationDemo.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:AnimationDemo"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <DockPanel>
        <Border x:Name="_containerBorder" Background="Transparent">
            <Ellipse x:Name="_interactiveEllipse"
         Fill="Lime"
         Stroke="Black"
         StrokeThickness="2.0"
         Width="25"
         Height="25"
         HorizontalAlignment="Left"
         VerticalAlignment="Top" />
        </Border>
    </DockPanel>
</Window>

就是在DockPanel中包含一个Border，在Border中包含一个圆形。

页面设计的效果如下所示：

一些设置

相关设置的cs代码如下所示：

   public partial class MainWindow : Window
 {
   
   
     private readonly TranslateTransform _interactiveTranslateTransform;
     public MainWindow()
     {
   
   
         InitializeComponent();

         _interactiveTranslateTransform = new TranslateTransform();

         _interactiveEllipse.RenderTransform =
             _interactiveTranslateTransform;

         _containerBorder.MouseLeftButtonDown +=
            border_mouseLeftButtonDown;
         _containerBorder.MouseRightButtonDown +=
             border_mouseRightButtonDown;
     }

 private readonly TranslateTransform _interactiveTranslateTransform;

首先声明了一个私有的只读的TranslateTransform类型的对象_interactiveTranslateTransform，然后在MainWindow的构造函数中赋值。

 _interactiveTranslateTransform = new TranslateTransform();

TranslateTransform是什么？有什么作用呢？

它的基本结构：

 //
 // 摘要:
 //     Translates (moves) an object in the 2-D x-y coordinate system.
 public sealed class TranslateTransform : Transform
 {
   
   

     public static readonly DependencyProperty XProperty;
  
     public static readonly DependencyProperty YProperty;

     public TranslateTransform();
   
     public TranslateTransform(double offsetX, double offsetY);

     public override Matrix Value {
   
    get; }
   
     public double X {
   
    get; set; }
  
     public double Y {
   
    get; set; }

     public TranslateTransform Clone();
 
     public

最低0.47元/天解锁文章