动画

来源:互联网 发布:linux新建shell脚本 编辑:程序博客网 时间:2024/03/29 22:12
导读:
  
  Silverlight 允许你使用标记来定义动画。本 QuickStart 介绍 Silverlight 动画特性并带你走入创建你的第一个 Silverlight 动画的过程。
  本 QuickStart 包含以下章节。
  演练:让一个对象活起来
  步骤 1:找一些东西作动画
  步骤 2:创建一个 EventTrigger
  步骤 3:创建一个 Storyboard 和一个动画
  其它类型的动画
  Timelines 属性
  设定动画转换值
  下一步是什么
  演练:让一个对象活起来
  步骤 1:找一些东西作动画
  首先,你需要一些东西来作动画。在本示例中你将使用一个 Ellipse。下面的示例创建了一个 Ellipse和初始化喷涂其为黑色。
  [隐藏 XAML]
  xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">  xmlns="http://schemas.microsoft.com/client/2007"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
  Height="20"Width="20"Canvas.Left="30"Canvas.Top="30"
Fill="black"/>  Height="20"Width="20"Canvas.Left="30"Canvas.Top="30"
  Fill="black"/>
  

  
  [隐藏][重新开始]
  注意 ellipse 有一个名字
  x:Name="ellipse"
  ellipse 需要一个名字以产生动画。(更详细地说,一个 ellipse 需要一个名称以便它可以被 XAML 中任意地方定义的 animation 使用。现在你有一个对象可供产生动画,下一步是创建一个 EventTrigger来开始动画。
  步骤 2:创建一个 EventTrigger
  一个 EventTrigger当一些东西触发它时执行一个动作。如其名字一样,“一些东西”是一个事件,由 RoutedEvent属性标识。因为你想让 EventTrigger开始一个动画,所以使用一个 BeginStoryboard作为它的动作。
  你也需要决定哪一个事件将触发动画。在 Silverlight 1.0 中,可选的值很简单,因为 EventTrigger对象只支持一个事件,Loaded事件。设置 RoutedEvent属性到 Canvas.Loaded。当主 Canvas读取时将开始一个动画,下面的示例展示了标记这些内容。
  [隐藏 XAML]
  xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">  xmlns="http://schemas.microsoft.com/client/2007"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
  
  

  

  

  

  
  

  

  

  

  

  Height="20"Width="20"Canvas.Left="30"Canvas.Top="30"
Fill="black"/>  Height="20"Width="20"Canvas.Left="30"Canvas.Top="30"
  Fill="black"/>
  

  
  [隐藏][重新开始]
  现在你已经创建了一个 Storyboard和一个动画。
  步骤 3:创建一个 Storyboard 和一个动画
  一个 Storyboard可以描述和控制一个或多个动画。本示例,我们将使用一个单一的动画。在 Silverlight 中,通过设置动画到对象的属性让对象活动起来。使用一个 DoubleAnimation使 Ellipse的 Canvas.Left属性活动起来。你使用 DoubleAnimation是由于该属性是动态的,Canvas.Left,是类型为 Double的属性(一个双精度浮点数)。
  要操作动画,你必须给它一个目标名称(Storyboard.TargetName="ellipse")、一个目录属性(Storyboard.TargetProperty="(Canvas.Left)")、一个用于动画的值(To="300")和一个 Duration(Duration="0:0:1")。Duration属性指定了动画从开始时间到结束时间转换的时间长度。0:0:1的值指定一个 Duration是一秒钟。
  (你可能需要在 QuickStart 的动画中单击“restart”,由于你在查看本页的前一个示例时它可能已经运行了一次,按照它的 Duration和 RepeatBehavior设置,本动画将不会再运行直到你通过重新读取来重启代码。)
  [隐藏 XAML]
  xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">  xmlns="http://schemas.microsoft.com/client/2007"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
  
  
  
  
  
  

  Storyboard.TargetName="ellipse"
  
Storyboard.TargetProperty="(Canvas.Left)"
  
To="300"Duration="0:0:1"/>
  

  

  

  
  

  Height="20"Width="20"Canvas.Left="30"Canvas.Top="30"
Fill="black"/>  Height="20"Width="20"Canvas.Left="30"Canvas.Top="30"
  Fill="black"/>
  

  
  [隐藏][重新开始]
  你使用 DoubleAnimation作动画,Canvas.Left,类型是 Double(一个 Double是一个双精度浮点数)。
  恭喜!你刚刚创建你的第一个 Silverlight 动画。如果你想学习更多的 Silverlight 动画系统,请继续阅读。
  其它类型的动画
  Silverlight 也提供了动态颜色(ColorAnimation)和点(PointAnimation)。当你在使用动态颜色时,记住颜色和 SolidColorBrush的不同;起作用的是是后者的属性。当你标识一个颜色名字或 16 进制值到一个形状的 Stroke和 Fill属性, Silverlight 将该字符串转换成一个 SolidColorBrush。要让形状的 Stroke或 Fill活动起来,你需要设置 SolidColorBrush的 Color属性让其活动起来,通常情况下,当你想要让一个带笔刷的属性活动起来时,一个好的主意是声明一个笔刷比声明一个颜色或 16 进制值使用更繁琐的句法,以便你可以给它命名。
  下面的示例让两个椭圆的颜色动起来。第一个椭圆的 Fill显式地使用了 SolidColorBrush。示例给出了 SolidColorBrush的名称和动画 Color属性。第二个动画要复杂一些,因为第二个椭圆的 Fill使用的是颜色名称。当标记运行时,系统创建了一个拥有一定颜色的 SolidColorBrush并使用它来给椭圆喷涂。由于这里没有 标签被命名,系统产生的 SolidColorBrush只能通过间接的属性目标来产生动画。
  [隐藏 XAML]
  xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">  xmlns="http://schemas.microsoft.com/client/2007"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
  
  
  
  
  
  Storyboard.TargetName="e1_brush"
Storyboard.TargetProperty="Color"
From="Red"To="Blue"Duration="0:0:5"/>  Storyboard.TargetName="e1_brush"
  Storyboard.TargetProperty="Color"
  From="Red"To="Blue"Duration="0:0:5"/>
  Storyboard.TargetName="e2"
Storyboard.TargetProperty="(Fill).(Color)"
From="Red"To="Blue"Duration="0:0:5"/>  Storyboard.TargetName="e2"
  Storyboard.TargetProperty="(Fill).(Color)"
  From="Red"To="Blue"Duration="0:0:5"/>
  

  

  

  
  

  
  Height="100"Width="100"Canvas.Left="30"Canvas.Top="30">  Height="100"Width="100"Canvas.Left="30"Canvas.Top="30">
  
  

  

  

  
  Height="100"Width="100"Canvas.Left="30"Canvas.Top="130"/>  Height="100"Width="100"Canvas.Left="30"Canvas.Top="130"/>
  

  
  [隐藏][重新开始]
  Timelines 属性
  Storyboard和 DoubleAnimation都是 Timeline对象类型。 Timelines 有一些有用的属性:
  Storyboard.TargetName:要产生动画的对象的名称。 如果你没有标识 Storyboard.TargetName, 时间线使用其父时间线的 Storyboard.TargetName。 如果你没有为它的任何父时间线标识 Storyboard.TargetName, 时间线和EventTrigger启动的元素关联。
  Storyboard.TargetProperty:你要产生动画的属性。 如果你没有标识 Storyboard.TargetProperty, 时间线使用其父时间线的 Storyboard.TargetProperty。 该属性变量的语句取决于动画属性的类型。
  关联到附加的属性,按照下面的语法: "(ownerType.propertyName)"。比如,"(Canvas.Top)" 关联到 Canvas.Top属性。
  关联到其它任意类型的属性,使用下面的语法:"propertyName"。比如,"Opacity"关联到 Opacity属性。
  BeginTime:标明时间线何时开始的时间。 注意你在这里的语法,由于默认的度量单位是“天”(简单地设置该属性为“2”结果是一个 2 天的 BeginTime!) 使用下面的语法标识小时、分和秒:hours:minutes:seconds。 比如,"0:0:2"设定一个 2 秒钟(0 小时,0 分,2 秒)的 BeginTime。 如果你没有标识 BeginTime,属性的默认值是 0 秒。
  Duration:时间线播放一次的时间长度。 对一个动画来说,这是动画从开始到结尾的播放时间长度。 Duration属性使用和 BeginTime属性大致相同的语法来表示时间。 再次说明,当你想要设置秒时不要设置成了天! Duration也可以被设置为特殊的值 "Forever"或 "Automatic"。 默认的值是 "Automatic"。 关于这些特殊值的含义,请参见 Silverlight SDK 中的 Duration对象参考。
  FillBehavior:时间线停止后的行为。 本属性有两个值可选 Stop和 HoldEnd。 "Stop"将值返回到动画开始之前的属性值; "HoldEnd"指示动画属性停留在动画最后的值。默认值是 "HoldEnd"。
  RepeatBehavior:指示时间线的重复频率。 该属性可以是三种类型的值: 重复数量、时间值、或特殊值 Forever。
  "Forever"导致时间线立即重复。
  一个有限的时间值导致时间线播放特定的时间长度。 比如,为一个 Duration为 2.5 秒的动画设置 RepeatBehavior为 "0:0:5",动画将重复两次。
  一个循环值导致时间线循环特定的次数。 使用下面的语法表示循环值:iterationCountx。 比如,值 "4x"让时间线重复 4 次。 默认值是 "1x",这使时间线播放一次。
  下面的示例演示了这些时间线属性。
  [隐藏 XAML]
  xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">  xmlns="http://schemas.microsoft.com/client/2007"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
  
  
  
  
  Storyboard.TargetName="e1"
Storyboard.TargetProperty="(Canvas.Left)"
BeginTime="0:0:1">  Storyboard.TargetName="e1"
  Storyboard.TargetProperty="(Canvas.Left)"
  BeginTime="0:0:1">
  
  
  
  
  
  
  
  
  

  

  

  
  

  Height="20"Width="20"Canvas.Left="30"Canvas.Top="30"/>  Height="20"Width="20"Canvas.Left="30"Canvas.Top="30"/>
  e1
  Height="20"Width="20"Canvas.Left="30"Canvas.Top="50"/>  Height="20"Width="20"Canvas.Left="30"Canvas.Top="50"/>
  e2
  Height="20"Width="20"Canvas.Left="30"Canvas.Top="70"/>  Height="20"Width="20"Canvas.Left="30"Canvas.Top="70"/>
  e3
  Height="20"Width="20"Canvas.Left="30"Canvas.Top="90"/>  Height="20"Width="20"Canvas.Left="30"Canvas.Top="90"/>
  e4
  Height="20"Width="20"Canvas.Left="30"Canvas.Top="110"/>  Height="20"Width="20"Canvas.Left="30"Canvas.Top="110"/>
  e5
  Height="20"Width="20"Canvas.Left="30"Canvas.Top="130"/>  Height="20"Width="20"Canvas.Left="30"Canvas.Top="130"/>
  e6
  Height="20"Width="20"Canvas.Left="30"Canvas.Top="150"/>  Height="20"Width="20"Canvas.Left="30"Canvas.Top="150"/>
  e7
  Height="20"Width="20"Canvas.Left="30"Canvas.Top="170"/>  Height="20"Width="20"Canvas.Left="30"Canvas.Top="170"/>
  e8
  

  
  [隐藏][重新开始]
  设定动画转换值
  DoubleAnimation、ColorAnimation和 PointAnimation有 From和 To属性来设定动画属性的开始和结束值。如果 From没有被设定,动画的属性当前值被用作动画的开始值。你可以使用 By属性设置偏移量来代替使用 To属性设置结束值。
  下一步是什么
  下一个主题,脚本,描述了如何让你的 Silverlight 内容具有交互性。
  Copyright ? 2007 Microsoft Corporation. All rights reserved. Legal Notices.

本文转自
http://www.cftea.com/docs/Silverlight/quickstart/animations-frames.html