Silverlight的动画是基于Timeline(时间线)的动画,继承于Timeline类,通过对对象的个别属性进行控制,可以达到对对象进行动画的处理。
动画类位于System.Windows.Media.Animation命名空间
Timeline(时间线): 可以声明动画在某段时间的开始和结束状态及动画的持续时间,并记录动画在此时间段内的顺序、状态以及行为。
Silverlight动画类型
1、关键帧动画:可以指定任意数量的目标值,并可以控制它们之间的内插方法。
2、From/To/By动画(线性插值动画):用来反映某个对象在指定时间段内持续渐变的过程。
Storyboard(故事板)
Storyboard(故事板)是Silverlight动画的基本单元,它用来分配动画时间,可以使用同一个故事板对象产生一种或多种动画效果,并且允许控制动画的播放、暂停、停止以及在何时何地播放。
使用故事板时,必须指定TargetProperty(目标属性)和TargetName(目标名称)属性,这两个属性把故事板和所有产生的动画效果衔接起来,起到了桥梁的作用,下面是一个完整的Storyboard动画代码:
<Storyboard>
<DoubleAnimation Storyboard.TargetName="ellipse1" Storyboard.TargetProperty="Width" From="150" To="300" Duration="0:0:3" />
</Storyboard>
EventTrigger(事件触发器)
当完成一个故事板定义并声明了动画类型之后,这个动画并不能在XAML页面加载后自动播放,因为并没有指定动画播放的开始事件,此时需要使用EventTrigger(事件触发器)对象,然后通过事件触发器播放BeginStoryboard故事板的动画效果,接下来将前面的示例加入到事件触发元素中,组成一个完整的播放动画。
XAML代码:
<UserControl
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
x:Class="Anim.MainPage"
Width="640" Height="480">
<Canvas Background="AliceBlue">
<Ellipse x:Name="ellipse1" Fill="GreenYellow"
Width="150" Height="200" />
<Canvas.Triggers>
<!--创建触发器-->
<EventTrigger RoutedEvent="Canvas.Loaded">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetName="ellipse1"
Storyboard.TargetProperty="Width"
From="150" To="300" Duration="0:0:3" />
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</Canvas.Triggers>
</Canvas>
</UserControl>
在上面的代码声明了一个Canvas.Triggers(触发器),然后声明RoutedEvent(事件通道)为Canvas.Loaded(当Canvas加载完成后触发的事件)。EventTrigger.Actions(事件行为)包含了BeginStoryboard,用来开始播放故事板里的动画对象。简而言之,就是当这个XAML的画布加载完成就立刻播放故事板包含的动画效果。
除了在XAML代码中使用EventTrigger播放动画外,还可以将故事板包括在Resources(资源元素)内,在后台代码中引用故事板的x:Name,然后使用Begin方法来播放动画。
XAML代码:
<UserControl
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
x:Class="Anim.MainPage"
Width="640" Height="480">
<!--将Storyboard包含在Resources内-->
<UserControl.Resources>
<Storyboard x:Name="storyboard1">
<DoubleAnimation
Storyboard.TargetName="ellipse1"
Storyboard.TargetProperty="Width"
From="150" To="300" Duration="0:0:3" />
</Storyboard>
</UserControl.Resources>
<Canvas Background="AliceBlue">
<Ellipse x:Name="ellipse1" Fill="GreenYellow" Width="150" Height="200" />
</Canvas>
</UserControl>
C#代码:
namespace Anim
{
public partial class MainPage : UserControl
{
public MainPage()
{
// 为初始化变量所必需
InitializeComponent();
// 使用Begin方法播放动画
storyboard1.Begin();
}
}
}