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

news2024/11/19 5:31:49

实现效果

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

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

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)

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1567252.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

mysql 正则表达式查询

mysql 正则表达式查询

学习了mysql 连接查询和子查询和myql join连接&#xff0c;接下来学习下正则表达式查询。正则表达式的规则都是相似的。 8&#xff0c;使用正则表达式查询 正则表达式通常被用来检索或替换那些符合某个模式的文本内容,根据指定的匹配模式匹配文本中符合要求的特殊字符串。例如从…
阅读更多...
Android 高德地图

Android 高德地图

1.获取Key 进入高德开放平台控制台&#xff0c;创建一个新应用。在创建的应用上点击"添加key"按钮&#xff0c;在弹出的对话框中&#xff0c;依次输入key名称&#xff0c;选择服务平台为“Android平台”&#xff0c;输入发布版安全码 SHA1、以及 Package。 获取 S…
阅读更多...
flutter获取手机中的系统路径信息

flutter获取手机中的系统路径信息

https://www.bilibili.com/video/BV1wE421g7sw获取系统中的路径 获取系统中的路径&#xff0c;并在这个路径中创建一个文本文件【str.txt】 然后进行写入【str.txt】 再读取这个文件【str.txt】 手机没有开通root权限无法看到写入到【应用程序文档目录】路径中的文件 用来…
阅读更多...
案例分析-程序的机器级表示

案例分析-程序的机器级表示

案例一&#xff1a;关于编译优化 请自写一段if- else简单分支程序&#xff0c;分别尝试对它进行不带优化、-O1优化和-O2优化&#xff0c;比较它们的机器级表达&#xff0c;并讨论优劣。 图一为不带优化、图二为O1优化、图三为O2优化、图四为原始C代码。 &#xff08;1&#xff…
阅读更多...
x-cmd-pkg | broot 是基于 Rust 开发的一个终端文件管理器

x-cmd-pkg | broot 是基于 Rust 开发的一个终端文件管理器

简介 broot 是基于 Rust 开发的一个终端文件管理器&#xff0c;它设计用于帮助用户在终端中更轻松地管理文件和目录&#xff0c;使用树状视图探索文件层次结构、操作文件、启动操作以及定义您自己的快捷方式。 同时它还集成了 ls, tree, find, grep, du, fzf 等工具的常用功能…
阅读更多...
IDEA连接SqlServer数据库

IDEA连接SqlServer数据库

目录 下载jar包 下载sqljdbc_12.6压缩包 解压 导入IDEA 新建文件夹 复制粘贴进JDBC文件夹并设为library 编写类及方法 代码 下载jar包 以sqljdbc_12.6为例 下载sqljdbc_12.6压缩包 最新地址&#xff1a;sqljdbc 官方最新地址 解压 解压即用 导入IDEA 新建文件夹 复制…
阅读更多...
标题：探索AI绘画：使用深度学习生成艺术

标题：探索AI绘画：使用深度学习生成艺术

正文&#xff1a; 随着计算机技术的发展&#xff0c;人工智能在各个领域取得了显著的成果。通过训练深度学习模型&#xff0c;AI可以学习大量的艺术作品&#xff0c;从而生成具有独特风格和创意的新作品。 本文将介绍如何使用Python和TensorFlow实现一个简单的AI绘画程序。 二、…
阅读更多...
【国信华源2024年首场春季校园招聘面试会举办】

【国信华源2024年首场春季校园招聘面试会举办】

阳春三月&#xff0c;春意盎然&#xff0c;北京国信华源科技有限公司2024年校园招聘活动如期展开。4月2日&#xff0c;成功举办了“国信华源2024年首场春季校园招聘面试会”。 国信华源公司人力资源部热情接待了前来参加面试的同学们&#xff0c;并亲自陪同他们深入探访了企业。…
阅读更多...
Docker 哲学 - compose.yaml 指令

Docker 哲学 - compose.yaml 指令

compose.yaml 的 image commond working_dir 和 dockerfile的 from cmd workdir 区别在哪里 。为什么 dockerfile制定过了。compose还要再写一个。是处于个性化还是 有不同的意义 如果 dockerfile 的 from 是 node:16 &#xff0c;compose.yaml 的 images 是 node:18 那么 直接…
阅读更多...
使用 Docker 部署 Photopea 在线 PS 工具

使用 Docker 部署 Photopea 在线 PS 工具

1&#xff09;Photopea 介绍 GitHub&#xff1a;https://github.com/photopea/photopea 官方手册&#xff1a;https://www.photopea.com/learn/ Adobe 出品的「PhotoShop」想必大家都很熟悉啦&#xff0c;但是「PhotoShop」现在对电脑配置要求越来越高&#xff0c;体积越来越大…
阅读更多...
00-JAVA基础-反射机制

00-JAVA基础-反射机制

