WPF实现模拟电梯升降的缓动动画

文/SkyD  出处/博客园

如同Flash一样,WPF的亮点之一也在于其擅于表现平滑的动画效果,但以移动动画来说,仅凭简单的起始位置、目标位置,所产生的动画仍会非常生硬,这种动画忽略了移动开始时的加速过程与移动结束时的减速过程。

WPF在关键帧动画中提供了样条内插(Spline)型的关键帧,用以控制变化的速率曲线,但这东西实在有些复杂,且不够形象化,我研究很久也没明白如何实现“缓入——缓出”的效果,随后我从一本经典牛X却鲜有人知的过时的FlashMX教程中提取了一个缓动函数,我们将用这个函数来较真实地模拟电梯的升降行为。

至于那本牛X的书,我以后会为大家介绍,我个人认为,那本书应当作为平面动画编程的必修经典,而它却被粗烂地印刷,并一直摆在书店里不引人注目的位置。

进入正题:

首先在界面设计器中添加一个 Rectangle ,用以代表直升电梯,然后添加4个 RadioButton 代表几个楼层的呼叫按钮。

稍加美化,即为下图所示:

 附件: 您所在的用户组无法下载或查看附件

RadioButton 的样式直接用来当电梯按钮,略显生硬,我们用下面的代码来美化一下它:

Code


现在就比较帅了:

 附件: 您所在的用户组无法下载或查看附件

接下来为所有 RadioButton 添加统一的事件处理函数:

 附件: 您所在的用户组无法下载或查看附件


至此界面部分的全部代码如下,需要注意的是,所有元素都需要手动调整一下它们在Grid中的对齐方位,将其设为 Left 和 Top。要知道,设计器会在你拖动它们的时候为其胡乱改变对其方位,这会使你的元素没有统一的定位标准,导致几乎没法用代码统一操控它们的位置。

Code


在后台书写事件处理函数代码:

 附件: 您所在的用户组无法下载或查看附件



请不要惊讶我使用中文命名函数,假如你看过我自己写的程序的源代码,你就会对此保持沉默。


这就是传说中的中文函数“开始升降”:

 附件: 您所在的用户组无法下载或查看附件


在这个函数中,我们创建了一个 Thickness 的关键帧动画,Thickness 通常用来代表一个元素的上下左右4边,比如 Border 四个边的粗细就是用 Thickness 描述的,而这里的 Margin 属性也是 Thickness 类型。

一些要点我写在了图里,这里就不累述了。

“缓动计算”,是的,又一个神奇的中文函数,你可以在下面完整的源码中看看它是如何运算的,至少我是对它的内容毫无兴趣。

Code


现在编译运行吧,随便点击一个楼层,你将会看到电梯平缓的起步,然后平缓的停靠在你所选的楼层上。

 附件: 您所在的用户组无法下载或查看附件


当然,即使是这样具有缓动效果的电梯,乘客也是很难生还的,但至少会比生硬的上飞下坠要好很多啦。


源代码下载:
 附件: 您所在的用户组无法下载或查看附件

 感谢原创者的辛勤劳动,希望对您有所帮助,转载请注明原出处。
 您可能对 [WPF] 的这些文章也感兴趣:

在后台代码中引入XAML的方法
[Prism]Composite Application Guidance for WPF(1)--概览
WPF使用UI自动化布局
WPF 实现主题(Theme)自由切换
GDI 与WPF中的颜色简析
用WF流程控制WPF动画
PRISM:一个WPF的合成UI框架
构建简单的WPF应用程序
WPF实现超酷样式按钮
WPF实现不规则窗体
拼吾爱变形金刚