WPF弹性模拟动画

简介: 原文:WPF弹性模拟动画 我们此次将要制作模拟物理中的弹性现象的交互动画,我们让一个小球向鼠标点击位置移动,这个移动的轨迹不是简单的位移,而是根据胡克定律计算得出的。 胡克定律:F=-kd F代表弹性力的大小d是拉伸的位移k为弹性系数在我们的动画中还将加入摩擦力,否则物体就如在真空中运动,永远不会停止。
原文: WPF弹性模拟动画

我们此次将要制作模拟物理中的弹性现象的交互动画,我们让一个小球向鼠标点击位置移动,这个移动的轨迹不是简单的位移,而是根据胡克定律计算得出的。


胡克定律:F=-kd


F代表弹性力的大小
d
是拉伸的位移
k
为弹性系数
在我们的动画中还将加入摩擦力,否则物体就如在真空中运动,永远不会停止。

需声明的是,以上知识并不属于我,也不是来自课本,要知道我的初中物理及格次数并不多,这些是来自于奇才Robert Penner的著作,而以下示例也是其书中Flash示例的翻版。

下面开始我们的示例:

首先我在Expression Design中设计了一个球的外观以及一个渐变的背景:

然后将它们导出为WPF资源字典,在Visual Studio中新建一个项目,引用上述资源做Ellipse元素和Window元素的背景,创建如下的界面:

需注意的是,要将两个SliderMaximum属性设为1LargeChange属性设为0.1,因为我们的两个属性取值范围都是在0-1之间。

在后台代码中将窗体的DataContext属性设为其自身,即“this”。
然后实现INotifyPropertyChanged接口,并设置4个用于前台绑定的4个属性:XY、弹性系数、流体摩擦力
之后将EllipseCanvas.TopCanvas.Left属性分别绑定到YX,两个SliderValue属性分别绑定到弹性系数和流体摩擦力。

之后为Window增加ContentRendered事件处理,在此将初始化一个计时器,以此来控制动画的每个帧:

DispatcherTimer 帧计时器;

 

private void Window_ContentRendered(object sender, EventArgs e)

{

    帧计时器 = new DispatcherTimer();

    帧计时器.Tick += new EventHandler(帧计时器_Tick);

    帧计时器.Interval = TimeSpan.FromMilliseconds(10);

    帧计时器.Start();

}

 

double x = 0;

double y = 0;

 

void 帧计时器_Tick(object sender, EventArgs e)

{

    var X轴弹力 = (X - 目标位置.X) * -弹性系数;

    x += X轴弹力;

    x *= 1-流体摩擦力;

    X += x;

    var Y轴弹力 = (Y - 目标位置.Y) * -弹性系数;

    y += Y轴弹力;

    y *= 1 - 流体摩擦力;

    Y += y;

}

计时器每次触发时,都将进行位置计算,并调整XY的值。

其中的目标位置是在鼠标单击时指定的,为此还要为Window增加PreviewMouseLeftButtonDown事件处理:

private void Window_PreviewMouseLeftButtonDown(object sender, MouseButtonEventArgs e)

{

    var p = e.GetPosition(this);

    目标位置 = new Point(p.X - Ball.ActualWidth / 2, p.Y - Ball.ActualHeight / 2);

}

在此事件处理中,将目标位置设为鼠标当前坐标减去Ellipse元素的实际尺寸的一半,这样在移动完成后,球的中心点就位于鼠标的点击处了。

PS:将PreviewMouseLeftButtonDown事件改为MouseLeftButtonDown也是可行的,但是窗体内的控件如果截获并处理了点击事件,那么将不会引发球体移动。

现在编译和运行后,显示的程序界面效果如下:

通过点击可以使球移动,调整两个参数可以看到不同的移动效果。

你可以通过下面这个视频大略了解此示例的效果,但它与实际的流畅度有些差距,程序中的帧频应当是每秒100帧的,而视频只有每秒25帧。

源视频下载(清晰度高一些):http://www.box.net/shared/fjv5kucgns

