WPF界面设计技巧(7)—模拟电梯升降的缓动动画-阿里云开发者社区

开发者社区> 杰克.陈> 正文

WPF界面设计技巧(7)—模拟电梯升降的缓动动画

简介: 原文:WPF界面设计技巧(7)—模拟电梯升降的缓动动画     如同Flash一样,WPF的亮点之一也在于其擅于表现平滑的动画效果,但以移动动画来说,仅凭简单的起始位置、目标位置,所产生的动画仍会非常生硬,这种动画忽略了移动开始时的加速过程与移动结束时的减速过程。
+关注继续查看
原文:WPF界面设计技巧(7)—模拟电梯升降的缓动动画

 

 

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

 

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

 

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

 

进入正题:

 

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

 

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

 

 

 

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

 

 

img_1c53668bcee393edac0d7b3b3daff1ae.gifimg_405b18b4b6584ae338e0f6ecaf736533.gifCode
        <Style TargetType="RadioButton">
            
<Setter Property="Foreground" Value="#ADB7BD"/>
            
<Setter Property="FontSize" Value="32"/>
            
<Setter Property="Cursor" Value="Hand"/>
            
<Setter Property="Template">
                
<Setter.Value>
                    
<ControlTemplate TargetType="RadioButton">
                        
<ContentPresenter/>
                        
<ControlTemplate.Triggers>
                            
<Trigger Property="IsChecked" Value="True">
                                
<Trigger.EnterActions>
                                    
<BeginStoryboard>
                                        
<Storyboard>
                                            
<ColorAnimation To="#BD5E00" Duration="0:0:0.3" BeginTime="0:0:0.1" Storyboard.TargetProperty="(Button.Foreground).(SolidColorBrush.Color)"/> 
                                        
</Storyboard>
                                    
</BeginStoryboard>
                                
</Trigger.EnterActions>
                                
<Trigger.ExitActions>
                                    
<BeginStoryboard>
                                        
<Storyboard>
                                            
<ColorAnimation Duration="0:0:0.2" BeginTime="0:0:0.2" Storyboard.TargetProperty="(Button.Foreground).(SolidColorBrush.Color)"/>
                                        
</Storyboard>
                                    
</BeginStoryboard>
                                
</Trigger.ExitActions>
                            
</Trigger>
                        
</ControlTemplate.Triggers>
                    
</ControlTemplate>
                
</Setter.Value>
            
</Setter>
        
</Style>

 

 

现在就比较帅了:

 

 

 

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

 

 

 

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

 

 

img_1c53668bcee393edac0d7b3b3daff1ae.gifimg_405b18b4b6584ae338e0f6ecaf736533.gifCode
<Window x:Class="缓动动画.Window1"
    xmlns
="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x
="http://schemas.microsoft.com/winfx/2006/xaml"
    Title
="Window1" Height="398" Width="381" x:Name="window" Background="{StaticResource back}" Loaded="window_Loaded">
    
<Window.Resources>
        
<Style TargetType="RadioButton">
            
<Setter Property="Foreground" Value="#ADB7BD"/>
            
<Setter Property="FontSize" Value="32"/>
            
<Setter Property="Cursor" Value="Hand"/>
            
<Setter Property="Template">
                
<Setter.Value>
                    
<ControlTemplate TargetType="RadioButton">
                        
<ContentPresenter/>
                        
<ControlTemplate.Triggers>
                            
<Trigger Property="IsChecked" Value="True">
                                
<Trigger.EnterActions>
                                    
<BeginStoryboard>
                                        
<Storyboard>
                                            
<ColorAnimation To="#BD5E00" Duration="0:0:0.3" BeginTime="0:0:0.1" Storyboard.TargetProperty="(Button.Foreground).(SolidColorBrush.Color)"/> 
                                        
</Storyboard>
                                    
</BeginStoryboard>
                                
</Trigger.EnterActions>
                                
<Trigger.ExitActions>
                                    
<BeginStoryboard>
                                        
<Storyboard>
                                            
<ColorAnimation Duration="0:0:0.2" BeginTime="0:0:0.2" Storyboard.TargetProperty="(Button.Foreground).(SolidColorBrush.Color)"/>
                                        
</Storyboard>
                                    
</BeginStoryboard>
                                
</Trigger.ExitActions>
                            
</Trigger>
                        
</ControlTemplate.Triggers>
                    
</ControlTemplate>
                
</Setter.Value>
            
</Setter>
        
</Style>
    
</Window.Resources>
    
<Grid>
        
<Rectangle Fill="{StaticResource box}" Margin="45,265,0,0" Name="rectangle1" HorizontalAlignment="Left" Width="50" Height="50" VerticalAlignment="Top" />
        
<RadioButton Checked="RadioButton_Checked" HorizontalAlignment="Left" Margin="123,205,0,0" VerticalAlignment="Top">1F</RadioButton>
        
<RadioButton Checked="RadioButton_Checked" HorizontalAlignment="Left" Margin="123,125,0,0" VerticalAlignment="Top">2F</RadioButton>
        
<RadioButton Checked="RadioButton_Checked" HorizontalAlignment="Left" Margin="123,45,0,0" VerticalAlignment="Top">3F</RadioButton>
        
<RadioButton Checked="RadioButton_Checked" HorizontalAlignment="Left" Margin="123,285,0,0" VerticalAlignment="Top" IsChecked="True">B1</RadioButton>
    
