WPF实现动画效果(二)之From/To/By动画

2022-11-13 10:11:08 wpf 效果 动画

WPF动画效果系列

WPF实现动画效果(一)之基本概念

WPF实现动画效果(二)之From/To/By 动画

WPF实现动画效果(三)之时间线(TimeLine)

WPF实现动画效果(四)之缓动函数

WPF实现动画效果(五)之关键帧动画

WPF实现动画效果(六)之路径动画

WPF实现动画效果(七)之演示图板

正文

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

    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都不赋值的这种非法情况了。为什么要这么设计呢? 我觉得有两个原因:

  • 这种比较灵活的方式可以方便将动画和具体的对象分离出来,可以方便复用和组合。

  • 方便在XAML中使用。如果像我上述的那样的做法,很多时候需要取对象的初始值,用XAML编写复杂的动画时,这种操作并不是是很方便。

时间控制

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

参考资料

Http://msdn.microsoft.com/zh-cn/library/aa970265(v=vs.110).aspx

到此这篇关于WPF实现动画效果之From/To/By动画的文章就介绍到这了。希望对大家的学习有所帮助,也希望大家多多支持。

相关文章