WPF中的动画——(一)基本概念

WPF的一个特点就是支持动画,我们可以非常容易的实现漂亮大方的界面。首先,我们来复习一下动画的基本概念。计算机中的动画一般是定格动画,也称之为逐帧动画,它通过每帧不同的图像连续播放,从而欺骗眼和脑产生动画效果。其原理在维基百科上有比较详尽的解释,这里就不多介绍了。

也就是说,我们要产生动画,只需要连续刷新界面即可。例如,我们要实现一个宽度变化的按钮的动画,可以用如下方式来实现:

private void MainWindow_Loaded(object sender, RoutedEventArgs e)
    {
        var timer = new System.Windows.Threading.DispatcherTimer();
        timer.Tick += new
EventHandler(OnTimedEvent);
        timer.Interval = TimeSpan.FromSeconds(1.0 / 20);
        timer.Start();
    }

int index = 0;
    private
void OnTimedEvent(object sender, EventArgs e)
    {
        index++;
        if (index > 40)
            index = 0;

button.Width = 8 * (index++);
    }

这段代码不难理解,就是每隔1/20秒更新一次按钮的宽度,在2s内将其高度从0变为320,重复播放。

这段代码虽然实现了动画效果,但它是通过计时器更新的传统做法,在WinForm下也能实现。在WPF中,正统的实现动画方式为:

private
void MainWindow_Loaded(object sender, RoutedEventArgs e)
    {
        var widthAnimation = new
DoubleAnimation()
        {
            From = 0,
            To = 320,
            Duration = TimeSpan.FromSeconds(2),
            RepeatBehavior = RepeatBehavior.Forever,
        };

button.BeginAnimation(WidthProperty, widthAnimation);
    }

相比较而言,WPF的动画的实现方式有如下优点:

一、简洁

这个是非常明显的,WPF的动画的代码非常容易理解,Timer的版本则要难懂得多。当然,我们也可以通过封装,使得用Timer也能用类似的API实现动画。但动画的API并不是仅仅这么一点,要把整个动画框架的API都封装也没有那么容易。

二、和XAML无缝集成

这个就是WPF的独有技术了,得益于XAML强大的表述能力,我们可以写出非常强大且容易维护的动画。(这里就不举例了,后续文章中再做介绍)这点WinFom的Timer版本是无法做到的。

三、流畅性

如果将这两种实现方式一起跑起来比较一下就会发现,Timer实现的版本明显要卡顿,并且并没有精准的按照我们设计的那样运动。具体原因为:

Timer精度的问题:由于是改UI控件的属性(按钮的宽度),因此必须在UI线程上进行,因此DispatcherTimer 操作与其他操作一样需要放置到 Dispatcher 队列中,它并不保证恰好在改时间间隔中。它并不适合动画这种间隔很短的计时。

帧率的问题:逐帧动画的流畅性一般取决于每秒更新的帧数,也就是常说的帧率。人眼睛上限是70帧,而我这里代码中的Timer的固定了为20帧,因此是能明显感觉到卡顿的。而WPF的动画则不然,从它的API中可以看到,它是没有帧率的设置的。实际上,它是根据计算机的性能和当前进程的繁忙程度尽可能增大帧率的,因此WPF的动画是远大于20帧的,因此要流畅得多。

那么,是否只要修改参数,加大Timer的版本的帧率,也可以实现同样流畅的动画呢? 试了一下,就算修改参数,也是无法达到WPF版本的流畅程度的。我认为原因主要有如下两点,

  1. DispatcherTimer精度不够,无法实现大帧率下准确刷新。
  2. 通过简单的设置参数很难像WPF那样帧率根据计算机的性能和当前进程的繁忙程度智能匹配帧率。帧率设置过低,动画不流畅,设置过大,处理不过来仍然不流畅。并且UI线程的忙碌程度是会动态变化的,帧率也需要相应调整,这些都无法通过Timer来简单的处理。

总之,通过Timer定时更新的方式并不适合用来实现动画。因此还是有必要学习一下WPF的动画框架的,后面我将陆续写一系列文章进行一些简单的介绍。如果要系统的学习,建议参看以下微软的官方文档: http://msdn.microsoft.com/zh-cn/library/ms752312(v=vs.110).aspx

时间: 10-24

WPF中的动画——(一)基本概念的相关文章

WPF中的动画——(四)缓动函数

