Silverlight2.0专题探讨：动画（Animations）Part One

核心提示： 在开始深入挖掘动画之前，这里有两个示例向你展示在Silverlight中动画做什么的概念，Silverlight2.0专题探讨：动画（Animations）Part One(2)，或者说动画是如何做的概念，这仅仅是一个动画运转的示例，但先不要深入这些代码，接下来的文章将开始学习一些基础知识

在开始深入挖掘动画之前，这里有两个示例向你展示在Silverlight中动画做什么的概念，或者说动画是如何做的概念。这仅仅是一个动画运转的示例，你可以修改代码使得其表现更生动。下面的示例以动画的形式，一个接一个地展示两个视频。

图1正在执行中的Silverlight动画

以上是本应用程序中的第一个视频，应用了缩放、变形、旋转等动画效果。本视频结束后，第二个视频在此视频上面以旋转的方式接着开始播放。

图2：第二个执行中的动画

你现在看到Silverlight的动画能力可能会激动。本应用程序包含三个多媒体元素，其中两个使用了动画效果，另外一个我使用了一个5秒钟的“Powered by Silverlight”文字视频，和Silverlight logo一起显示。完整的代码显示在下面，但先不要深入这些代码，接下来的文章将开始学习一些基础知识，在此之后请在回头看这些代码。

表1：Page.xaml

