实现一个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();
        }

本主题包括以下几个小节:

1.       动画介绍

2.       在视图中实现UIElement的淡入淡出效果

3.       动画的开始,停止,暂停,和继续

4.       动画类型

5.       对属性施加动画

6.       当动画结束后会发生什么呢?

(1)动画介绍

动画是一种通过快速循环一组相邻的两张都有细微的差别的图片形成的幻觉.通常,人的大脑会把这些快速循环着的图片认为是一个变化的场景.在电影中,可以使用相机在每个一秒的间隔中记录很多图片,帧来创作动画。当通过放映机放映的时候，观众就可以看到快速移动的图片。在silverlight中，通过对对象的某个属性施加动画来达到动画效果。例如，在silverlight中，为了使一个UIElement的大小发生变化，你就可以对这个UIElement的宽度和高度属性施加动画来达到UIElement大小发生变化的动画效果。为了做出一个UIElement从视图中淡出的效果，我们可以对它的透明度属性施加动画来达到效果。在Silverlight中包含了很多对象，它们的属性都可以被施加动画。

注意：

在silverlight中，你只能对那些属性值表示双精度数值(Double)，颜色(Color)，点(Point)的属性施加动画。此外，你可以通过ObjectAnimationUsingKeyFrames对那些使用了对象的属性施加动画，但是它是由离散插值来实现的(从一个值跳跃到另外一个值)，这种方法与大多数人脑子中动画的概念相去甚远。

在下一个小节中，我们将通过创建一个UIElement对象，矩形，在视图中的淡入淡出效果来演示怎样创建一个简单的动画。

Another thing to note about the support for Adobe’s crossdomain.xml policy file is one thing we found in interpretation of the policy template.  Previously Flash was a Macromedia product and as such that file is adorned with a DOCTYPE that represents a schema with macromedia in it.  Well, Adobe has changed the schema a little bit and also updated the DOCTYPE to reflect Adobe as the authority.  Right now, Silverlight still expects to validate the macromedia declaration.

于是将clientaccesspolicy.xml 的内容修改成如下

<?xml version="1.0" encoding="utf-8"?>
<access-policy>
  <cross-domain-access>
    <policy>
      <allow-from http-request-headers="*">
        <domain uri="*"/>
      </allow-from>
      <grant-to>
        <resource path="/" include-subpaths="true"/>
      </grant-to>
    </policy>
  </cross-domain-access>
</access-policy>