Silverlight - 动画
动画允许您创建真正的动态用户界面。 它通常用于应用效果，例如，当您在图标上移动时会变大的图标、旋转的徽标、滚动到视图中的文本等等。
有时，这些效果看起来过于浮华。 如果使用得当，动画可以通过多种方式增强应用程序。 它们可以使应用程序看起来响应更快、更自然、更直观。
例如，单击时滑入的按钮感觉就像一个真实的物理按钮，而不仅仅是另一个灰色矩形。 动画还可以引起人们对重要元素的注意，并引导用户过渡到新内容。
Silverlight 的动画方法是声明性的，而不是专注于帧动画序列。
定义动画
动画通常在资源部分中定义。 事实上，它们通常包含在故事板元素中，我们很快就会详细看到。
它提供了一个 Begin() 方法，因此可以从代码中调用动画。
动画也可以放置在控件模板的视觉状态元素内。
声明式动画
Silverlight 中的动画是声明性的。 他们描述了希望发生的事情。 让 Silverlight 来决定如何实现这一点。 因此动画通常遵循我们告诉 Silverlight 我们想要更改的内容的模式。
这始终是某些命名元素的某些属性，即 TargetName 和 TargetProperty。
<DoubleAnimation Storyboard.TargetName = "myRectangle" Storyboard.TargetProperty = "Opacity" From = "0" To = "1" Duration = "0:0:5" />
我们说我们希望如何改变该属性，在这种情况下，我们将不透明度从零值更改为一值。 换句话说，我们希望目标元素从不透明渐变为透明。
最后，我们说我们希望这需要多长时间，在本例中需要五秒钟。
此双精度动画中双精度的重要性在于，它的目标是双精度类型的属性，因此是浮点值。
如果您想要为代表颜色的属性设置动画，则可以使用颜色动画。
让我们看一个简单的双动画示例。 下面给出的是 XAML 代码，其中添加了两个按钮、一个矩形和两个故事板。
<UserControl x:Class = "DoubleAnimationExample.MainPage"
xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d = "http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc = "http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable = "d" d:DesignWidth = "640" d:DesignHeight = "480">
<UserControl.Resources>
<Storyboard x:Name = "fadeDown">
<DoubleAnimation
Storyboard.TargetName = "myRectangle"
Storyboard.TargetProperty = "Opacity"
From = "1" To = "0"
Duration = "0:0:5" />
</Storyboard>
<Storyboard x:Name = "fadeUp">
<DoubleAnimation
Storyboard.TargetName = "myRectangle"
Storyboard.TargetProperty = "Opacity"
From = "0" To = "1"
Duration = "0:0:5" />
</Storyboard>
</UserControl.Resources>
<Grid x:Name = "LayoutRoot">
<Rectangle x:Name = "myRectangle"
Fill = "Blue" Width = "300" Height = "100"
HorizontalAlignment = "Center"
VerticalAlignment = "Top" Margin = "0,30" />
<Button x:Name = "fadeUpButton" Content = "Up" Width = "80"
Height = "30" HorizontalAlignment = "Left"
VerticalAlignment = "Top" Margin = "50,140,0,0"
Click = "fadeUpButton_Click" />
<Button x:Name = "fadeDownButton" Content = "Down"
Width = "80" Height = "30" HorizontalAlignment = "Left"
VerticalAlignment = "Top" Margin = "50,180,0,0"
Click = "fadeDownButton_Click" />
</Grid>
</UserControl>
以下是 C# 中不同事件的实现。
using System.Windows;
using System.Windows.Controls;
namespace DoubleAnimationExample {
public partial class MainPage : UserControl {
public MainPage() {
InitializeComponent();
}
private void fadeUpButton_Click(object sender, RoutedEventArgs e) {
fadeUp.Begin();
}
private void fadeDownButton_Click(object sender, RoutedEventArgs e) {
fadeDown.Begin();
}
}
}
编译并执行上述代码后，您将看到以下输出。
重复和反转
动画提供一些属性来自动重复和所有反向动画。
如果您将重复行为属性设置为时间垃圾，动画将循环重复，直到指定的时间过去，或者您可以告诉它您希望它重复多少次。
李>它支持小数点，因此您可以重复四次半。
您可以永远重复，也可以告诉动画一旦到达结尾，它应该反向运行回到开头。
关键帧动画
通常，从 A 到 B 的简单动画有点过于简单。 例如，您想要制作从地面弹起的球的动画。 这不是简单的点对点运动。 球下降，逐渐加速，然后在到达底部时反转方向。 当它回到行程的最高点时再次减速。
让我们看一下关键帧动画的简单示例。
下面给出的是 XAML 代码，其中包含带有关键帧的椭圆和双动画。
<UserControl x:Class = "LinearKeyFrames.MainPage"
xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d = "http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc = "http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable = "d"
Width = "400" Height = "300">
<UserControl.Resources>
<Storyboard x:Name = "ballAnim" SpeedRatio = "0.2">
<DoubleAnimation From = "0" Duration = "00:00:03" To = "96"
Storyboard.TargetName = "ellipse"
Storyboard.TargetProperty = "(Canvas.Left)" />
<DoubleAnimationUsingKeyFrames
Storyboard.TargetName = "ellipse"
Storyboard.TargetProperty = "(Canvas.Top)">
<LinearDoubleKeyFrame KeyTime = "00:00:00" Value = "0"/>
<LinearDoubleKeyFrame KeyTime = "00:00:00.5" Value = "16" />
<LinearDoubleKeyFrame KeyTime = "00:00:01" Value = "48"/>
<LinearDoubleKeyFrame KeyTime = "00:00:01.5" Value = "112"/>
<LinearDoubleKeyFrame KeyTime = "00:00:02" Value = "48"/>
<LinearDoubleKeyFrame KeyTime = "00:00:02.5" Value = "16"/>
<LinearDoubleKeyFrame KeyTime = "00:00:03" Value = "0"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</UserControl.Resources>
<Grid x:Name = "LayoutRoot" Background = "White">
<Canvas>
<Ellipse x:Name = "ellipse" Fill = "Aqua" Width = "50" Height = "50" />
</Canvas>
</Grid>
</UserControl>
这里是鼠标左键按下事件的实现，当用户在网页上按下鼠标左键时，该事件将开始动画。
using System.Windows.Controls;
using System.Windows.Input;
namespace LinearKeyFrames {
public partial class MainPage : UserControl {
public MainPage() {
InitializeComponent();
this.MouseLeftButtonDown += new MouseButtonEventHandler(Page_MouseLeftButtonDown);
}
void Page_MouseLeftButtonDown(object sender, MouseButtonEventArgs e) {
ballAnim.Begin();
}
}
}
编译并执行上述代码后，您将看到以下输出。
当您单击网页时，您会看到球开始移动。
