东莞网站建设网站,邮箱网站架构,桂林网红民宿,做招聘网站的背景图片实现效果
今天以一个交互式小球的例子跟大家分享一下wpf动画中DoubleAnimation的基本使用。该小球会移动到我们鼠标左键或右键点击的地方。
该示例的实现效果如下所示#xff1a; 页面设计
xaml如下所示#xff1a;
Window x:ClassAnimationDemo.MainWindow 页面设计
xaml如下所示
Window x:ClassAnimationDemo.MainWindowxmlnshttp://schemas.microsoft.com/winfx/2006/xaml/presentationxmlns:xhttp://schemas.microsoft.com/winfx/2006/xamlxmlns:dhttp://schemas.microsoft.com/expression/blend/2008xmlns:mchttp://schemas.openxmlformats.org/markup-compatibility/2006xmlns:localclr-namespace:AnimationDemomc:IgnorabledTitleMainWindow Height450 Width800DockPanelBorder x:Name_containerBorder BackgroundTransparentEllipse x:Name_interactiveEllipseFillLimeStrokeBlackStrokeThickness2.0Width25Height25HorizontalAlignmentLeftVerticalAlignmentTop //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 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的鼠标左键点击事件与鼠标右键点击事件。 注意当Border这样写时不会触发鼠标点击事件 Border x:Name_containerBorder这是因为在 WPF 中Border 控件的背景默认是透明的这意味着它不会接收鼠标事件。当你设置了背景颜色后Border 控件就会开始接收鼠标事件因为它现在有了一个可见的背景。 如果你希望 Border 控件在没有背景颜色的情况下也能接收鼠标事件你可以将背景设置为透明色。这样虽然背景看起来是透明的但它仍然会接收鼠标事件。
可以这样设置
Border x:Name_containerBorder BackgroundTransparent鼠标点击事件处理程序
以鼠标左键点击事件处理程序为例进行说明 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类的介绍 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)));我们使用的是这种形式的重载 设置了一个要达到的double类型值与达到的时间这里设置为了4秒。 _interactiveTranslateTransform.BeginAnimation(TranslateTransform.XProperty, xAnimation, HandoffBehavior.SnapshotAndReplace);• _interactiveTranslateTransform.BeginAnimation这是 BeginAnimation 方法的调用它开始一个动画该动画会改变一个依赖属性的值。在这个例子中改变的是 _interactiveTranslateTransform 对象的 X 属性。 • TranslateTransform.XProperty这是 TranslateTransform 类的 X 依赖属性。这个属性表示在 X 轴上的移动距离。 • xAnimation这是一个 DoubleAnimation 对象它定义了动画的目标值和持续时间。在这个例子中动画的目标值是鼠标点击的位置持续时间是 4 秒。 • HandoffBehavior.SnapshotAndReplace这是 HandoffBehavior 枚举的一个值它定义了当新动画开始时如何处理正在进行的动画。SnapshotAndReplace 表示新动画将替换旧动画并从旧动画当前的值开始。
全部代码
xaml
Window x:ClassAnimationDemo.MainWindowxmlnshttp://schemas.microsoft.com/winfx/2006/xaml/presentationxmlns:xhttp://schemas.microsoft.com/winfx/2006/xamlxmlns:dhttp://schemas.microsoft.com/expression/blend/2008xmlns:mchttp://schemas.openxmlformats.org/markup-compatibility/2006xmlns:localclr-namespace:AnimationDemomc:IgnorabledTitleMainWindow Height450 Width800DockPanelBorder x:Name_containerBorder BackgroundTransparentEllipse x:Name_interactiveEllipseFillLimeStrokeBlackStrokeThickness2.0Width25Height25HorizontalAlignmentLeftVerticalAlignmentTop //Border/DockPanel
/Windowcs
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/// /summarypublic 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)
