Silverlight学习之——动画
在Silverlight中，动画可以通过添加移动和交互性来增加图形的创建效果。通过对背景色进行动画处理或应用动画Transform,我们可以创造出生动的屏幕过渡效果或提供有帮助的视觉提示。
动画简介：
动画是快速播放一系列图像(其中每个图像与下一个图像略微不同)给人造成的一种幻觉。大脑感觉这组图像是一个变化的场景。在电影中，摄像机每秒钟拍摄许多照片(帧) ），便可使人形成这种幻觉。用投影仪播放这些帧时，观众便可以看电影了。在 Silverlight 中，通过对对象的个别属性应用动画，可以对对象进行动画处理。例如，若要使 UIElement 增大，需对其 Width 和 Height 属性进行动画处理。若要使UIElement 逐渐从视野中消失，可以对其 Opacity 属性进行动画处理。可以对Silverlight 中许多对象的属性进行动画处理。
注意：在Silverlight中,我们只能对值类型为Double、Color或Point的属性执行简单的动画处理。此外，还可以使用 ObjectAnimationUsingKeyFrames 对其他类型的属性进行动画处理，但是这需要使用离散内插（从一个值跳到另一个值），而多数人认为这不是真正的动画。
使UIElement逐渐进入视野并从视野中逐渐消失：
来演示一个示例。这个例子演示如何使用Silverlight 动画通过对属性值进行动画处理，使Rectangle 逐渐进入视野并从视野中逐渐消失。本示例使用 DoubleAnimation（一种生成 Double 值的动画类型）对 Rectangle 的 Opacity 属性进行动画处理。因此，Rectangle 将逐渐进入视野并逐渐从视野中消失。
示例第一部分在StackPanel中创建一个Rectangle元素。
<StackPanel>
<Rectangle MouseLeftButtonDown="Mouse_Clicked" x:Name="MyAnimatedRectangle" Width="100" Height="100" Fill="Blue" />
</StackPanel>
如果要创建动画并将其应用于矩形的Opacity属性，请执行以下操作：
- 创建 DoubleAnimation
- 创建 Storyboard
- 开始 Storyboard 以响应事件
1.创建DoubleAnimation
由于 Opacity 属性的类型是 Double，因此需要一个生成Double 值的动画。DoubleAnimation 就是这样一种动画；它可以创建两个Double 值之间的过渡。若要指定DoubleAnimation 的起始值，可设置其 From 属性。若要指定其终止值，可设置其 To 属性。
- 不透明度值 1.0 使对象完全不透明，不透明度值 0.0 使对象完全不可见。若要使动画的不透明度值从 1.0 过渡为 0.0，可以将其From 属性设置为1.0，将其 To 属性设置为 0.0。
<DoubleAnimationFrom=”1.0” To=”0.0”/>
- 为该动画指定 Duration。动画的Duration 属性指定了从其起始值过渡为目标值所需的时间。下面的示例将动画的持续时间设置为一秒钟。
<DoubleAnimation From="1.0" To="0.0" Duration="0:0:1" />
3. 上面的示例创建了不透明度值从 1.0 向 0.0 过渡的动画，此过渡使目标元素从完全不透明逐渐转变为完全不可见。若要使元素在消失后再逐渐回到视野中，请将 AutoReverse 属性设置为 true。若要使动画无限期地重复，请将其 RepeatBehavior 属性设置为 Forever。
<DoubleAnimation From="1.0" To="0.0" Duration="0:0:1"
AutoReverse="True" RepeatBehavior="Forever"/>
2.创建Storyboard
若要向对象应用动画，请创建 Storyboard 对象并使用 TargetName 和 TargetProperty 附加属性指定要进行动画处理的对象和属性。
- 创建 Storyboard 并将动画添加为其子项。
|
<Storyboard> <DoubleAnimation From="1.0" To="0.0" Duration="0:0:1" AutoReverse="True" RepeatBehavior="Forever" /> </Storyboard> |
这里 Storyboard 仅包含一个动画，不过可以添加多个动画。
2. 使用 TargetName 附加属性指定要进行动画处理的对象。在下面的代码中，为DoubleAnimation 指定了一个目标名称 myAnimatedRectangle，这是要进行动画处理的对象的名称。
<Storyboard>
<DoubleAnimation
Storyboard.TargetName="MyAnimatedRectangle"
From="1.0" To="0.0" Duration="0:0:1"
AutoReverse="True" RepeatBehavior="Forever" />
</Storyboard>
3. 使用 TargetProperty 附加属性指定要进行动画处理的属性。在下面的代码中，动画被配置为面向 Rectangle 的 Opacity 属性。
<Storyboard>
<DoubleAnimation
Storyboard.TargetName="MyAnimatedRectangle"
Storyboard.TargetProperty="Opacity"
From="1.0" To="0.0" Duration="0:0:1"
AutoReverse="True" RepeatBehavior="Forever" />
</Storyboard>
3.将Storyboard与事件相关联：
我们在上面已经指定了动画的目标对象以及动画的行为方式；接下来我们需要指定何时开始播放动画。可以使用事件执行此操作。
1. 将演示图板(Storyboard)作为一种资源。将Storyboard 放入一个资源块内，以便能够轻松地自代码引用该Storyboard，以执行开始、停止、暂停和继续等操作。下面的标记显示StackPanel 对象资源块中声明的Storyboard。请注意，你可以在任意资源块中声明 Storyboard，只要该资源块与你希望进行动画处理的对象位于同一个作用域中。
<StackPanel>
<StackPanel.Resources>
<!-- Animates the rectangle's opacity. -->
<Storyboard x:Name="myStoryboard">
<DoubleAnimation
Storyboard.TargetName="MyAnimatedRectangle"
Storyboard.TargetProperty="Opacity"
From="1.0" To="0.0" Duration="0:0:1"
AutoReverse="True" RepeatBehavior="Forever" />
</Storyboard>
</StackPanel.Resources>
<Rectangle
x:Name="MyAnimatedRectangle"
Width="100" Height="100" Fill="Blue" />
</StackPanel>
2. 将事件附加到某一元素。我们可以使用多种事件来启动动画，包括鼠标相关事件，如在用户单击某一对象时引发的 MouseLeftButtonDown，或是在首次加载对象时引发的 Loaded 事件。在这里我们使用MouseLeftButtonDown 事件附加到 Rectangle，这样用户单击矩形时将引发该事件。
<Rectangle MouseLeftButtonDown="Mouse_Clicked" x:Name="MyAnimatedRectangle"
Width="100" Height="100" Fill="Blue" />
3.从事件处理程序控制动画。Storyboard 提供多种方法，这些方法允许我们控制 Storyboard 动画的播放，包括 Begin、Stop、Pause 和 Resume。本示例使用 Begin 方法，该方法在用户单击矩形并引发 MouseLeftButtonDown 事件时启动动画。
|
private void Mouse_Clicked(object sender, MouseEventArgs e) { myStoryboard.Begin(); } |
开始、停止、暂停和继续动画播放:
上面的示例演示如何使用Begin 方法启动动画；不过，Storyboard 还提供Stop、Pause 和 Resume 方法，这些方法可用于控制动画。下面的示例提供一系列按钮，这些按钮允许用户控制Ellipse 在整个屏幕中的动画播放。
<UserControl x:Class="interactive_animation.Page"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="400" Height="300">
<StackPanel>
<TextBlock Margin="10" TextWrapping="Wrap">This sample uses the Begin, Pause, Resume, and Stop methods to control an animation.</TextBlock>
<Canvas>
<Canvas.Resources>
<Storyboard x:Name="myStoryboard">
<PointAnimation Storyboard.TargetProperty="Center"
Storyboard.TargetName="MyAnimatedEllipseGeometry"
Duration="0:0:5"
From="20,200"
To="400,100"
RepeatBehavior="Forever" />
</Storyboard>
</Canvas.Resources>
<Path Fill="Blue">
<Path.Data>
<!-- Describes an ellipse. -->
<EllipseGeometry x:Name="MyAnimatedEllipseGeometry"
Center="20,20" RadiusX="15" RadiusY="15" />
</Path.Data>
</Path>
<StackPanel Orientation="Horizontal" Canvas.Left="10" Canvas.Top="265">
<!-- Button that begins animation. -->
<Button Click="Animation_Begin"
Width="65" Height="30" Margin="2" Content="Begin" />
<!-- Button that pauses Animation. -->
<Button Click="Animation_Pause"
Width="65" Height="30" Margin="2" Content="Pause" />
<!-- Button that resumes Animation. -->
<Button Click="Animation_Resume"
Width="65" Height="30" Margin="2" Content="Resume" />
<!-- Button that stops Animation. Stopping the animation returns the
ellipse to its original location. -->
<Button Click="Animation_Stop"
Width="65" Height="30" Margin="2" Content="Stop" />
</StackPanel>
</Canvas>
</StackPanel>
</UserControl>
C#代码：
privatevoid Animation_Begin(objectsender, RoutedEventArgs e)
{
myStoryboard.Begin();
}
private voidAnimation_Pause(object sender, RoutedEventArgs e)
{
myStoryboard.Pause();
}
privatevoid Animation_Resume(objectsender, RoutedEventArgs e)
{
myStoryboard.Resume();
}
privatevoid Animation_Stop(objectsender, RoutedEventArgs e)
{
myStoryboard.Stop();
}
控制动画的开始时间:
Storyboard 以及所有其他动画对象（DoubleAnimation、DoubleAnimationUsingKeyFrames、ColorAnimation 等）从 Timeline 类继承。Timeline 类授予很多有用的属性给这些动画对象，其中包括 BeginTime 属性。顾名思义，使用 BeginTime 属性可以指定动画对象活动开始点的时间。例如，可以对 Storyboard 的 BeginTime 指定两秒时间。当使用Begin 方法开始Storyboard 时，Storyboard 将等待两秒钟，然后再开始。此外，可以指定Storyboard 内的动画对象的BeginTime。例如，如果我们有一个 BeginTime 为两秒钟的Storyboard，此 Storyboard 包含两个DoubleAnimation 对象（一个未指定 BeginTime，另一个的BeginTime 为三秒钟），则第一个DoubleAnimation 将在对 Storyboard 调用 Begin 方法之后的两秒钟启动，第二个 DoubleAnimation 将在调用该方法之后的五秒钟启动（Storyboard 的两秒钟延迟加上 DoubleAnimation 的三秒钟延迟）。下面的示例显示如何执行此项操作。
<StackPanel>
<StackPanel.Resources>
<Storyboard BeginTime="0:0:2" x:Name="myStoryboard">
<DoubleAnimation
Storyboard.TargetName="MyAnimatedRectangle"
Storyboard.TargetProperty="Width"
To="300" Duration="0:0:1"/>
<DoubleAnimation BeginTime="0:0:3"
Storyboard.TargetName="MyAnimatedRectangle"
Storyboard.TargetProperty="Opacity"
To="0" Duration="0:0:1"/>
</Storyboard>
</StackPanel.Resources>
<Rectangle x:Name="MyAnimatedRectangle"
Loaded="Start_Animation"
Width="100" Height="100" Fill="Blue" />
</StackPanel>
</StackPanel>
C#:
privatevoid Start_Animation(objectsender, EventArgs e)
{
myStoryboard.Begin();
}
可以考虑将 Storyboard 作为其他动画对象（例如DoubleAnimation）以及其他 Storyboard 对象的容器。即可以在Storyboard 对象中嵌套该对象并分别为每个Storyboard 指定BeginTime 值。使用嵌套的演示图板可帮助我们安排精心设计的动画序列。每个子Storyboard 都会在其父Storyboard 开始前等待，然后在再次开始前开始倒计时。
在程序代码中创建动画
除了使用 XAML，也可以完全在程序代码（如 C# 或 Visual Basic）中创建动画。下面的示例演示如何创建一个动画，在其中用动画播放 Rectangle 的 Canvas..::..Top 和 Canvas..::..Left 附加属性。
private void Create_And_Run_Animation(object sender, EventArgs e)
{
RectanglemyRectangle = new Rectangle();
myRectangle.Width = 200;
myRectangle.Height = 200;
ColormyColor = Color.FromArgb(255, 255, 0, 0);
SolidColorBrushmyBrush = new SolidColorBrush();
myBrush.Color = myColor;
myRectangle.Fill = myBrush;
LayoutRoot.Children.Add(myRectangle);
Durationduration = new Duration(TimeSpan.FromSeconds(2));
DoubleAnimationmyDoubleAnimation1 = new DoubleAnimation();
DoubleAnimationmyDoubleAnimation2 = new DoubleAnimation();
myDoubleAnimation1.Duration =duration;
myDoubleAnimation2.Duration =duration;
Storyboardsb = new Storyboard();
sb.Duration = duration;
sb.Children.Add(myDoubleAnimation1);
sb.Children.Add(myDoubleAnimation2);
Storyboard.SetTarget(myDoubleAnimation1,myRectangle);
Storyboard.SetTarget(myDoubleAnimation2,myRectangle);
Storyboard.SetTargetProperty(myDoubleAnimation1,new PropertyPath("(Canvas.Left)"));
Storyboard.SetTargetProperty(myDoubleAnimation2,new PropertyPath("(Canvas.Top)"));
myDoubleAnimation1.To = 200;
myDoubleAnimation2.To = 200;
LayoutRoot.Resources.Add("unique_id", sb);
sb.Begin();
}
注意：不要在页面的构造函数中调用 Storyboard 方法，如 Begin。这将导致动画失败，且无任何提示。
来说一说动画类型：
除了我们上面使用的DoubleAnimation类型，Silverlight 还提供其他几种动画对象。由于动画生成属性值，因此对于不同的属性类型，会有不同的动画类型。若要对采用Double 值的属性（例如元素的Width 属性）进行动画处理，请使用生成Double 值（DoubleAnimation）的动画。若要对采用 Point 值的属性进行动画处理，请使用生成Point 值（如PointAnimation 等）的动画。
Silverlight提供两大类动画类型，From/To/By 动画和关键帧动画。
|
类别 |
说明 |
命名约定 |
|
From/To/By 动画 |
在起始值和结束值之间进行动画处理： u 若要指定起始值，请设置动画的 From 属性。 u 若要指定结束值，请设置动画的 To 属性。 u 若要指定相对于起始值的结束值，请设置动画的 By 属性（而不是 To 属性）。 上面的例子中使用这些动画，因为这些动画最容易实现。 |
typeAnimation |
|
关键帧动画 |
在使用关键帧对象指定的一系列值之间播放动画。关键帧动画的功能比 From/To/By 动画的功能更强大，因为我们可以指定任意多个目标值，甚至可以控制它们的插值方法。 |
typeAnimationUsingKeyFrames |
列出一些常用动画类型以及这些类型一直使用的一些属性。
|
属性类型 |
对应的基本 (From/To/By) 动画 |
对应的关键帧动画 |
用法示例 |
|
Color |
ColorAnimation |
ColorAnimationUsingKeyFrames |
对 SolidColorBrush 或 GradientStop 的 Color 进行动画处理。 |
|
Double |
DoubleAnimation |
DoubleAnimationUsingKeyFrames |
对 Rectangle 的 Width 或 Ellipse 的 Height（或任意 FrameworkElement）进行动画处理。 |
|
Point |
PointAnimation |
PointAnimationUsingKeyFrames |
对 EllipseGeometry 的 Center 位置进行动画处理。 |
|
Object |
无 |
ObjectAnimationUsingKeyFrames |
对 Fill 属性进行动画处理，使其在不同的 GradientBrush 之间进行转换。 |
动画是时间线：
所有动画均继承自Timeline对象，因此所有动画都是专用类型的时间线。Timeline 定义时间段。我们可以指定时间线的以下"计时行为"：其 Duration 和重复次数，甚至可以为时间线指定时间走得多快。
因为动画是Timeline，所以它还表示一个时间段。在动画的指定时间段（即Duration）内运行动画时，动画会计算输出值。在运行或"播放"动画时，动画将更新与其关联的属性。
Duration、AutoReverse 和 RepeatBehavior 是三个常用的计时属性。
Duration 属性
时间线（以及继承自时间线的动画）表示一个时间段。该时间段的长度由时间线的 Duration 属性（通常用TimeSpan 值指定）来决定。当时间线达到其持续时间的终点时，表示时间线完成了一次重复。
动画使用其 Duration 属性来确定其当前值。如果没有为动画指定 Duration 值，它将使用默认值（1 秒）。
下面的语法显示了 Duration 属性 (Property) 的XAML 属性 (Attribute) 语法的简化版本。
|
小时 : 分钟 : 秒 |
下表显示了一些 Duration 设置及其结果值。
|
设置 |
所得值 |
|
0:0:5.5 |
5.5 秒。 |
|
0:30:5.5 |
30 分 5.5 秒。 |
|
1:30:5.5 |
1 小时 30 分 5.5 秒。 |
AutoReverse 属性
AutoReverse 属性指定时间线在到达其Duration 的终点后是否倒退。如果将此动画属性设置为true，则动画在到达其 Duration 的终点后将倒退，即从其终止值向其起始值反向播放。默认情况下，该属性为false。
RepeatBehavior 属性
RepeatBehavior 属性指定时间线的播放次数。默认情况下，时间线的重复次数为1.0，即播放一次时间线，不进行重复。
对属性应用动画:
Storyboard 对象提供了对属性应用动画的一种方法。Storyboard 是一个为其所包含的动画提供目标信息的容器时间线。
Storyboard 类提供 TargetName 和 TargetProperty 附加属性。通过在动画上设置这些属性，我们将告诉动画对哪些内容进行动画处理。不过，在动画以对象作为处理目标之前，必须使用x:Name 属性为该对象提供一个名称，否则必须间接以属性作为目标。下面的示例演示如何间接以属性作为目标。
<StackPanel x:Name="myStackPanel" Background="Red"
Loaded="Start_Animation">
<StackPanel.Resources>
<Storyboard x:Name="colorStoryboard">
<ColorAnimation BeginTime="00:00:00" Storyboard.TargetName="myStackPanel"
Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)"
From="Red" To="Green" Duration="0:0:4"/>
</Storyboard>
</StackPanel.Resources>
</StackPanel>
请注意，正在进行动画处理的属性值 (Color) 属于未命名甚至未显式声明的 SolidColorBrush 对象。此间接目标是使用下面的特殊语法完成的。
|
|
|
|
Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)" |
|
或者，可以显式创建 SolidColorBrush，对其进行命名，然后直接以其 Color 属性为目标。下面的示例演示如何创建与前面的示例相同的动画，但是使用直接属性目标。
|
|
|
|
<StackPanel Loaded="Start_Animation"> <StackPanel.Resources> <Storyboard x:Name="colorStoryboard"> <ColorAnimation BeginTime="00:00:00" Storyboard.TargetName="mySolidColorBrush" Storyboard.TargetProperty="Color" From="Red" To="Green" Duration="0:0:4" /> </Storyboard> </StackPanel.Resources>
<StackPanel.Background> <SolidColorBrush x:Name="mySolidColorBrush" Color="Red" /> </StackPanel.Background>
</StackPanel> |
|
动画结束后会发生什么情况
FillBehavior 属性指定时间线结束时的行为方式。此属性的默认值为HoldEnd，表示在动画结束后，进行动画处理的对象将保持其最终值。例如，如果对 Rectangle 的 Opacity 属性进行动画处理，使其在 2 秒内从 1 转换为 0，该矩形的默认行为是：在 2 秒后保持不透明度为 0 的状态。如果将 FillBehavior 设置为 Stop，该矩形的不透明度将在动画结束后还原为初始值 1
本来还想介绍一些缓动函数的内容。但这部分我有些也没有很确切的搞懂，所以没贴出来。
以后会专门介绍”缓动函数”。我在word里编辑着代码是有颜色的，而且排版得也很好的。但是一贴进来就变成这样了。乱七八糟，非常影响阅读。哎。
