WPF中动画教程(DoubleAnimation的基本使用)

实现效果

今天以一个交互式小球的例子跟大家分享一下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.mzph.cn/news/790577.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

vue使用iview导航栏Menu activeName不生效

activeName不生效 一、问题一、解决方案&#xff0c; 一、问题 根据ivew官网的提示&#xff0c;设置了active-name和open-names以后&#xff0c;发现不管是设置静态是数据还是设置动态的数据&#xff0c;都不生效 一、解决方案&#xff0c; 在设置动态名称的时候&#xff0c…

【Erlang】Linux(CentOS7)安装Erlang和RabbitMQ

一、系统环境 查版本对应&#xff0c;CentOS-7&#xff0c;选择Erlang 23.3.4&#xff0c;RabbitMQ 3.9.16 二、操作步骤 安装 Erlang repository curl -s https://packagecloud.io/install/repositories/rabbitmq/erlang/script.rpm.sh | sudo bash安装 Erlang package s…

Yocto理论基础之layer

Yocto理论基础之layer 一、layer介绍二、layer最佳实践三、创建layer 一、layer介绍 在poky源码中我们基本上在每一个meta layer中都能看到一个layer.conf,里面大致内容如下&#xff1a; # We have a conf and classes directory, add to BBPATH BBPATH . ":${LAYERDIR}…

如何使用Python进行文件读写操作?

如何使用Python进行文件读写操作&#xff1f; Python是一种功能强大的编程语言&#xff0c;它提供了丰富的库和工具&#xff0c;使得文件读写操作变得简单而高效。在Python中&#xff0c;可以使用内置的open()函数来进行文件读写操作。下面将详细介绍如何使用Python进行文件读…

【SpringCloud】Ribbon 负载均衡

目 录 一.负载均衡原理二.源码跟踪1. LoadBalancerIntercepor2. LoadBalancerClient3. 负载均衡策略 IRule4. 总结 三.负载均衡策略1.负载均衡策略2.自定义负载均衡策略 四.饥饿加载 在 order-service 中 添加了 LoadBalanced 注解&#xff0c;即可实现负载均衡功能&#xff0c…

Mysql数据库的存储引擎的区别

MyISAM引擎 MyISAM是MySQL的默认数据库引擎&#xff08;5.5版之前&#xff09;。虽然性能极佳&#xff0c;而且提供了大量的特性&#xff0c;包括全文索引、压缩、空间函数等&#xff0c;但MyISAM不支持事务和行级锁&#xff0c;而且最大的缺陷就是崩溃后无法安全恢复。 Inno…

5.2 SSH和交换机端口安全概述

交换机的安全是一个很重要的问题&#xff0c;因为它可能会遭受到一些恶意的攻击&#xff0c;例如MAC泛洪攻击、DHCP欺骗和耗竭攻击、中间人攻击、CDP 攻击和Telnet DoS 攻击等&#xff0c;为了防止交换机被攻击者探测或者控制&#xff0c;必须采取相应的措施来确保交换机的安全…

Spark面试整理-讨论DataFrame和DataSet的区别

在Apache Spark中,DataFrame和Dataset是两种核心的数据结构,它们用于处理结构化数据。尽管它们有很多相似之处,但也存在一些关键的区别。理解这些区别有助于在不同的应用场景中做出适当的选择。 DataFrame 定义:DataFrame是一个分布式的数据集合,类似于关系数据库中的表格…

【Error】Uncaught TypeError: Cannot read properties of undefined (reading ‘get’)

报错原因&#xff1a; 返回值为undefined 解决&#xff1a; vue3可用&#xff1f;

高项(2)信息化和信息系统基础知识1-软件测试-软件需求-软件架构-中间件-数据仓库-七层协议

1.国家信息化体系6要素 法律法规&#xff0c;是保障信息资源&#xff0c;信息资源的开发和利用是核心任务&#xff0c;是国家信息化取得实效的关键信息网络&#xff0c;是基础信息技术应用&#xff0c;是6要素中的龙头信息技术和产业&#xff0c;是物质保障信息化人才&#xff…

