首页 > 其他分享 >WPF中动画教程（DoubleAnimation的基本使用）

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

时间：2024-04-01 11:22:23浏览次数：26  
标签：动画 TranslateTransform var interactiveTranslateTransform DoubleAnimation new WPF 

实现效果

今天以一个交互式小球的例子跟大家分享一下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中包含一个圆形。

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

image-20240401095600816

一些设置

相关设置的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是什么？有什么作用呢？

image-20240401100405500

它的基本结构：

 //
 // 摘要:
 //     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 TranslateTransform CloneCurrentValue();
     protected override Freezable CreateInstanceCore();
 }

TranslateTransform 是 WPF 中的一个类，它表示一个 2D 平移变换。这个类是 Transform 类的派生类，用于在 2D 平面上移动（平移）对象。
TranslateTransform 类有两个主要的属性：X 和 Y，它们分别表示在 X 轴和 Y 轴上的移动距离。例如，如果你设置 X 为 100 和 Y 为 200，那么应用这个变换的元素将会向右移动 100 像素，向下移动 200 像素。

 _interactiveEllipse.RenderTransform =
             _interactiveTranslateTransform;

将 _interactiveEllipse元素的RenderTransform属性设置为_interactiveTranslateTransform。

image-20240401101111864

RenderTransform属性用于获取或设置影响 UIElement 呈现位置的转换信息。

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

这是在注册 _containerBorder的鼠标左键点击事件与鼠标右键点击事件。

image-20240401101323899

image-20240401101401446

注意当Border这样写时，不会触发鼠标点击事件：

 <Border x:Name="_containerBorder">

这是因为在 WPF 中，Border 控件的背景默认是透明的，这意味着它不会接收鼠标事件。当你设置了背景颜色后，Border 控件就会开始接收鼠标事件，因为它现在有了一个可见的背景。
如果你希望 Border 控件在没有背景颜色的情况下也能接收鼠标事件，你可以将背景设置为透明色。这样，虽然背景看起来是透明的，但它仍然会接收鼠标事件。

可以这样设置：

<Border x:Name="_containerBorder" Background="Transparent">

鼠标点击事件处理程序

以鼠标左键点击事件处理程序为例，进行说明：

  private void border_mouseLeftButtonDown(object sender, MouseButtonEventArgs e)
  {
      var clickPoint = Mouse.GetPosition(_containerBorder);

      // Set the target point so the center of the ellipse
      // ends up at the clicked point.
      var targetPoint = new Point
      {
          X = clickPoint.X - _interactiveEllipse.Width / 2,
          Y = clickPoint.Y - _interactiveEllipse.Height / 2
      };

      // Animate to the target point.
      var xAnimation =
          new DoubleAnimation(targetPoint.X,
              new Duration(TimeSpan.FromSeconds(4)));
      _interactiveTranslateTransform.BeginAnimation(
          TranslateTransform.XProperty, xAnimation, HandoffBehavior.SnapshotAndReplace);

      var yAnimation =
          new DoubleAnimation(targetPoint.Y,
              new Duration(TimeSpan.FromSeconds(4)));
      _interactiveTranslateTransform.BeginAnimation(
          TranslateTransform.YProperty, yAnimation, HandoffBehavior.SnapshotAndReplace);

      // Change the color of the ellipse.
      _interactiveEllipse.Fill = Brushes.Lime;
  }

重点是：

 // Animate to the target point.
      var xAnimation =
          new DoubleAnimation(targetPoint.X,
              new Duration(TimeSpan.FromSeconds(4)));
      _interactiveTranslateTransform.BeginAnimation(
          TranslateTransform.XProperty, xAnimation, HandoffBehavior.SnapshotAndReplace);

      var yAnimation =
          new DoubleAnimation(targetPoint.Y,
              new Duration(TimeSpan.FromSeconds(4)));
      _interactiveTranslateTransform.BeginAnimation(
          TranslateTransform.YProperty, yAnimation, HandoffBehavior.SnapshotAndReplace);

DoubleAnimation类的介绍：

image-20240401102112194

