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

简介: 原文:WPF中的动画——(一)基本概念WPF的一个特点就是支持动画,我们可以非常容易的实现漂亮大方的界面。首先,我们来复习一下动画的基本概念。计算机中的动画一般是定格动画,也称之为逐帧动画,它通过每帧不同的图像连续播放,从而欺骗眼和脑产生动画效果。
原文: 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

 

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