RUST语言变量与数据类型使用

使用之前了解: fn main() 表示程序入口点 println!("要输出的内容"); 表示格式化输出 变量与常量声明: let 变量:变量类型 变量值;let mut 变量:变量类型 变量值; const 常量:常量类型 常量值 如果 声明时不指定类型,将根据赋值类型自动推导 变量类型参与下…

在@Value中的Spring EL的使用

在 Spring 中&#xff0c;${} 语法用于引用配置文件中的属性值&#xff0c;而 #{} 语法用于使用 SpEL&#xff08;Spring Expression Language&#xff09;表达式。 Spring EL&#xff08;Expression Language&#xff09;是一种强大的表达式语言&#xff0c;用于在 Spring 应用…

wife_wife【web 攻防世界】

大佬的wp:WEB&#xff1a;Wife_wife-CSDN博客 知识点&#xff1a; prototype是new class 的一个属性&#xff0c;即__proto__指向new class 的prototype属性__proto__如果作为json代码解析的话会被当成键名处理&#xff0c;但是如果是在类中的话则会被当成子类的原型 如let o…

如何防止IP泄露,安全匿名上网?

当互联网成为每个家庭的重要组成部分后&#xff0c;IP地址就成了你的虚拟地址。您的请求从该地址开始&#xff0c;然后 Internet 将消息发送回该地址。那么&#xff0c;您担心您的地址被泄露吗&#xff1f; 对于安全意识高或者某些业务需求的用户&#xff0c;如果您正在寻找保护…

【Spring】使用@Bean和@Import注解配置Bean,与Bean的实例化

目录 1、bean是什么 2、配置bean 2.1、使用Bean注解配置Bean 2.2、使用Import注解配置Bean 3、实例化Bean 1、bean是什么 在 Spring 中&#xff0c;Bean 是指由 Spring 容器管理的对象。Spring IOC 容器负责创建、配置和管理这些 Bean 对象的生命周期。Spring IOC 容器会管…

C/C++混合项目,程序运行报错:未定义函数符号

参考 C/C项目混合编译 extern "C" 详解 《C Primer Plus》函数重载篇章 环境 系统&#xff1a;ubuntu20 编译器&#xff1a;gcc 问题 C 和 C 源码的混合项目&#xff0c;编译成功&#xff0c;但是程序运行报错找不到函数符号。 背景 项目中使用第三方的代码&a…

03.31_111期_C++_list特性和使用

利用想定义一个带头双向链表的迭代器 只能通过在 带头双向链表的类 中同一个命名空间中 再定义一个类 这个类规定 带头双向链表中迭代器的行为 下面的设计需要注意&#xff1a; 1. 定义的这个类需要写出构造函数&#xff0c; 1.1 构造函数…

边缘计算盒子与云计算:谁更适合您的业务需求?

边缘计算盒子和云计算&#xff0c;这两个概念听起来可能有点复杂&#xff0c;但其实它们就是两种不同的数据处理方式。那谁更适合您的业务需求呢&#xff1f;咱们来详细说说。 边缘计算盒子&#xff0c;就像是个小型的数据处理中心&#xff0c;放在离你业务现场比较近的地方。它…

Tensorflow2.0笔记 - 自定义Layer和Model实现CIFAR10数据集的训练

本笔记记录使用自定义Layer和Model来做CIFAR10数据集的训练。 CIFAR10数据集下载&#xff1a; https://www.cs.toronto.edu/~kriz/cifar-10-python.tar.gz 自定义的Layer和Model实现较为简单&#xff0c;参数量较少&#xff0c;并且没有卷积层和dropout等&#xff0c;最终准确率…

基于java+SpringBoot+Vue的图书个性化推荐系统的设计与实现

基于javaSpringBootVue的图书个性化推荐系统的设计与实现 开发语言: Java 数据库: MySQL技术: SpringBoot MyBatis Vue工具: IDEA/Eclipse、Navicat、Maven 系统展示 前台展示 首页&#xff1a;展示图书信息、好书推荐、留言反馈等。 图书信息&#xff1a;用户可以查看图…