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

时间: 2024-11-06 20:36:04

WPF中的动画——(二)From/To/By 动画的相关文章

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

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

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

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

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

WPF的一个特点就是支持动画,我们可以非常容易的实现漂亮大方的界面.首先,我们来复习一下动画的基本概念.计算机中的动画一般是定格动画,也称之为逐帧动画,它通过每帧不同的图像连续播放,从而欺骗眼和脑产生动画效果.其原理在维基百科上有比较详尽的解释,这里就不多介绍了. 也就是说,我们要产生动画,只需要连续刷新界面即可.例如,我们要实现一个宽度变化的按钮的动画,可以用如下方式来实现: private void MainWindow_Loaded(object sender, RoutedEventAr

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

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

WPF中的动画——(五)关键帧动画

与 From/To/By 动画类似,关键帧动画以也可以以动画形式显示目标属性值. 和From/To/By 动画不同的是, From/To/By 动画只能控制在两个状态之间变化,而关键帧动画则可以在多个状态之间变化,例如,对于前面那个改变按钮宽度的例子,如果我们要实现如下效果: 在2秒时将宽度从 0变为350 在7秒时将宽度变为50 在9秒的时候将其宽度变为200 虽然我们可以用三个From/To/By 动画组合实现类似效果,但是这样一来麻烦,二来要感知动画完成事件,不方便在XAML中使用.此时我

WPF中的动画——(三)时间线(TimeLine)

时间线(TimeLine)表示时间段. 它提供的属性可以让控制该时间段的长度.开始时间.重复次数.该时间段内时间进度的快慢等等.在WPF中内置了如下几种TimeLine: AnimationTimeline?:前面已经介绍过,主要用于属性的过渡,这种是最常见的动画. MediaTimeline:用于控制媒体文件播放的时间线. ParallelTimeline:ParallelTimeline?是一种可对其他时间线进行分组的时间线,可用于实现较复杂的动画. Storyboard?:一种特殊的?Pa

【转】WPF中的Binding技巧(二)

WPF中的Binding技巧(二)   接上篇, 我们来看一看Elementname,Source,RelativeSource 三种绑定的方式 1.ElementName顾名思义就是根据Ui元素的Name来进行绑定: 例子: <Window x:Name="MainWindow"> <Grid>               <Button Background="{Binding ElementName=MainWindow, Path=Bac

WPF中的多进程(Threading)处理实例(二)

原文:WPF中的多进程(Threading)处理实例(二) 1 //错误的处理 2 private void cmdBreakRules_Click(object sender, RoutedEventArgs e) 3 { 4 Thread thread = new Thread(UpdateTextWrong); 5 thread.Start(); 6 } 7 8 private void UpdateTextWrong() 9 { 10 txt.Text = "Here is some n

WPF中的动画——(五)路径动画

原文:WPF中的动画--(五)路径动画 路径动画是一种专门用于将对象按照指定的Path移动的动画,虽然我们也可以通过控制动画的旋转和偏移实现对象的移动,但路径动画更专业,它的实现更加简洁明了. 路径动画中最常用的是MatrixAnimationUsingPath,它通常用于控制对象的MatrixTransform,一个简单的例子如下: 1 <Canvas > 2 <Canvas.Resources> 3 <PathGeometry x:Key="path"

WPF中的简单水动画

原文 https://stuff.seans.com/2008/08/21/simple-water-animation-in-wpf/ 很多年前(80年代中期),我在一家拥有Silicon Graphics工作站的公司工作.在旨在展示SGI机器高端图形的少数演示中,有一个模拟了一个小线框网格中的波传播.通过更改网格中的点的高度然后让模拟运行来玩游戏非常有趣.并且SGI机器足够快,结果动画只是令人着迷. 在WPF中重新创建这个水模拟似乎是一个很好的方式来学习WPF中的3D图形.(最终结果在这里)