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();
        }