反射 什么是反射 在Java中&#xff0c;反射&#xff08;Reflection&#xff09;是Java语言的一个特性&#xff0c;它允许程序在运行时检查类、接口、字段和方法的信息。通过反射&#xff0c;Java代码能够动态地创建对象、调用方法、改变字段的值等&#xff0c;而无需在编译时…
阅读更多...
基础篇3 浅试Python爬虫爬取视频，m3u8标准的切片视频

基础篇3 浅试Python爬虫爬取视频，m3u8标准的切片视频

浅试Python爬取视频 1.页面分析 使用虾米视频在线解析使用方式&#xff1a;https://jx.xmflv.cc/?url目标网站视频链接例如某艺的视频 原视频链接 解析结果: 1.1 F12查看页面结构 我们发现页面内容中什么都没有&#xff0c;video标签中的src路径也不是视频的数据。 1.2 …
阅读更多...
linux清理缓存垃圾命令和方法介绍

linux清理缓存垃圾命令和方法介绍

在Linux系统中&#xff0c;清理缓存和垃圾文件可以通过多种方法完成&#xff0c;这些方法旨在释放磁盘空间、提高系统性能。以下是一些常用的方法&#xff0c;结合了搜索结果中的信息&#xff1a; 1. 使用sync和echo命令清除RAM缓存和交换空间1 清除页面缓存&#xff08;Page …
阅读更多...
不讲概念，讲实操，mysql 分表模糊查询、分页查询 及 merge 表的使用

不讲概念，讲实操，mysql 分表模糊查询、分页查询 及 merge 表的使用

1.Mysql merge合并表的要求 1.合并的分表必须是 MyISAM 引擎&#xff0c;MyISAN引擎是不支持事务的。2.Merge表只保证合表后数据唯一性&#xff0c;合表前的数据可能会存在重复。3.表的结构必须一致&#xff0c;包括索引、字段类型、引擎和字符集。4.删除 tb_member1 分表正确…
阅读更多...
原理图设计的通用规范

原理图设计的通用规范

原理图各页内容依次为&#xff1a;封面、目录、电源、时钟、CPU、存储器、逻辑、背板&#xff08;母板&#xff09;接口等。 原理图上所有的文字方向应该统一&#xff0c;文字的上方应该朝向原理图的上方&#xff08;正放文字&#xff09;或左方&#xff08;侧放文字&#xff…
阅读更多...
Whisper对于中文语音识别与转写中文文本优化的实践(Python3.10)

Whisper对于中文语音识别与转写中文文本优化的实践(Python3.10)

原文&#xff1a;Whisper对于中文语音识别与转写中文文本优化的实践(Python3.10) - 知乎 阿里的FunAsr对Whisper中文领域的转写能力造成了一定的挑战&#xff0c;但实际上&#xff0c;Whisper的使用者完全可以针对中文的语音做一些优化的措施&#xff0c;换句话说&#xff0c;…
阅读更多...
【LeetCode热题100】51. N 皇后（回溯）

【LeetCode热题100】51. N 皇后（回溯）

一.题目要求 按照国际象棋的规则&#xff0c;皇后可以攻击与之处在同一行或同一列或同一斜线上的棋子。 n 皇后问题 研究的是如何将 n 个皇后放置在 nn 的棋盘上&#xff0c;并且使皇后彼此之间不能相互攻击。 给你一个整数 n &#xff0c;返回所有不同的 n 皇后问题 的解决方…
阅读更多...
hadoop:案例：将顾客在京东、淘宝、多点三家平台的消费金额汇总，然后先按京东消费额排序，再按淘宝消费额排序

hadoop:案例：将顾客在京东、淘宝、多点三家平台的消费金额汇总，然后先按京东消费额排序，再按淘宝消费额排序

一、原始消费数据buy.txt zhangsan 5676 2765 887 lisi 6754 3234 1232 wangwu 3214 6654 388 lisi 1123 4534 2121 zhangsan 982 3421 5566 zhangsan 1219 36 45二、实现思路&#xff1a;先通过一个MapReduce将顾客的消费金额进行汇总&#xff0c;再通过一个MapReduce来根据金…
阅读更多...
RocketMQ是什么？

RocketMQ是什么？

文章目录 一、RocketMQ是什么&#xff1f;二、RocketMQ 应用场景三、RocketMQ 优缺点1.优点2、缺点 一、RocketMQ是什么&#xff1f; RocketMQ 是一款纯 java、分布式、队列模型的消息中间件&#xff0c;支持事务消息、顺序消息、批量消息、定时消息、消息回溯等。 二、Rocke…
阅读更多...
java数据结构与算法刷题-----LeetCode417. 太平洋大西洋水流问题

java数据结构与算法刷题-----LeetCode417. 太平洋大西洋水流问题

java数据结构与算法刷题目录&#xff08;剑指Offer、LeetCode、ACM&#xff09;-----主目录-----持续更新(进不去说明我没写完)&#xff1a;https://blog.csdn.net/grd_java/article/details/123063846 文章目录 深度优先遍历 深度优先遍历 解题思路&#xff1a;时间复杂度O( …
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023