缓动函数可以通过一系列公式模拟一些物理效果,如实地弹跳或其行为如同在弹簧上一样.它们一般应用在From/To/By动画上,可以使得其动画更加平滑. ????var widthAnimation = new DoubleAnimation()????{????????From = 0,????????To = 320,????????Duration = TimeSpan.FromSeconds(1),????????EasingFunction = new BackEase()????????{

二维图形的矩阵变换(三)——在WPF中的应用矩阵变换

UIElement和RenderTransform 首先,我们来看看什么样的对象可以进行变换.在WPF中,用于呈现给用户的对象的基类为Visual类,但是Visual对象并不具有变换功能,具有变换功能的是它的子类UIElement.这个类也是非常底层的类了,几乎我们所有的常用控件都是继承自它,也就是说,基本上所有的UI对象都是可以应用变换的. 然后,我们在再来看看UIElement中变换种类.UIElement支持两种变换:RenderTransform和LayoutTransform,其中La

WPF 有趣的动画效果

WPF 有趣的动画效果 这一次我要呈上一个简单的文章,关于给你的WPF apps加入美丽的光线动画,可是我对动画这东西可能有点入迷了. 实际上.我对动画如此的入迷,以至于我最后做了之前从未打算做的东西,就是使用一些很实用的.NET代码,渐变填充生成背景动画.让我先给你看一些终于效果吧. WPF和元素定位 然而.在我们開始之前.我们须要考虑一件事情.这件事让我也有点原地转圈的感觉. 似乎当你使用WPF创建不论什么闭环形状时,你不能设置它的X和Y坐标.好吧.至少你不能在一般的WPF窗口(像VS开箱即

WPF 中的 loaded 事件和 Initialized 事件

在 WPF 中, 控件有 Loaded 和 Initialized 两种事件. 初始化和加载控件几乎同时发生, 因此这两个事件也几乎同时触发. 但是他们之间有微妙且重要的区别. 这些区别很容易让人误解. 这里介绍我们设计这些事件的背景. (不仅适用于 Control 类, 同样在通用类如 FrameworkElement 和 FrameworkContentElement 类也适用.) 下面是个小故事: Initialized 事件只说: 这个元素已经被构建出来,并且它的属性值都被设置好了,所以

浅析WPF中MVVM模式下命令与委托的关系

??各位朋友大家好,我是Payne,欢迎大家关注我的博客,我的博客地址是http://qinyuanpei.com.最近因为项目上的原因开始接触WPF,或许这样一个在现在来讲显得过时的东西,我猜大家不会有兴趣去了解,可是你不会明白对某些保守的项目来讲,安全性比先进性更为重要,所以当你发现银行这类机构还在使用各种"复古"的软件系统的时候,你应该相信这类东西的确有它们存在的意义.与此同时,你会更加深刻地明白一个道理:技术是否先进性和其流行程度本身并无直接联系.由此我们可以推论出:一项不流行

WPF快速指导10:WPF中的事件及冒泡事件和隧道事件(预览事件)的区别

本文摘要: 1:什么是路由事件: 2:中断事件路由: 3:自定义路由事件: 4:为什么需要自定义路由事件: 5:什么是冒泡事件和预览事件(隧道事件): 1:什么是路由事件 WPF中的事件为路由事件,所谓路由事件,MSDN定义如下: 功能定义:路由事件是一种可以针对元素树中的多个侦听器(而不是仅针对引发该事件的对象)调用处理程序的事件. 实现定义:路由事件是一个 CLR 事件,可以由 RoutedEvent 类的实例提供支持并由 Windows Presentation Foundation (W

二维图形的矩阵变换(二)——WPF中的矩阵变换基础

在前文二维图形的矩阵变换(一)——基本概念中已经介绍过二维图像矩阵变换的一些基础知识,本文中主要介绍一下如何在WPF中进行矩阵变换. Matrix结构 在WPF中,用Matrix结构(struct类型)表示二维变换矩阵,它是一个3*3的数组,结构如下, 由于第三列是常量0,0,1,因此并不作为公开属性,可见的只有剩余六个属性. 构造变换 虽然Matrix类公开了这六个属性让我们设置,但是靠直接设置这六个属性来实现平移.旋转等变换对于我们来说实在太困难了,因此又增加了如下许多函数来帮助我们实现这一

WPF中DPI的问题

先搞清楚一下几个概念: DPI:dots  per  inch ,每英寸的点数.我们常说的鼠标DPI,是指鼠标移动一英寸的距离滑过的点数:打印DPI,每英寸的长度打印的点数:扫描DPI,每英寸扫描了多少个点.(更多请参考百度百科http://baike.baidu.com/view/49853.htm) 像素:pixel,picute和element的缩写.像素可以简单的理解为DPI里面的点.例如,显示器的分辨率为1024像素*768像素,就是说显示器的横向可显示1024个点(像素),纵向科研可

WPF中C#代码触发鼠标点击事件

1.如下代码; 1 <Button x:Name="btnTest" Click="btnTest_Click"> 2 <Button.Triggers> 3 <EventTrigger RoutedEvent="Button.Click"> 4 <BeginStoryboard> 5 <!--要执行的动画代码--> 6 </BeginStoryboard> 7 </E