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.- Ball.ActualWidth / 2, p.- Ball.ActualHeight / 2);

}

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

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

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

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

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

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

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

源代码下载


本文转自斯克迪亚博客园博客,原文链接:http://www.cnblogs.com/SkyD/archive/2008/09/05/1284778.html,如需转载请自行联系原作者

相关文章
|
7月前
|
C#
WPF技术之动画系列-上下运动
本例子展现动画小球上下循环运动
125 0
|
API C# 索引
WPF中的动画——(一)基本概念
原文:WPF中的动画——(一)基本概念 WPF的一个特点就是支持动画,我们可以非常容易的实现漂亮大方的界面。首先,我们来复习一下动画的基本概念。计算机中的动画一般是定格动画,也称之为逐帧动画,它通过每帧不同的图像连续播放,从而欺骗眼和脑产生动画效果。
1035 0
|
C# 测试技术
WPF中的动画——(二)From/To/By 动画
原文:WPF中的动画——(二)From/To/By 动画 我们所实现的的动画中,很大一部分是让一个属性在起始值和结束值之间变化,例如,我在前文中实现的改变宽度的动画:     var widthAnimation = new DoubleAnimation()    {        From = 0,        To = 320,        Duration = TimeSpan.
970 0
|
算法 C#
WPF中的动画——(五)关键帧动画
原文:WPF中的动画——(五)关键帧动画 与 From/To/By 动画类似,关键帧动画以也可以以动画形式显示目标属性值。 和From/To/By 动画不同的是, From/To/By 动画只能控制在两个状态之间变化,而关键帧动画则可以在多个状态之间变化,例如,对于前面那个改变按钮宽度的例子,如果我们要实现如下效果: 在2秒时将宽度从 0变为350 在7秒时将宽度变为50 在9秒的时候将其宽度变为200 虽然我们可以用三个From/To/By 动画组合实现类似效果,但是这样一来麻烦,二来要感知动画完成事件,不方便在XAML中使用。
1330 0
|
C#
WPF中的动画——(四)缓动函数
原文:WPF中的动画——(四)缓动函数 缓动函数可以通过一系列公式模拟一些物理效果,如实地弹跳或其行为如同在弹簧上一样。它们一般应用在From/To/By动画上,可以使得其动画更加平滑。     var widthAnimation = new DoubleAnimation()    {    ...
933 0
|
C#
WPF中的动画——(三)时间线(TimeLine)
原文:WPF中的动画——(三)时间线(TimeLine) 时间线(TimeLine)表示时间段。 它提供的属性可以让控制该时间段的长度、开始时间、重复次数、该时间段内时间进度的快慢等等。在WPF中内置了如下几种TimeLine: AnimationTimeline :前面已经介绍过,主要用于属性的过渡,这种是最常见的动画。
1414 0
|
C# 容器 调度
WPF中的动画——(六)演示图板
原文:WPF中的动画——(六)演示图板 前面所介绍的都是单一的动画,它只能修改单一属性。有的时候,我们需要将一组动画一起进行,对于一个按钮,我们可能有如下需求: 选择该按钮时,该按钮增大并更改颜色。
735 0
|
10天前
|
C# 开发者 Windows
基于Material Design风格开源、易用、强大的WPF UI控件库
基于Material Design风格开源、易用、强大的WPF UI控件库
|
4月前
|
C#
浅谈WPF之装饰器实现控件锚点
使用过visio的都知道,在绘制流程图时,当选择或鼠标移动到控件时,都会在控件的四周出现锚点,以便于修改大小,移动位置,或连接线等,那此功能是如何实现的呢?在WPF开发中,想要在控件四周实现锚点,可以通过装饰器来实现,今天通过一个简单的小例子,简述如何在WPF开发中,应用装饰器,仅供学习分享使用,如有不足之处,还请指正。
59 1
|
8月前
|
C# Windows
WPF技术之图形系列Polygon控件
WPF Polygon是Windows Presentation Foundation (WPF)框架中的一个标记元素,用于绘制多边形形状。它可以通过设置多个点的坐标来定义多边形的形状,可以绘制任意复杂度的多边形。
450 0