</Grid>
</Window>

 

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

 

 

 

 

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

 

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

 

 

 

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

 

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

 

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

 

 

img_1c53668bcee393edac0d7b3b3daff1ae.gifimg_405b18b4b6584ae338e0f6ecaf736533.gifCode
using System;
using System.Collections.Generic;
using System.Linq;
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.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
using System.Windows.Media.Animation;

namespace 缓动动画
img_405b18b4b6584ae338e0f6ecaf736533.gifimg_1c53668bcee393edac0d7b3b3daff1ae.gif
{
img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif    
/**//// <summary>
    
/// Window1.xaml 的交互逻辑
    
/// </summary>

    public partial class Window1 : Window
img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif    
{
        
public Window1()
img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif        
{
            InitializeComponent();
        }


        
private void window_Loaded(object sender, RoutedEventArgs e)
img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif        
{

        }


        Storyboard s 
= new Storyboard();

        
public double 缓动计算(TimeSpan 总时间, TimeSpan 现在时间, double 初始值, double 变动量)
img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif        
{
            var t 
= 现在时间.TotalSeconds /( 总时间.TotalSeconds / 2);
            
if (t < 1return (变动量 / 2 * Math.Pow(t, 5+ 初始值);
            
return (变动量 / 2 * (Math.Pow(t - 25+ 2+ 初始值);
        }


        
private void RadioButton_Checked(object sender, RoutedEventArgs e)
img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif        
{
            开始升降((sender 
as RadioButton).Margin.Top - 5);
        }


        
public void 开始升降(double 目标高度)
img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif        
{
            ThicknessAnimationUsingKeyFrames d 
= new ThicknessAnimationUsingKeyFrames();
            d.Duration 
= new Duration(TimeSpan.FromSeconds(Math.Abs((目标高度-rectangle1.Margin.Top)/80)));
            
for (int i = 0; i < 100; i++)
img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif            
{
                var t 
= new Thickness();
                t.Left 
= rectangle1.Margin.Left;
                t.Right 
= rectangle1.Margin.Right;
                t.Bottom 
= rectangle1.Margin.Bottom;
                t.Top
=缓动计算(d.Duration.TimeSpan, TimeSpan.FromSeconds(d.Duration.TimeSpan.TotalSeconds / 100 * i), rectangle1.Margin.Top, 目标高度-rectangle1.Margin.Top);
                d.KeyFrames.Add(
new LinearThicknessKeyFrame(t, KeyTime.FromTimeSpan(TimeSpan.FromSeconds(d.Duration.TimeSpan.TotalSeconds / 100 * i))));
            }

            s.Children.Add(d);
            Storyboard.SetTargetName(d, rectangle1.Name);
            Storyboard.SetTargetProperty(d, 
new PropertyPath(Rectangle.MarginProperty));
            s.Begin(rectangle1);
        }

    }

}

 

 

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

 

 

 

 

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

 

源代码下载

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
阿里云服务器怎么设置密码?怎么停机?怎么重启服务器?
如果在创建实例时没有设置密码,或者密码丢失,您可以在控制台上重新设置实例的登录密码。本文仅描述如何在 ECS 管理控制台上修改实例登录密码。
9801 0
借助Photoshop,Illustrator等设计软件进行WPF图形图像的绘制
原文:借助Photoshop,Illustrator等设计软件进行WPF图形图像的绘制 本文所示例子是借助第三方设计软件,制作复杂的矢量图形,转成与XAML酷似的SVG,再转换成xaml而实现的。
914 0
WPF界面设计技巧(11)-认知流文档 & 小议WPF的野心
原文:WPF界面设计技巧(11)-认知流文档 & 小议WPF的野心     流文档是WPF中的一种独特的文档承载格式,它的书写和呈现方式都很像HTML,它也几乎具备了HTML的绝大多数优势,并提供了更强的编程支持及对WPF其他元素的兼容。
1125 0
WPF界面设计技巧(10)-样式的继承
原文:WPF界面设计技巧(10)-样式的继承     PS:现在我的MailMail完工了,进入内测阶段了,终于可以腾出手来写写教程了哈,关于MailMail的介绍及内测程序索取:http://www.cnblogs.com/SkyD/archive/2008/08/09/1264083.html  欢迎帮我捉虫,以及与我交流WPF技术   WPF的样式的继承属性极少被文章提及,以至于我在编写MailMail期间为此踌躇数日,最后终于在E文版的MS社区得到指点才得以解惑。
748 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,阿里云优惠总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系.
13525 0
wpf控件设计时支持(1)
原文:wpf控件设计时支持(1)    这部分内容几乎是大家忽略的内容,我想还是来介绍一下. 本篇源码下载 1.属性元数据 在vs IDE中,在asp.net,winfrom等开发环境下,右侧的PropertyGrid属性面板,会对属性进行分类,这有利于了解控件属性的用途.
759 0
WPF弹性模拟动画
原文:WPF弹性模拟动画 我们此次将要制作模拟物理中的弹性现象的交互动画,我们让一个小球向鼠标点击位置移动,这个移动的轨迹不是简单的位移,而是根据胡克定律计算得出的。 胡克定律:F=-kd F代表弹性力的大小d是拉伸的位移k为弹性系数在我们的动画中还将加入摩擦力,否则物体就如在真空中运动,永远不会停止。
746 0
+关注
杰克.陈
一个安静的程序猿~
10427
文章
2
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载