<UserControl　
　xmlns="http://schemas.microsoft.com/client/2007"　
　xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"　
　x:Class="SilverlightVideoAnimation3.Page"　
　Loaded="Page_Loaded"　
　　Width="1024"Height="680"　
　　　xmlns:d="http://schemas.microsoft.com/expression/blend/2008"　
　　　xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"　
　　　mc:Ignorable="d">　
　<UserControl.Resources>　
　　<Storyboardx:Name="VideoTimeline">　
　　　<DoubleAnimationUsingKeyFrames　
　　　　　　　　　　　　Storyboard.TargetName="mediaElement"　
　　　　　　　　　　　　Storyboard.TargetProperty="(UIElement.Opacity)"　
　　　　　　　　　　　　BeginTime="00:00:00">　
　　　　<SplineDoubleKeyFrameKeyTime="00:00:00"Value="0"/>　
　　　　<SplineDoubleKeyFrameKeyTime="00:00:02"Value="1"/>　
　　　</DoubleAnimationUsingKeyFrames>　
　　　<DoubleAnimationUsingKeyFrames　
　　　　　　　　　　　　Storyboard.TargetName="mediaElement"　
　　　　　　　　　　　　Storyboard.TargetProperty="(UIElement.RenderTransform).　
　　　　　　　　　　　(TransformGroup.Children)[0].(ScaleTransform.ScaleX)"　
　　　　　　　　　　　　BeginTime="00:00:00">　
　　　　<SplineDoubleKeyFrameKeyTime="00:00:02"Value="1"/>　
　　　　<SplineDoubleKeyFrameKeyTime="00:00:03"Value="1.5"/>　
　　　　<SplineDoubleKeyFrameKeyTime="00:00:07"Value="1.5"/>　
　　　　<SplineDoubleKeyFrameKeyTime="00:00:09"Value="3.594"/>　
　　　</DoubleAnimationUsingKeyFrames>　
　　　<DoubleAnimationUsingKeyFrames　
　　　　　　　　　　　　Storyboard.TargetName="mediaElement"　
　　　　　　　　　　　　Storyboard.TargetProperty="(UIElement.RenderTransform)　
　　　　　　　　　　　　.(TransformGroup.Children)[0].(ScaleTransform.ScaleY)"　
　　　　　　　　　　　　BeginTime="00:00:00">　
　　　　<SplineDoubleKeyFrameKeyTime="00:00:02"Value="1"/>　
　　　　<SplineDoubleKeyFrameKeyTime="00:00:03"Value="1.5"/>　
　　　　<SplineDoubleKeyFrameKeyTime="00:00:07"Value="1.5"/>　
　　　　<SplineDoubleKeyFrameKeyTime="00:00:09"Value="3.594"/>　
　　　</DoubleAnimationUsingKeyFrames>　
　　　<DoubleAnimationUsingKeyFrames　
　　　　　　　　　　　　Storyboard.TargetName="mediaElement"　
　　　　　　　　　　　　Storyboard.TargetProperty="(UIElement.RenderTransform)　
　　　　　　　　　　　　.(TransformGroup.Children)[3].(TranslateTransform.X)"　
　　　　　　　　　　　　BeginTime="00:00:00">　
　　　　<SplineDoubleKeyFrameKeyTime="00:00:03"Value="0"/>　
　　　　<SplineDoubleKeyFrameKeyTime="00:00:04"Value="56"/>　
　　　　<SplineDoubleKeyFrameKeyTime="00:00:05.9000000"Value="-135"/>　
　　　　<SplineDoubleKeyFrameKeyTime="00:00:07"Value="-196"/>　
　　　　<SplineDoubleKeyFrameKeyTime="00:00:09"Value="-62"/>　
　　　</DoubleAnimationUsingKeyFrames>　
　　　<DoubleAnimationUsingKeyFramesStoryboard.TargetName="mediaElement"　
　　　　　　　　　　　　　　　　　　　　　Storyboard.TargetProperty="(UIElement.RenderTransform)　
　　　　　　　　　　　　　　　　　　.(TransformGroup.Children)[3].(TranslateTransform.Y)"　　
　　　　　　　　　　　　　　　　　　BeginTime="00:00:00">　
　　　　<SplineDoubleKeyFrameKeyTime="00:00:03"Value="0"/>　
　　　　<SplineDoubleKeyFrameKeyTime="00:00:04"Value="1"/>　
　　　　<SplineDoubleKeyFrameKeyTime="00:00:05.9000000"Value="168"/>　
　　　　<SplineDoubleKeyFrameKeyTime="00:00:07"Value="-41"/>　
　　　　<SplineDoubleKeyFrameKeyTime="00:00:09"Value="59.5"/>　
　　　</DoubleAnimationUsingKeyFrames>　
　　　<DoubleAnimationUsingKeyFramesStoryboard.TargetName="mediaElement"　　
　　　　　　　　　　　　　　　　　　Storyboard.TargetProperty="(UIElement.RenderTransform)　
　　　　　　　　　　　　　　　　　　.(TransformGroup.Children)[2].(RotateTransform.Angle)"　　
　　　　　　　　　　　　　　　　　　BeginTime="00:00:00">　
　　　　<SplineDoubleKeyFrameKeyTime="00:00:05.9000000"Value="0"/>　
　　　　<SplineDoubleKeyFrameKeyTime="00:00:07"Value="360"/>　
　　　</DoubleAnimationUsingKeyFrames>　
　　　<DoubleAnimationUsingKeyFramesStoryboard.TargetName="mediaElement1"　　
　　　　　　　　　　　　　　　　　　Storyboard.TargetProperty="(UIElement.RenderTransform)　
　　　　　　　　　　　　　　　　　　.(TransformGroup.Children)[3].(TranslateTransform.X)"　　
　　　　　　　　　　　　　　　　　　BeginTime="00:00:00">　
　　　　<SplineDoubleKeyFrameKeyTime="00:00:30"Value="-465"/>　
　　　　<SplineDoubleKeyFrameKeyTime="00:00:32"Value="-545"/>　
　　　　<SplineDoubleKeyFrameKeyTime="00:00:35"Value="-518.5"/>　
　　　</DoubleAnimationUsingKeyFrames>　
　　　<DoubleAnimationUsingKeyFramesStoryboard.TargetName="mediaElement1"　　
　　　　　　　　　　　　　　　　　　Storyboard.TargetProperty="(UIElement.RenderTransform)　
　　　　　　　　　　　　　　　　　　.(TransformGroup.Children)[0].(ScaleTransform.ScaleX)"　　
　　　　　　　　　　　　　　　　　　BeginTime="00:00:00">　
　　　　<SplineDoubleKeyFrameKeyTime="00:00:30"Value="1"/>　
　　　　<SplineDoubleKeyFrameKeyTime="00:00:32"Value="1"/>　
　　　　<SplineDoubleKeyFrameKeyTime="00:00:35"Value="4.993"/>　
　　　</DoubleAnimationUsingKeyFrames>　
　　　<DoubleAnimationUsingKeyFramesStoryboard.TargetName="mediaElement1"　　
　　　　　　　　　　　　　　　　　　Storyboard.TargetProperty="(UIElement.RenderTransform)　
　　　　　　　　　　　　　　　　　　.(TransformGroup.Children)[0].(ScaleTransform.ScaleY)"　　
　　　　　　　　　　　　　　　　　　BeginTime="00:00:00">　
　　　　<SplineDoubleKeyFrameKeyTime="00:00:30"Value="1"/>　
　　　　<SplineDoubleKeyFrameKeyTime="00:00:32"Value="1"/>　
　　　　<SplineDoubleKeyFrameKeyTime="00:00:35"Value="5.364"/>　
　　　</DoubleAnimationUsingKeyFrames>　
　　　<DoubleAnimationUsingKeyFramesStoryboard.TargetName="mediaElement1"　　
　　　　　　　　　　　　　　　　　　Storyboard.TargetProperty="(UIElement.RenderTransform)　
　　　　　　　　　　　　　　　　　　.(TransformGroup.Children)[3].(TranslateTransform.Y)"　　
　　　　　　　　　　　　　　　　　　BeginTime="00:00:00">　
　　　　<SplineDoubleKeyFrameKeyTime="00:00:30"Value="0"/>　
　　　　<SplineDoubleKeyFrameKeyTime="00:00:32"Value="0"/>　
　　　　<SplineDoubleKeyFrameKeyTime="00:00:35"Value="177"/>　
　　　</DoubleAnimationUsingKeyFrames>　
　　　<DoubleAnimationUsingKeyFramesStoryboard.TargetName="mediaElement1"　　
　　　　　　　　　　　　　　　　　　Storyboard.TargetProperty="(UIElement.RenderTransform)　
　　　　　　　　　　　　　　　　　　.(TransformGroup.Children)[2].(RotateTransform.Angle)"　　
　　　　　　　　　　　　　　　　　　BeginTime="00:00:00">　
　　　　<SplineDoubleKeyFrameKeyTime="00:00:30"Value="0"/>　
　　　　<SplineDoubleKeyFrameKeyTime="00:00:32"Value="0"/>　
　　　　<SplineDoubleKeyFrameKeyTime="00:00:35"Value="360"/>　
　　　</DoubleAnimationUsingKeyFrames>　
　　</Storyboard>　
　</UserControl.Resources>　
　<Gridx:Name="LayoutRoot">　
　　<Grid.Background>　
　　　<LinearGradientBrushEndPoint="0.5,1"StartPoint="0.5,0">　
　　　　<GradientStopColor="#FFFFFFFF"Offset="0.554"/>　
　　　　<GradientStopColor="#FF282828"Offset="0"/>　
　　　　<GradientStopColor="#FF595858"Offset="1"/>　
　　　</LinearGradientBrush>　
　　</Grid.Background>　
　　<MediaElementHorizontalAlignment="Stretch"　　
　　　　　　　　　Margin="281.837005615234,137.998992919922,432.832000732422,0"　　
　　　　　　　　　VerticalAlignment="Top"Opacity="1"Source="Media/racecar.wmv"　　
　　　　　　　　　d:LayoutOverrides="HorizontalAlignment,Height"x:Name="mediaElement"　　
　　　　　　　　　RenderTransformOrigin="0.5,0.5"Height="93.998">　
　　　<MediaElement.RenderTransform>　
　　　　<TransformGroup>　
　　　　　<ScaleTransform/>　
　　　　　<SkewTransform/>　
　　　　　<RotateTransform/>　
　　　　　<TranslateTransform/>　
　　　　</TransformGroup>　
　　　</MediaElement.RenderTransform>　
　　</MediaElement>　
　　<MediaElementHeight="81.126"HorizontalAlignment="Right"Margin="0,0,0,0"　　
　　　　　　　　　VerticalAlignment="Top"Width="144"Source="Media/Halo.wmv"　　
　　　　　　　　　d:LayoutOverrides="Height"Position="00:00:16"　　
　　　　　　　　　RenderTransformOrigin="0.5,0.5"x:Name="mediaElement1">　
　　　<MediaElement.RenderTransform>　
　　　　<TransformGroup>　
　　　　　<ScaleTransform/>　
　　　　　<SkewTransform/>　
　　　　　<RotateTransform/>　
　　　　　<TranslateTransform/>　
　　　　</TransformGroup>　
　　　</MediaElement.RenderTransform>　
　　</MediaElement>　
　　<MediaElementx:Name="MediaElement3"Height="98"　　
　　　　　　　　　HorizontalAlignment="Right"　　
　　　　　　　　　Margin="0,0,17,137"VerticalAlignment="Bottom"　　
　　　　　　　　　Width="127"Source="Media/poweredby_silverlight.wmv"　　
　　　　　　　　　Position="00:00:05">　
　　</MediaElement>　
　</Grid>