步骤四：增加动画
XAML一个非常智能的地方是能够让开发者增加资源到嵌入层，尤其是Storyboad。在Silverlight中，通过一个Storyboad设定一个数值范围给特定控件的特定属性。通过定位和命名特定属性，我们可以修改控件的透明度，填充其颜色，甚至移动该控件。
不过，要想得到自己想要的效果可能要经过反复尝试，因为某些属性并不像人们所预料的那样活动。举例来讲，Silverlight.net的Quickstarts包含了一些不错的初学者示例程序，来演示一个画布的不同动作，其中包括修改画布本身的颜色：http://www.silverlight.net/learn/quickstarts/animations/。但是，即便借助于像Visual Studio这样具有完整资源的IDE工具对一个矩形应用相同的色彩切换技术，也依然需要大量代码编写工作。
不过，对于本文示例中这样简单的应用你依然可以实现某些漂亮的效果。现在就让我们开始动手，打开createMenu.php，然后在开始的下面和PHP脚本的上面增加以下代码：
<Storyboard x:Name="fadeIn">
<DoubleAnimation x:Name="fadeInDouble" Storyboard.TargetProperty="Opacity" Storyboard. Storyboard.TargetName="Rect1" To="1" Duration="0:0:1" />
</Storyboard>
<Storyboard x:Name="fadeOut">
<DoubleAnimation x:Name="fadeOutDouble" Storyboard.TargetProperty="Opacity" Storyboard. Storyboard.TargetName="Rect1" To=".5" Duration="0:0:1" />
</Storyboard>
</Canvas.Resources>
关于该代码的注意事项如下：
注意该容器是Canvas.Resources。Storyboards无论在哪个容器中都被看作一个资源。举例来讲，如果这是一个StackPanel，我们就应该使用StackPanel.Resources。Storyboard应给被命名，这样它才可以被调用程序来引用。
在Storyboard内，实际动画效果基于被修改参数的值类型。本例将修改矩形的透明度。而Opacity是一个double类型数值，因此这儿使用“DoubleAnimation”。另外，动画本身也应该被命名，这样它以后可以被引用。
在动画标签内部，我们使用了一个TargetProperty，在本例中它是“Opacity”，另外还使用了一个TargetName，指向了属性的所有者，在这儿是“Rect1”。
我们可以同时使用“To”和“From”来建立效果的范围。举例来说，从“.5”到“1”会导致该控件从半透明到完全不透明。通常情况下我们可能希望设变化范围的两个边界。但在本文示例中没有设定From边界的值，这样可以实现更平滑的变色效果，因为其默认值是当前值。换言之，当我们开始MouseEnter动画后，控件透明度变到.75，然后MouseLeave动画将从.75变到.5。
我们还可以设定动画的持续时间，格式为H:M:S格式。本例中设定的持续时间是1秒。
在该动画被定义后，我们依然需要触发它们。那么就打开我们的xamlFunction.js文件，并在下面增加如下代码：
{
sender.findName("fadeIn").Begin();
}
function mouseLeft(sender, mouseEventArgs)
{
sender.findName("fadeOut").Begin();
}
