Silverlight 允许你使用标记来定义动画。 本 QuickStart 介绍 Silverlight 动画特性并带你走入创建你的第一个 Silverlight 动画的过程。 本 QuickStart 包含以下章节。 演练:让一个对象活起来步骤 1:找一些东西作动画首先,你需要一些东西来作动画。在本示例中你将使用一个 Ellipse。 下面的示例创建了一个 Ellipse 和初始化喷涂其为黑色。 [隐藏 XAML] <Canvas xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> <Ellipse x:Name="ellipse" Height="20" Width="20" Canvas.Left="30" Canvas.Top="30" Fill="black" /> </Canvas> [隐藏] [重新开始] 注意 ellipse 有一个名字
ellipse 需要一个名字以产生动画。 (更详细地说,一个 ellipse 需要一个名称以便它可以被 XAML 中任意地方定义的 animation 使用。 现在你有一个对象可供产生动画,下一步是创建一个 EventTrigger 来开始动画。 步骤 2:创建一个 EventTrigger一个 EventTrigger 当一些东西触发它时执行一个动作。 如其名字一样,“一些东西”是一个事件,由 RoutedEvent 属性标识。 因为你想让 EventTrigger 开始一个动画,所以 使用一个 BeginStoryboard 作为它的动作。 你也需要决定哪一个事件将触发动画。
在 Silverlight 1.0 中,可选的值很简单,
因为 EventTrigger 对象只支持一个事件,
Loaded 事件。
设置 RoutedEvent 属性到 [隐藏 XAML] <Canvas xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> <Canvas.Triggers> <EventTrigger RoutedEvent="Canvas.Loaded"> <EventTrigger.Actions> <BeginStoryboard> <!-- Insert Storyboard here. --> </BeginStoryboard> </EventTrigger.Actions> </EventTrigger> </Canvas.Triggers> <Ellipse x:Name="ellipse" Height="20" Width="20" Canvas.Left="30" Canvas.Top="30" Fill="black"/> </Canvas> [隐藏] [重新开始] 现在你已经创建了一个 Storyboard 和一个动画。 步骤 3:创建一个 Storyboard 和一个动画一个 Storyboard 可以描述和控制一个或多个动画。 本示例,我们将使用一个单一的动画。在 Silverlight 中, 通过设置动画到对象的属性让对象活动起来。 使用一个 DoubleAnimation 使 Ellipse 的 Canvas.Left 属性活动起来。 你使用 DoubleAnimation 是由于该属性是动态的, Canvas.Left,是类型为 Double 的属性(一个双精度浮点数)。 要操作动画,你必须给它一个目标名称( (你可能需要在 QuickStart 的动画中单击“restart”, 由于你在查看本页的前一个示例时它可能已经运行了一次, 按照它的 Duration 和 RepeatBehavior 设置, 本动画将不会再运行直到你通过重新读取来重启代码。) [隐藏 XAML] <Canvas xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> <Canvas.Triggers> <EventTrigger RoutedEvent="Canvas.Loaded"> <EventTrigger.Actions> <BeginStoryboard> <Storyboard> <DoubleAnimation Storyboard.TargetName="ellipse" Storyboard.TargetProperty="(Canvas.Left)" To="300" Duration="0:0:1" /> </Storyboard> </BeginStoryboard> </EventTrigger.Actions> </EventTrigger> </Canvas.Triggers> <Ellipse x:Name="ellipse" Height="20" Width="20" Canvas.Left="30" Canvas.Top="30" Fill="black"/> </Canvas> [隐藏] [重新开始] 你使用 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 并使用它来给椭圆喷涂。
由于这里没有 [隐藏 XAML] <Canvas xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> <Canvas.Triggers> <EventTrigger RoutedEvent="Canvas.Loaded"> <EventTrigger.Actions> <BeginStoryboard> <Storyboard> <ColorAnimation Storyboard.TargetName="e1_brush" Storyboard.TargetProperty="Color" From="Red" To="Blue" Duration="0:0:5" /> <ColorAnimation Storyboard.TargetName="e2" Storyboard.TargetProperty="(Fill).(Color)" From="Red" To="Blue" Duration="0:0:5" /> </Storyboard> </BeginStoryboard> </EventTrigger.Actions> </EventTrigger> </Canvas.Triggers> <Ellipse Height="100" Width="100" Canvas.Left="30" Canvas.Top="30"> <Ellipse.Fill> <SolidColorBrush x:Name="e1_brush" Color="black"/> </Ellipse.Fill> </Ellipse> <Ellipse x:Name="e2" Fill="Black" Height="100" Width="100" Canvas.Left="30" Canvas.Top="130"/> </Canvas> [隐藏] [重新开始] Timelines 属性Storyboard 和 DoubleAnimation 都是 Timeline 对象类型。 Timelines 有一些有用的属性:
下面的示例演示了这些时间线属性。 [隐藏 XAML] <Canvas xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> <Canvas.Triggers> <EventTrigger RoutedEvent="Canvas.Loaded"> <EventTrigger.Actions> <BeginStoryboard> <Storyboard Storyboard.TargetName="e1" Storyboard.TargetProperty="(Canvas.Left)" BeginTime="0:0:1"> <DoubleAnimation To="300" /> <DoubleAnimation To="300" Storyboard.TargetName="e2"/> <DoubleAnimation To="80" Storyboard.TargetName="e3" Storyboard.TargetProperty="Width"/> <DoubleAnimation From="200" To="300" Storyboard.TargetName="e4"/> <DoubleAnimation To="300" Duration="0:0:5.3" Storyboard.TargetName="e5"/> <DoubleAnimation FillBehavior="HoldEnd" To="200" Storyboard.TargetName="e6"/> <DoubleAnimation FillBehavior="Stop" To="200" Storyboard.TargetName="e7"/> <DoubleAnimation RepeatBehavior="Forever" To="300" Storyboard.TargetName="e8"/> </Storyboard> </BeginStoryboard> </EventTrigger.Actions> </EventTrigger> </Canvas.Triggers> <Ellipse x:Name="e1" Fill="Black" Height="20" Width="20" Canvas.Left="30" Canvas.Top="30"/> <TextBlock Canvas.Left="0" Canvas.Top="30">e1</TextBlock> <Ellipse x:Name="e2" Fill="Red" Height="20" Width="20" Canvas.Left="30" Canvas.Top="50"/> <TextBlock Canvas.Left="0" Canvas.Top="50" Foreground="Red">e2</TextBlock> <Ellipse x:Name="e3" Fill="Purple" Height="20" Width="20" Canvas.Left="30" Canvas.Top="70"/> <TextBlock Canvas.Left="0" Canvas.Top="70" Foreground="Purple">e3</TextBlock> <Ellipse x:Name="e4" Fill="Blue" Height="20" Width="20" Canvas.Left="30" Canvas.Top="90"/> <TextBlock Canvas.Left="0" Canvas.Top="90" Foreground="Blue">e4</TextBlock> <Ellipse x:Name="e5" Fill="Green" Height="20" Width="20" Canvas.Left="30" Canvas.Top="110"/> <TextBlock Canvas.Left="0" Canvas.Top="110" Foreground="Green">e5</TextBlock> <Ellipse x:Name="e6" Fill="Black" Height="20" Width="20" Canvas.Left="30" Canvas.Top="130"/> <TextBlock Canvas.Left="0" Canvas.Top="130" Foreground="Black">e6</TextBlock> <Ellipse x:Name="e7" Fill="Orange" Height="20" Width="20" Canvas.Left="30" Canvas.Top="150"/> <TextBlock Canvas.Left="0" Canvas.Top="150" Foreground="Orange">e7</TextBlock> <Ellipse x:Name="e8" Fill="Red" Height="20" Width="20" Canvas.Left="30" Canvas.Top="170"/> <TextBlock Canvas.Left="0" Canvas.Top="170" Foreground="Red">e8</TextBlock> </Canvas> [隐藏] [重新开始] 设定动画转换值DoubleAnimation、ColorAnimation 和 PointAnimation 有 From 和 To 属性来设定动画属性的开始和结束值。 如果 From 没有被设定,动画的属性当前值被用作动画的开始值。 你可以使用 By 属性设置偏移量来代替使用 To 属性设置结束值。 Copyright © 2007 Microsoft Corporation. All rights reserved. Legal Notices. 千一网络 译 |