DoubleAnimation 是 WPF 中的一个类，它用于创建从一个 double 值到另一个 double 值的动画。这个类是 AnimationTimeline 类的派生类，它可以用于任何接受 double 类型的依赖属性。
DoubleAnimation 类有几个重要的属性：
• From：动画的起始值。
• To：动画的结束值。
• By：动画的增量值，用于从 From 值增加或减少。
• Duration：动画的持续时间。
• AutoReverse：一个布尔值，指示动画是否在到达 To 值后反向运行回 From 值。
• RepeatBehavior：定义动画的重复行为，例如，它可以设置为无限重复或重复特定的次数。

  var xAnimation =
          new DoubleAnimation(targetPoint.X,
              new Duration(TimeSpan.FromSeconds(4)));

我们使用的是这种形式的重载：

image-20240401102332146

设置了一个要达到的double类型值与达到的时间，这里设置为了4秒。

 _interactiveTranslateTransform.BeginAnimation(
          TranslateTransform.XProperty, xAnimation, HandoffBehavior.SnapshotAndReplace);

image-20240401102753637

• _interactiveTranslateTransform.BeginAnimation：这是 BeginAnimation 方法的调用，它开始一个动画，该动画会改变一个依赖属性的值。在这个例子中，改变的是 _interactiveTranslateTransform 对象的 X 属性。
• TranslateTransform.XProperty：这是 TranslateTransform 类的 X 依赖属性。这个属性表示在 X 轴上的移动距离。
• xAnimation：这是一个 DoubleAnimation 对象，它定义了动画的目标值和持续时间。在这个例子中，动画的目标值是鼠标点击的位置，持续时间是 4 秒。
• HandoffBehavior.SnapshotAndReplace：这是 HandoffBehavior 枚举的一个值，它定义了当新动画开始时，如何处理正在进行的动画。SnapshotAndReplace 表示新动画将替换旧动画，并从旧动画当前的值开始。

全部代码

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>

cs：

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.Animation;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace AnimationDemo
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    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 void border_mouseLeftButtonDown(object sender, MouseButtonEventArgs e)
        {
            var clickPoint = Mouse.GetPosition(_containerBorder);

            // Set the target point so the center of the ellipse
            // ends up at the clicked point.
            var targetPoint = new Point
            {
                X = clickPoint.X - _interactiveEllipse.Width / 2,
                Y = clickPoint.Y - _interactiveEllipse.Height / 2
            };

            // Animate to the target point.
            var xAnimation =
                new DoubleAnimation(targetPoint.X,
                    new Duration(TimeSpan.FromSeconds(4)));
            _interactiveTranslateTransform.BeginAnimation(
                TranslateTransform.XProperty, xAnimation, HandoffBehavior.SnapshotAndReplace);

            var yAnimation =
                new DoubleAnimation(targetPoint.Y,
                    new Duration(TimeSpan.FromSeconds(4)));
            _interactiveTranslateTransform.BeginAnimation(
                TranslateTransform.YProperty, yAnimation, HandoffBehavior.SnapshotAndReplace);

            // Change the color of the ellipse.
            _interactiveEllipse.Fill = Brushes.Lime;
        }

        private void border_mouseRightButtonDown(object sender, MouseButtonEventArgs e)
        {
            // Find the point where the use clicked.
            var clickPoint = Mouse.GetPosition(_containerBorder);

            // Set the target point so the center of the ellipse
            // ends up at the clicked point.
            var targetPoint = new Point
            {
                X = clickPoint.X - _interactiveEllipse.Width / 2,
                Y = clickPoint.Y - _interactiveEllipse.Height / 2
            };


            // Animate to the target point.
            var xAnimation =
                new DoubleAnimation(targetPoint.X,
                    new Duration(TimeSpan.FromSeconds(4)));
            _interactiveTranslateTransform.BeginAnimation(
                TranslateTransform.XProperty, xAnimation, HandoffBehavior.Compose);

            var yAnimation =
                new DoubleAnimation(targetPoint.Y,
                    new Duration(TimeSpan.FromSeconds(4)));
            _interactiveTranslateTransform.BeginAnimation(
                TranslateTransform.YProperty, yAnimation, HandoffBehavior.Compose);

            // Change the color of the ellipse.
            _interactiveEllipse.Fill = Brushes.Orange;
        }
    }
}

