动画
当动画基于元素属性改变时，常常是一些简单的视觉效果。例如，一个元素从画布的左上角移动到右下角，它的Canvas.Left和Canvas.Top属性在一段时间内每秒都在改变。如果一个元素慢慢淡出，变为不可见，它的Opacity值也从100%变为0%。所以从理论上，您可以仅仅依赖JavaScript并通过它访问Silverlight元素属性就能创建动画。当然，使用Silverlight内嵌的动画支持将更为方便。创建一个动画需要很多步骤，但这样做非常值得。
创建动画、添加Triggers 触发器
创建一个动画包括几个步骤和几行标记，智能提示使这些变得简单。例如，将一个元素平滑地移动到另一个位置需要使用元素动起来。为了实现它，您需要给元素命名：
<TextBlockFontFamily="Arial"FontSize="56"Canvas.Left="25"Canvas.Top="40"
Foreground="Black"Text="Silverlight"x:Name="MyTextBlock">
．．．
</TextBlock>
在这个元素中需要使用<TextBlock.Triggers>元素定义一个trigger（如果您想让一个矩形动起来，需要使用<Rectangle.Triggers>，依此类推）。当事件被触发时，一个实际的trigger(用<EventTrigger>来表现)是处于活动状态的。在<EventTrigger>中的RoutedEvent属性中提供这个事件。当前，Silverlight只支持一个事件：Element.Loaded，Element是包含trigger的对象的名称(这里是TextBlock)。
<TextBlockFontFamily="Arial"FontSize="56"Canvas.Left="25"Canvas.Top="40"
Foreground="Black"Text="Silverlight"x:Name="MyTextBlock">
<TextBlock.Triggers>
<EventTriggerRoutedEvent="TextBlock.Loaded">
．．．
</EventTrigger>
</TextBlock.Triggers>
</TextBlock>
在事件trigger内部，创建了一个storyboard。这需要使用<BeginStoryboard>和<Storyboard>这两个元素。一个storyboard由一个或多个动画组成。您可以尝试去比较动画中的storyboard和变形中的<TransformGroup>，它们都可以把东西组合在一起。一个动画可以由几个单独的动画组成，稍后会介绍。
<TextBlockFontFamily="Arial"FontSize="56"Canvas.Left="25"Canvas.Top="40"
Foreground="Black"Text="Silverlight"x:Name="MyTextBlock">
<TextBlock.Triggers>
<EventTriggerRoutedEvent="TextBlock.Loaded">
<BeginStoryboard>
<Storyboard>
．．．
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</TextBlock.Triggers>
</TextBlock>
Silverlight支持几种动画，在下一节将详细讲述它们。为了完成当前示例，首先介绍最普通的动画：<DoubelAnimation>。这种动画使一个值从初始值到结束值“动态”地变化，例如1到10。每个动画承特定时间段内运行。在这个时间间隔内，相关动态值从初始值到结束值逐渐改变。从1变到10，它的值有可能为1，1.1，1.2，依此类推，一直到10，这依赖于动画时间周期。如果动态值是元素的x轴坐标，将创建元素从一点平滑移动到另一点的视觉效果。
在使用动画时，您将经常使用以下几个属性：
AutoReverse
动画结束后重新开始（也就是让元素重新回到开始的地方）
Duration
动画运行周期，语法为：hh:mm:ss(小时，分钟，秒)
From
动画的初始值
To
动画的结束值
By
动画改变的绝对值（和To属性两者选一来使用）
RepeatBehavior
动画结束后该做什么；您可以提供一个持续周期，重复次数，或不断重复永不结束
Storyboard.TargetName
动画元素的名称(为此需要赋一个name属性)
Storyboard.TargetProperty
动画元素的属性
提示：Storyboard.TargetProperty的值是接收动态值的属性的名称，如果属性包含点(如Canvas.Left或Canvas.Top)，需要在圆括号内使用完整名称，如(Canvas.Left)或(Canvas.Top)。
添加一个<DoubleAnimation>完成上述代码，如例6-7所示。矩形和文本都向右移动了300个像素，这里使用了默认的动画周期（这里是1秒）。图6-7是输出效果。
例6-7 使用<DoubleAnimation>，XAML文件（DoubleAnimation.xaml）
<Canvasxmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<RectangleWidth="300"Height="150"Stroke="Orange"StrokeThickness="15"
x:Name="MyRectangle">
<Rectangle.Triggers>
<EventTriggerRoutedEvent="Rectangle.Loaded">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
From="0"To="300.456"
Storyboard.TargetName="MyRectangle"
Storyboard.TargetProperty="(Canvas.Left)"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Rectangle.Triggers>
</Rectangle>
<TextBlockFontFamily="Arial"FontSize="56"Canvas.Left="25"Canvas.Top="40"
Foreground="Black"Text="Silverlight"x:Name="MyTextBlock">
<TextBlock.Triggers>
<EventTriggerRoutedEvent="TextBlock.Loaded">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
From="25"To="325.456"
Storyboard.TargetName="MyTextBlock"
Storyboard.TargetProperty="(Canvas.Left)"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</TextBlock.Triggers>
</TextBlock>
</Canvas>
