WPF中的动画——(二)From/To/By 动画

简介: 原文:WPF中的动画——(二)From/To/By 动画我们所实现的的动画中,很大一部分是让一个属性在起始值和结束值之间变化,例如,我在前文中实现的改变宽度的动画:     var widthAnimation = new DoubleAnimation()    {        From = 0,        To = 320,        Duration = TimeSpan.
原文: WPF中的动画——(二)From/To/By 动画

我们所实现的的动画中,很大一部分是让一个属性在起始值和结束值之间变化,例如,我在前文中实现的改变宽度的动画:

    var widthAnimation = new DoubleAnimation()
    {
        From = 0,
        To = 320,
        Duration = TimeSpan.FromSeconds(2),
        RepeatBehavior = RepeatBehavior.Forever,
    };

    button.BeginAnimation(WidthProperty, widthAnimation);

这个动画实现了宽度在0和320之间的变化,由于宽度是一个double型,因此这里用的是DoubleAnimation。对于一些其它常见的类型,如Byte、Color、Int32、Size、Point等,在System.Windows.Media.Animation下都有相应的过渡动画实现,命名规则是"数据结构类型+Animation"这里就不多介绍了。

这种过渡动画一般成为From/To/By 动画,是因为它们是通过From、To、By三个属性来决定了目标属性的起始值和结束值。首先我们来看下这三个属性代表的意义:

  • From: 起始值,在动画开始的时候将目标属性设置为该值
  • To: 结束值,动画结束是目标属性为改值
  • By: 偏移值:动画结束的时候目标属性为"初始值+偏移值"

很明显,To和By的效果是有可能冲突的。实际上,这三个属性都是可选设置的,并且在设置了To和By的时候,是会忽略By属性的。下面我再通过一些简单的场景介绍一下这三个属性如何组合使用。

  • 由0 变为 320:        From = 0, To = 320
  • 由初始值变为320:   To = 320
  • 由0变为初始值:       From = 0
  • 由0增大150:          From = 0, By = 150
  • 由初始值增大150:   By = 150

看了这几个用例后,相信大家已经大致能明白这三个参数的使用方法。

 

为什么这么设计

初一看上去,这种From、To、By的三参数设计得过于复杂,完全可以用From和To两个参数可以确定,需要用到By的地方通过运算获取。 甚至From和To也可以强制要求赋值,这样就不会出现From和To都不赋值的这种非法情况了。为什么要这么设计呢? 我觉得有两个原因:

  1. 这种比较灵活的方式可以方便将动画和具体的对象分离出来,可以方便复用和组合。
  2. 方便在XAML中使用。如果像我上述的那样的做法,很多时候需要取对象的初始值,用XAML编写复杂的动画时,这种操作并不是是很方便。

 

时间控制

这里只介绍了如何设置过渡动画的起始状态和终止状态,动画还有一个比较重要部分是时间控制,如动画时间段的长度、开始时间、重复次数、进度的快慢,结束通知等。这些都是在其基类TimeLine中控制的,下一章将单独对其介绍。

 

参考资料

http://msdn.microsoft.com/zh-cn/library/aa970265(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`创建平移动画。此外,还将介绍动画触发器的使用,帮助开发者更好地控制动画效果,提升应用的吸引力。
232 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