实现效果：

实现效果

参考

1、Microsoft Learn：培养开拓职业生涯新机遇的技能

2、WPF-Samples/Animation/LocalAnimations/InteractiveAnimationExample.cs at main · microsoft/WPF-Samples (github.com)

标签：动画,TranslateTransform,var,interactiveTranslateTransform,DoubleAnimation,new,WPF,
From： https://www.cnblogs.com/mingupupu/p/18108029

相关文章

  • WPF中封装一个自己的MessageBox
    前言  在WPF应用程序开发中，我们可以借助其强大灵活的设计能力打造出绚丽而富有创意的用户界面。然而，与这种高度定制化的界面相比，标准MessageBox却显得有些原始和古老。它的外观与现代、绚丽的应用界面格格不入，使得用户在交互中可能感到突兀或不符合预期。  本文将深入探......
  • Wpf ComboBoxItem show multi fields
    <Windowx:Class="WpfApp28.MainWindow"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"xmlns:d="http://schemas.microsoft.......
  • WPF如何封装一个可扩展的Window
    前言   WPF中Window相信大家都很熟悉，有时我们有一些自定义需求默认Window是无法满足的，比如在标题栏上放一些自己东西，这个时候我们就需要写一个自己的Window，实现起来也很简单，只要给Window设置一个WindowChrome.WindowChrome附加属性就可以实现，WindowChrome可以让你自定义窗口......
  • WPF Yolov 体验
    参考Yolov中文文档yolov8_wpf_example（简单搜索到的一个示例程序）本文源码【下载】环境软件/系统版本说明WindowsWindows10专业版22H219045.4170MicrosoftVisualStudioMicrosoftVisualStudioCommunity2022(64位)-17.6.5Microsoft.NetSD......
  • 一个可以让你有更多时间摸鱼的WPF控件（二）
    前言  上文介绍了如何通过一个Form自定义控件来简化数据的录入，并自动实现数据校验，自动布局排列等功能。本文继续介绍如何优化表格控件的使用，缩减代码量，实现工作效率的提升。一、功能实现   上文中分析了DataGrid跟ListView两种表格控件的优劣，在这里我们选择ListView来实......
  • WPF中继承ItemsControl子类控件数据模板获取选中属性
    需求场景列表类控件，如ListBox、ListView、DataGrid等。显示的行数据中，部分内容依靠选中时触发控制，例如选中行时行记录复选，部分列内容控制显隐。案例源码以ListView为例。Xaml部分<ListViewItemsSource="{BindingMyPropertys}"IsManipulationEnabled="False"><List......
  • WPF中使用PDF模板实现PDF导出和预览-来自GPT4
    在C#和WPF项目中实现加载不同的PDF模板、查看报告和导出PDF文件的功能，可以通过以下步骤完成：1.选择PDF库首先，选择一个合适的.NETPDF库。有许多库可以帮助你处理PDF文件，包括但不限于：iTextSharp:一个功能强大的和灵活的库，适用于创建和修改PDF文件。它是iText的一个.NET端口。......
  • WPF中实现动态表单-来自GPT4的回答
    实现C#和WPF项目中的动态表单功能，需要在后端设计灵活的数据结构来存储表单配置（例如字段名、字段类型等），同时前端需要能够解析这些配置并据此生成相应的控件。以下是一种可能的实现方法：1.数据库设计你的数据库需要至少包含两个表：一个用于存储表单字段的配置，另一个用于存储用户输......
  • wpf write value to config file and read the persisted value
    <Windowx:Class="WpfApp26.MainWindow"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"xmlns:d="http://schemas.microsoft.......
  • WPF实现placeholder效果
     概述：WPF中通过`Style`实现TextBox水印文本，使用`WatermarkTextBox`类及`ControlTemplate`。这个示例通过`VisualStateManager`在文本框失去焦点且内容为空时显示水印文本。通过`Watermark`属性简化水印文本设置，提高可维护性。在WPF中，通过Style实现TextBox中的水印文本（水印、......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99