Storyboard是Silverlight動畫的基本單元，它用來分配動畫時間，可以使用同一個故事板對象產生一種或多種動畫效果，並且允許控制動畫的播放、暫停、停止以及在何時何地播放。
1 <Storyboard>
2 oneOrMoreChildTimelines
3 </Storyboard>
其中oneOrMoreChildTimelines用來設置動畫效果，有3種形式
1.ColorAnimation（改變對象的填充色調）
2.DoubleAnimation（改變對象的任意一個屬性（double類型的））
3.PointAnimation（改變對象的X、Y值，使控件的位置變化一次）
在XAML頁面播放動畫的方法有兩種，一種是在XAML代碼中使用EventTrigger播放，另外一種是將故事板包括在Resources內，然后在后台代碼中引用故事板中的 x:Name，最后使用Begin方法來播放。(下面產生的效果是一樣的)
1、XAML代碼中使用EventTrigger播放
1 <Canvas Background="AliceBlue">
2 <Ellipse x:Name="ellipse" Fill="GreenYellow" Width="150" Height="200"></Ellipse>
3 <!-- XAML代碼中使用 EventTrigger -->
4 <Canvas.Triggers>
5 <!--創建觸發器，加載Canvas完畢之后觸發，播放動畫-->
6 <EventTrigger RoutedEvent="Canvas.Loaded">
7 <!--事件行為-->
8 <EventTrigger.Actions>
9 <BeginStoryboard>
10 <Storyboard>
11 <DoubleAnimation
12 Storyboard.TargetName="ellipse"
13 Storyboard.TargetProperty="Width"
14 From="100" To=" 300"
15 Duration="0:0:3"/>
16 </Storyboard>
17 </BeginStoryboard>
18 </EventTrigger.Actions>
19 </EventTrigger>
20 </Canvas.Triggers>
21 </Canvas>
2、將故事板包括在Resources內
1 <UserControl x:Class="Storyboard.MainPage"
2 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
3 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
4 xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
5 xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
6 mc:Ignorable="d"
7 d:DesignHeight="300" d:DesignWidth="640">
8 <!-- 將故事板包括在Resources內 -->
9 <UserControl.Resources>
10 <Storyboard x:Name="sbd">
11 <DoubleAnimation Storyboard.TargetName="ellipse"
12 Storyboard.TargetProperty="Width"
13 From="150" To=" 300"
14 Duration="0:0:3">
15
16 </DoubleAnimation>
17 </Storyboard>
18 </UserControl.Resources>
19 <Canvas x:Name="canvas" Background="AliceBlue">
20 <Ellipse x:Name="ellipse" Fill="YellowGreen"
21 Width="150" Height="200">
22
23 </Ellipse>
24 </Canvas>
25 </UserControl>
1 namespace Storyboard
2 {
3 public partial class MainPage : UserControl
4 {
5 public MainPage()
6 {
7 InitializeComponent();
8 sbd.Begin();
9 }
10 }
11 }
DoubleAnimation動畫：動畫實現進度條效果
1 <Canvas x:Name="canvas">
2 <Rectangle x:Name="rect" Canvas.Top="100" Canvas.Left="80"
3 Width="0" Height="80"
4 Stroke="DarkGray" StrokeThickness="5">
5 <Rectangle.Fill>
6 <!-- 鞏固畫刷漸變 -->
7 <LinearGradientBrush StartPoint="0,0.5" EndPoint="1,0.5">
8 <GradientStop Color="YellowGreen" Offset="1.0"></GradientStop>
9 <GradientStop Color="White" Offset="0.0"></GradientStop>
10 </LinearGradientBrush>
11 </Rectangle.Fill>
12 </Rectangle>
13 <TextBlock Canvas.Top="120" Canvas.Left="20" Text="0%" FontSize="30"></TextBlock>
14 <TextBlock Canvas.Top="120" Canvas.Left="300" Text="100%" FontSize="30"></TextBlock>
15 <!-- 創建觸發器 -->
16 <Canvas.Triggers>
17 <!-- 事件通道 -->
18 <EventTrigger RoutedEvent="Canvas.Loaded">
19 <EventTrigger.Actions>
20 <BeginStoryboard>
21 <Storyboard>
22 <!-- RepeatBehavior 用來說明動畫的重復次數-->
23 <DoubleAnimation Storyboard.TargetName="rect" Storyboard.TargetProperty="Width"
24 From="1" To="210" Duration="0:0:5"
25 RepeatBehavior="Forever"></DoubleAnimation>
26 </Storyboard>
27 </BeginStoryboard>
28 </EventTrigger.Actions>
29 </EventTrigger>
30 </Canvas.Triggers>
31 </Canvas>
ColorAnimation動畫效果(同時也實現了DoubleAnimation)：在橢圓沿旋轉中心不斷改變Angle值進行旋轉過程中，實現ColorAnimation填充顏色的不斷變化。
1 public partial class RotateTransform : UserControl
2 {
3 public RotateTransform()
4 {
5 InitializeComponent();
6 sbd.Begin();
7 }
8 }
1 <!-- storyboard嵌到Resources內 -->
2 <UserControl.Resources>
3 <Storyboard x:Name="sbd">
4 <!-- DoubleAnimation數值變換，實現橢圓的旋轉變化 -->
5 <DoubleAnimation Storyboard.TargetName="ellipse" Storyboard.TargetProperty="(Ellipse.RenderTransform).(RotateTransform.Angle)"
6 From="0" To="360"
7 Duration="0:0:6" RepeatBehavior="forever"></DoubleAnimation>
8 <!-- ColorAnimation顏色變換，在橢圓旋轉的過程時，實現顏色的變換-->
9 <ColorAnimation Storyboard.TargetName="ellipse" Storyboard.TargetProperty="(Ellipse.Fill).(SolidColorBrush.Color)"
10 From="YellowGreen" To="Red"
11 Duration="0:0:6" RepeatBehavior="forever"></ColorAnimation>
12 </Storyboard>
13 </UserControl.Resources>
14 <Canvas x:Name="canvas">
15 <Ellipse x:Name="ellipse" Canvas.Top="180" Canvas.Left="180" Width="20" Height="80"
16 Fill="YellowGreen" Stroke="Black" StrokeThickness="1">
17 <!-- 設置好橢圓的旋轉中心-->
18 <Ellipse.RenderTransform>
19 <RotateTransform Angle="0" CenterX="10" CenterY="-20"></RotateTransform>
20 </Ellipse.RenderTransform>
21 </Ellipse>
22 </Canvas>
效果截圖：
PointAnimation：改變籃球的X、Y軸坐標，實現垂直下降效果
1 <Canvas Background="AliceBlue">
2 <Path Canvas.Left="100">
3 <Path.Data>
4 <EllipseGeometry x:Name="ellipseGeometry" Center="0,0"
5 RadiusX="50" RadiusY="50">
6 </EllipseGeometry>
7 </Path.Data>
8 <Path.Fill>
9 <ImageBrush ImageSource="basketball.jpg"></ImageBrush>
10 </Path.Fill>
11 <Path.Triggers>
12 <EventTrigger RoutedEvent="Path.Loaded">
13 <BeginStoryboard>
14 <Storyboard>
15 <PointAnimation Storyboard.TargetName="ellipseGeometry" Storyboard.TargetProperty="Center"
16 Duration="0:0:5" From="50,50" To="50,200"
17 RepeatBehavior="forever"></PointAnimation>
18 </Storyboard>
19 </BeginStoryboard>
20 </EventTrigger>
21 </Path.Triggers>
22 </Path>
23 </Canvas>
循例來張圖，不過看不出任何效果。。。。。。
小總結一下：三種線性插值動畫用法如出一轍，只要記住幾個屬性就可以實現基本的應用了。
Storyboard.TargetName:附加屬性操作到指定的對象上;
Storyboard.TargetProperty:要操作指定對象的屬性;
From..To :上述屬性值的起始范圍;
Duration: 在多少時間內完成上述屬性值的變化;
RepeatBehavior:反復次數
---------------------------------------------------------完美分割線---------------------------------------------------------------------------------
爭取明天能夠學習並完成那個類似 Mac Dock 的Silverlight小項目。