本文章的PDF文档下载:http://www.box.net/shared/rlqoqf5lkp

源代码下载

目录
相关文章
WPF中动画教程(DoubleAnimation的基本使用)
WPF中动画教程(DoubleAnimation的基本使用)
197 0
|
算法 C# Windows
不可不知的WPF动画(Animation)
【9月更文挑战第19天】在 WPF(Windows Presentation Foundation)中,动画能为应用程序增添生动性和交互性。主要类型包括线性动画和关键帧动画,可针对依赖属性和自定义属性操作。触发方式有事件触发和自动触发,支持暂停、恢复及停止控制。合理使用这些功能并注意性能优化,可创建引人入胜的用户界面。
219 7
|
C# UED 开发者
WPF与性能优化:掌握这些核心技巧,让你的应用从卡顿到丝滑,彻底告别延迟,实现响应速度质的飞跃——从布局到动画全面剖析与实例演示
【8月更文挑战第31天】本文通过对比优化前后的方法,详细探讨了提升WPF应用响应速度的策略。文章首先分析了常见的性能瓶颈,如复杂的XAML布局、耗时的事件处理、不当的数据绑定及繁重的动画效果。接着,通过具体示例展示了如何简化XAML结构、使用后台线程处理事件、调整数据绑定设置以及利用DirectX优化动画,从而有效提升应用性能。通过这些优化措施,WPF应用将更加流畅,用户体验也将得到显著改善。
1272 1
|
C# UED 开发者
WPF动画大揭秘:掌握动画技巧,让你的界面动起来,告别枯燥与乏味!
【8月更文挑战第31天】在WPF应用开发中,动画能显著提升用户体验,使其更加生动有趣。本文将介绍WPF动画的基础知识和实现方法,包括平移、缩放、旋转等常见类型,并通过示例代码展示如何使用`DoubleAnimation`创建平移动画。此外,还将介绍动画触发器的使用,帮助开发者更好地控制动画效果,提升应用的吸引力。
673 0
|
存储 C# 数据格式
WPF动画教程(PointAnimationUsingPath的使用)
WPF动画教程(PointAnimationUsingPath的使用)
158 0
|
C#
WPF —— 动画缩放变换
`ScaleTransform`用于二维x-y坐标系中对象的缩放,可沿X或Y轴调整。在故事板中,通过RenderTransform.ScaleX和ScaleY属性控制缩放。示例代码展示了如何设置按钮的RenderTransformOrigin、Background等属性,并通过LayoutTransform应用ScaleTransform。当鼠标进入按钮时,EventTrigger启动DoubleAnimation实现X和Y轴的缩放动画。最后,展示了如何将动画集成到自定义按钮样式中。
324 0
|
C#
WPF技术之动画系列-上下运动
本例子展现动画小球上下循环运动
329 0
|
C#
WPF特效-鱼游动动画2
原文:WPF特效-鱼游动动画2           纯代码撸动画实践2:           原图:(png格式)                                                添加Effect以及Effect动画处理后Gif效果:                                     处理: 眼部放大缩小动画; 嘴缩放动画; 尾部收缩动画;  颜色变化效果动画。
1159 0
|
C#
WPF编游戏系列 之六 动画效果(1)
原文:WPF编游戏系列 之六 动画效果(1)        本篇主要针对界面进行动画效果处理。首先在打开或关闭界面时,使其产生动态效果而不是生硬的显示或消失(如下图)。其次在鼠标放到关闭窗口图标上时,使其出现闪动效果。
768 0
|
C# 前端开发
WPF编游戏系列 之七 动画效果(2)
原文:WPF编游戏系列 之七 动画效果(2)        上一篇已经对关闭窗口图标进行了动画效果处理,本篇将对窗口界面的显示和关闭效果进行处理。由于所有的动画效果都是针对窗口界面的Canvas,所以先要为它添加一些RenderTranform属性,这些属性不要填写任何效果,后面会由Storyboard和EventTrigger为其提供。
753 0