Silverlight学习笔记（3）——动画Storyboard
本文将建立一个silverlight项目中的运用Storyboard故事板的简单实例，以下是详细步骤：
在Silverlight项目中新建一个silverlight页，修改Grid布局，
<Grid x:Name="LayoutRoot">
<Grid.RowDefinitions >
<RowDefinition Height="100"/>
<RowDefinition />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions >
<ColumnDefinition Width="100"/>
<ColumnDefinition />
</Grid.ColumnDefinitions>
将Grid设置成两行两列，第一行固定高度100，第一列固定宽度100
在Grid的第一行第一列位置，放置一个Border区域，里面放置一个Canvas控件，Canvas控件内部我们可以很方便的设置元素的坐标，
<Border Grid.Row="0" Grid.Column="0" Background="#38B0DE" BorderBrush="#FFFFFFFF" BorderThickness="2" CornerRadius="10">
<Canvas >
</Canvas>
</Border>
在Canvas中，放置一个星型的图案，需要添加引用xmlns:ed="http://schemas.microsoft.com/expression/2010/drawing"，
<Border Grid.Row="0" Grid.Column="0" Background="#38B0DE" BorderBrush="#FFFFFFFF" BorderThickness="2" CornerRadius="10">
<Canvas >
<ed:RegularPolygon x:Name="logo_star1" Stroke="White" StrokeThickness="2" Height="80" InnerRadius="0.8" PointCount="6" Width="80" Margin="10,10,0,0" RenderTransformOrigin="0.5,0.5">
<ed:RegularPolygon.RenderTransform>
<CompositeTransform/>
</ed:RegularPolygon.RenderTransform>
</ed:RegularPolygon>
</Canvas>
</Border>
RegularPolygon控件，设置名字Name为logo_star1，这样我们可以在后续的动画中使用到它，边框Stroke设置为白色宽度2，高度和宽度都为80，内半径InnerRadius设为0.8，数字越大星型越饱满，设置PointCount=6为六星图案，由于我们将要实现一个星型旋转的效果，所以添加星型旋转中心坐标RenderTransformOrigin=“0.5,05”，添加转换属性CompositeTransform，这样我们在后续的动画中可以使用到它，
添加Canvas中触发器的Loaded加载完毕事件，
<Border Grid.Row="0" Grid.Column="0" Background="#38B0DE" BorderBrush="#FFFFFFFF" BorderThickness="2" CornerRadius="10">
<Canvas >
<ed:RegularPolygon x:Name="logo_star1" Stroke="White" StrokeThickness="2" Height="80" InnerRadius="0.8" PointCount="6" Width="80" Margin="10,10,0,0" RenderTransformOrigin="0.5,0.5">
<ed:RegularPolygon.RenderTransform>
<CompositeTransform/>
</ed:RegularPolygon.RenderTransform>
</ed:RegularPolygon>
<Canvas.Triggers >
<EventTrigger RoutedEvent="Canvas.Loaded">
<EventTrigger.Actions >
<BeginStoryboard >
<Storyboard x:Name="logo_story" RepeatBehavior="Forever">
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.Rotation)" Storyboard.TargetName="logo_star1">
<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:8" Value="360"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</Canvas.Triggers>
</Canvas>
</Border>
加载完毕，将执行动作Actions，开始一个动画BeginStoryboard，设置动画循环播放RepeatBehavior="Forever"，设置一组KeyFrame对Double值进行动画处理，Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.Rotation)"设置动画控制的元素属性为：UIElement元素转换RenderTransform的Rotation旋转属性，添加关键帧在0时值为0，在0:0:8时值为360，这样将看到元素在8秒的时间旋转一个360°，
相似的我们再添加一个星型，完整的Border区域设置如下，
<Border Grid.Row="0" Grid.Column="0" Background="#38B0DE" BorderBrush="#FFFFFFFF" BorderThickness="2" CornerRadius="10">
<Canvas >
<ed:RegularPolygon x:Name="logo_star1" Stroke="White" StrokeThickness="2" Height="80" InnerRadius="0.8" PointCount="6" Width="80" Margin="10,10,0,0" RenderTransformOrigin="0.5,0.5">
<ed:RegularPolygon.RenderTransform>
<CompositeTransform/>
</ed:RegularPolygon.RenderTransform>
</ed:RegularPolygon>
<ed:RegularPolygon x:Name="logo_star2" Stroke="White" StrokeThickness="2" Height="60" InnerRadius="0.8" PointCount="6" Width="60" Margin="20,20,0,0" RenderTransformOrigin="0.5,0.5">
<ed:RegularPolygon.RenderTransform>
<CompositeTransform/>
</ed:RegularPolygon.RenderTransform>
</ed:RegularPolygon>
<Canvas.Triggers >
<EventTrigger RoutedEvent="Canvas.Loaded">
<EventTrigger.Actions >
<BeginStoryboard >
<Storyboard x:Name="logo_story" RepeatBehavior="Forever">
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.Rotation)" Storyboard.TargetName="logo_star1">
<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:8" Value="360"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.Rotation)" Storyboard.TargetName="logo_star2">
<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:4" Value="-360"/>
<EasingDoubleKeyFrame KeyTime="0:0:8" Value="-720"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleY)" Storyboard.TargetName="logo_star2">
<EasingDoubleKeyFrame KeyTime="0" Value="1"/>
<EasingDoubleKeyFrame KeyTime="0:0:4" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:8" Value="1"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</Canvas.Triggers>
</Canvas>
</Border>
重新生成项目，F5运行一下，可以看到一个旋转动画的logo图案
在Grid中，我们添加两个Border区域，一个放置Button用以控制动画，一个放置一个Canvas控件用以显示动画，
<Border Grid.Row="0" Grid.Column="1" Background="#38B0DE" BorderBrush="#FFFFFFFF" BorderThickness="2" CornerRadius="10" >
<StackPanel HorizontalAlignment="Center" VerticalAlignment="Center" Orientation="Horizontal" >
<Button x:Name="btn_snow" Width="150" Height="50" Content="snow" FontSize="30" FontWeight="Bold" Click="btn_snow_Click" />
</StackPanel>
</Border>
<Border Grid.Row="1" Grid.ColumnSpan="2" Background="#38B0DE" BorderBrush="#FFFFFFFF" BorderThickness="2" CornerRadius="10">
<Canvas x:Name="canvas_sky" >
</Canvas>
</Border>
下面我们将添加一个动画，但与前面的logo动画不同，这次将在后台代码code中完成
添加Button的点击事件，在点击事件中添加一个雪花下落的动画，
private void btn_snow_Click(object sender, RoutedEventArgs e)
{
Canvas canvas_star = new Canvas();
canvas_star.Width = 100;
canvas_star.Height = 100;
Random rd = new Random();
canvas_star.SetValue(Canvas.LeftProperty, rd.NextDouble() * 600);
canvas_star.Loaded += new RoutedEventHandler(canvas_star_Loaded);
this.canvas_sky.Children.Add(canvas_star);
DoubleAnimation da = new DoubleAnimation();
Storyboard.SetTargetProperty(da, new PropertyPath("(Canvas.Top)"));
Storyboard.SetTarget(da, canvas_star);
da.From = 0;
da.To = 400;
da.Duration = new Duration(new TimeSpan(0, 0, 8));
da.RepeatBehavior = RepeatBehavior.Forever;
Storyboard story = new Storyboard();
story.Children.Add(da);
story.Begin();
}
新建一个canvas_star用以显示雪花，设置canvas_star的宽高为100，SetValue设置在父元素Canvas中距左侧的距离为一个随机数，设置一个对Double值的动画da，设置它控制着canvas_star的Canvas.Top在父元素Canvas中距顶部的距离，设置动画da控制的元素对象SetTarget为canvas_star，动画数值From 0，To 400，动画时间Duration为8秒，动画为循环播放RepeatBehavior为Forever，最后将动画da 加入到故事板story中，并且开始Begin故事板，
这里添加了canvas_star的加载完毕事件，在里面我们将完成对雪花的描述，
void canvas_star_Loaded(object sender, RoutedEventArgs e)
{
RegularPolygon star = new RegularPolygon();
star.Stroke = new SolidColorBrush(Colors.White);
star.StrokeThickness = 3;
star.Height = 80;
star.Width = 80;
star.Margin = new Thickness(10, 10, 0, 0);
star.PointCount = 6;
star.InnerRadius = 0.8;
star.RenderTransform = new CompositeTransform();
(star.RenderTransform as CompositeTransform).CenterX = 40;
(star.RenderTransform as CompositeTransform).CenterY = 40;
Canvas canvas = sender as Canvas;
canvas.Children.Add(star);
Storyboard story = new Storyboard();
DoubleAnimationUsingKeyFrames da_keys = new DoubleAnimationUsingKeyFrames();
da_keys.RepeatBehavior = RepeatBehavior.Forever;
Storyboard.SetTargetProperty(da_keys, new PropertyPath("(UIElement.RenderTransform).(CompositeTransform.Rotation)"));
Storyboard.SetTarget(da_keys, star);
EasingDoubleKeyFrame da_keys_key1 = new EasingDoubleKeyFrame();
da_keys_key1.KeyTime = KeyTime.FromTimeSpan(new TimeSpan(0, 0, 0));
da_keys_key1.Value = 0;
EasingDoubleKeyFrame da_keys_key2 = new EasingDoubleKeyFrame();
da_keys_key2.KeyTime = KeyTime.FromTimeSpan(new TimeSpan(0, 0, 8));
da_keys_key2.Value = 360;
da_keys.KeyFrames.Add(da_keys_key1);
da_keys.KeyFrames.Add(da_keys_key2);
story.Children.Add(da_keys);
story.Begin();
}
添加一个星型RegularPolygon元素star，基本设置同前面logoBorder里面的一样，star.RenderTransform = new CompositeTransform();并且设置旋转中心坐标(star.RenderTransform as CompositeTransform).CenterX = 40;(star.RenderTransform as CompositeTransform).CenterY = 40;
Canvas canvas = sender as Canvas;将星元素star添加到canvas_star中，设置一组KeyFrame对Double值进行动画处理，循环播放RepeatBehavior=Forever，Storyboard.TargetProperty设置动画控制的属性为"(UIElement.RenderTransform).(CompositeTransform.Rotation)"，设置动画控制对象是星元素star，添加关键帧EasingDoubleKeyFrame，在0时值为0，在0:0:8时值为360，这样将看到元素在8秒的时间旋转一个360°，将关键帧添加到关键帧集合中，将关键帧集合添加到故事板story中，并且开始Begin动画
重新生成项目，F5运行，点击button，后台代码将new 一个canvas，canvas中将生成一个旋转的雪花图案，本身canvas也有下落的动画，雪花的横坐标将由随机数生成，效果如下
