Silverlight2 beta2 Document中Animation一节的翻译(2)
实现一个UIElement在视图中的淡入淡出效果
这个例子演示了在SilverLight中，通过对矩形的属性施加动画，来达到矩形在视图中淡入淡出的效果。它使用了DoubleAnimation，一种能产生Double类型值的动画，通过对矩形的不透明度(Opacity)属性的调整，我们就能实现矩形的淡入淡出效果。
例子的第一部分是创建矩形元素并且把它展示在StackPanel中
XAML代码：
<StackPanel> <Rectangle MouseLeftButtonDown="Mouse_Clicked" x:Name="MyAnimatedRectangle" Width="100" Height="100" Fill="Blue" /></StackPanel>
为了创建一个动画并把它施加到矩形的OPacity属性上，需要以下几个步骤：
创建一个DoubleAnimation
创建一个StoryBoard
开始StoryBoard来响应事件
这些步骤将在下文中详细论述
创建一个DoubleAnimation
由于Opacity属性是Double型的，所以我们需要一个能产生Double类型值的动画。DoubleAnimation就是这种类型的动画。它能创建两个double值之间的过渡。你可以通过设置From属性来指定DoubleAnimation的起始值，通过设置Top属性指定它的结束值
1.Opacity的值为1.0时，对象将处于完全可见的状态，相反，当它的值为0.0时，对象将处于完全不可见状态。为了实现不透明度从1.0过渡到0.0，你需要设置它的From属性值为1.0To属性值为0.0
<DoubleAnimation From="1.0" To="0.0"/>
2. 为创建的Aniamtion指定一个Duration值。这个Duration值指定了一个动画从起始值到目标值变化需要的时间。在下面的例子中，动画的Duration值被设定为1秒。
<DoubleAnimation From="1.0" To="0.0" Duration="0:0:1" />3.前面已经创建了一个使不透明属性从1.0过渡到0.0的Animation，使得目标元素从完全可见逐渐变成完全不可见，为了使这个元素在消失后重新显示在视图中，我们把AutoReverse属性设定为True，为了让动画效果不确定地重复，把Repeat属性设定为值Forever。
<DoubleAnimation From="1.0" To="0.0" Duration="0:0:1" AutoReverse="True" RepeatBehavior="Forever"/>创建故事板(StoryBoard)
为了给一个对象附加上动画，你需要创建一个故事板，用TargeName和TargetProperty两个附加属性(attached Property)来指定对哪一个对象及对象上的哪一个属性施加动画。
1.创建故事板，并将Animation添加为故事板的孩子。
<Storyboard> <DoubleAnimation From="1.0" To="0.0" Duration="0:0:1" AutoReverse="True" RepeatBehavior="Forever" /></Storyboard>虽然在本例中只添加了一个动画。并不表示故事板下只能由一个动画，我们可以在下面添加多个动画。
2.这个故事板需要知道对哪一个对象施加了动画。使用TargetName附加属性(attached Property)来制定对哪一个对象施加动画。在下面的代码中，我们将DoubleAnimation的TargetName属性值设定为myAnimatedRectangle，这个值就是我们要施加动画的目标对象的名字。
<Storyboard> <DoubleAnimation Storyboard.TargetName="MyAnimatedRectangle" From="1.0" To="0.0" Duration="0:0:1" AutoReverse="True" RepeatBehavior="Forever" /></Storyboard>3.用TargetProperty这个附加属性(attached property)来指定施加动画的属性，在下面的代码中我们将它的值设定为Rectangle的Opacity属性
<Storyboard> <DoubleAnimation Storyboard.TargetName="MyAnimatedRectangle" Storyboard.TargetProperty="Opacity" From="1.0" To="0.0" Duration="0:0:1" AutoReverse="True" RepeatBehavior="Forever" /></Storyboard>将动画和事件关联
目前为止，你已经制定了动画的目标对象和目标属性以及动画的表现方式；你还需要指定动画开始的时机。你可以用事件来完成这个任务。
1.将StoryBoard做成一个资源：将StoryBoard定义在Resource标签下，这样你就可以很容易地从代码中访问到这个StoryBoard并且可以与它进行交互。比如，开始，结束，停止，继续这个故事板。下面的标记语言中把StoryBoard声明在StackPanel对象的一个Resource块中。注意，其实你可以把StoryBoard声明在任何一个Resource块中，前提条件是这个资源块和需要施加动画的目标对象是在一个范围中。
<StackPanel> <StackPanel.Resources> <!-- Animates the rectangle's opacity. --> <Storyboard x:Name="myStoryboard"> <DoubleAnimation Storyboard.TargetName="MyAnimatedRectangle"Storyboard.TargetProperty="Opacity" From="1.0" To="0.0" Duration="0:0:1" AutoReverse="True" RepeatBehavior="Forever" /> </Storyboard> </StackPanel.Resources> <Rectangle x:Name="MyAnimatedRectangle" Width="100" Height="100" Fill="Blue" /> </StackPanel>2.在元素上附加一个事件：我们有很事件可以用来开始一个动画，包括鼠标相关的事件，例如MouseLeftButtonDown，它的触发时机是当用户电击一个对象的时候，再比如Loaded事件，它的触发时机是对象初次被加载的时候。在本例中，我们使用MouseLeftButtonDown来启动故事板，当用户点击矩形的时候，这个事件被触发。
<Rectangle MouseLeftButtonDown="Mouse_Clicked" x:Name="MyAnimatedRectangle" Width="100" Height="100" Fill="Blue" />3.在事件处理函数中控制动画：StoryBoard暴露了几个方法是的你可以重放故事板中的动画，这些方法包括Begin，stop，pause，Resume。在下面的例子中，当用户点击这个矩形，在MouseLeftButtonDown的事件处理函数中，我们将使用Begin这个方法来开始动画。
// When the user clicks the Rectangle, the animation // begins. public void Mouse_Clicked(object sender, MouseEventArgs e) { myStoryboard.Begin(); }完整代码
XAML
<StackPanel> <StackPanel.Resources> <!-- Animates the rectangle's opacity. --> <Storyboard x:Name="myStoryboard"> <DoubleAnimation Storyboard.TargetName="MyAnimatedRectangle" Storyboard.TargetProperty="Opacity" From="1.0" To="0.0" Duration="0:0:1" AutoReverse="True" RepeatBehavior="Forever" /> </Storyboard> </StackPanel.Resources> <Rectangle MouseLeftButtonDown="Mouse_Clicked" x:Name="MyAnimatedRectangle" Width="100" Height="100" Fill="Blue" /> </StackPanel>C#代码
// When the user clicks the Rectangle, the animation // begins. public void Mouse_Clicked(object sender, MouseEventArgs e) { myStoryboard.Begin(); }
