Silverlight学习笔记(十)-----故事板storyboard实现动画效果
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小项目。
