WPF中的动画
周银辉
动画无疑是WPF中最吸引人的特色之一，其可以像Flash一样平滑地播放并与程序逻辑进行很好的交互。这里我们讨论一下故事板。
在WPF中我们采用Storyboard（故事板）的方式来编写动画，为了对Storyboard有个大概的印象，你可以粘贴以下代码到XamlPad来查看效果：
<!--
This example shows how to animate with a storyboard.
-->
<
Page
xmlns
="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x
="http://schemas.microsoft.com/winfx/2006/xaml"
WindowTitle
="Storyboards Example"
>
<
StackPanel
Margin
="20"
>
<
Rectangle
Name
="MyRectangle"
Width
="100"
Height
="100"
>
<
Rectangle
.Fill
>
<
SolidColorBrush
x:Name
="MySolidColorBrush"
Color
="Blue"
/>
</
Rectangle.Fill
>
<
Rectangle
.Triggers
>
<
EventTrigger
RoutedEvent
="Page.Loaded"
>
<
BeginStoryboard
>
<
Storyboard
RepeatBehavior
="Forever"
AutoReverse
="True"
>
<
DoubleAnimation
Storyboard.TargetName
="MyRectangle"
Storyboard.TargetProperty
="Width"
From
="100"
To
="200"
Duration
="0:0:1"
/>
</
Storyboard
>
</
BeginStoryboard
>
</
EventTrigger
>
</
Rectangle.Triggers
>
</
Rectangle
>
</
StackPanel
>
</
Page
>
在介绍Storyboard之前应该先了解Animation
Animation提供一种简单的“渐变”动画，我们为一个Animation指定开始值和一个结束值，并指定由开始值到达结束值所需的时间，便可形成一个简单的动画。比如我们指定长方形的宽度由100变化到200，所需时间为1秒，很容易想像这样的动画是什么样的，而它对应的Xaml代码如下：
<
DoubleAnimation
Storyboard.TargetName
="MyRectangle"
Storyboard.TargetProperty
="Width"
From
="100"
To
="200"
Duration
="0:0:1"
/>
DoubleAnimation myDoubleAnimation
=
new
DoubleAnimation(); myDoubleAnimation.From
=
100
; myDoubleAnimation.To
=
200
; myDoubleAnimation.Duration
=
new
Duration(TimeSpan.FromSeconds(
1
)); Storyboard.SetTargetName(myDoubleAnimation, myRectangle.Name); Storyboard.SetTargetProperty(myDoubleAnimation,
new
PropertyPath(Rectangle.WidthProperty));
代码里我们定义了一个DoubleAnimation，并指定了它的开始值和结束值以及它由开始值到达结束值所需的时间。至于后面两句，它们是用来将Aniamtion与指定的对象和指定的属性相关联，等会我们将介绍。
注意到，这里我们使用的是DoubleAnimation，因为我们所要变化的是数值。那么如果我们要变化颜色是不是就用ColorAnimation了呢，对，其实出了这些之外还有PointAnimation等等，并且你可以实现IAnimatable接口来实现自定义版本的Animation。关于这些你可以参见System.Windows.MediaAniamtion名字空间.
但值得注意的是并非每个属性都能够使用Animation，它必须满足以下条件：
1,它必须是Dependency Property
2,它所在类必须继承于DependencyObject,必须实现了IAnimatable接口.
3,必须有类型一致的Animation Type（即Color类型使用ColorAniamtion，Point类型使用PointAnimation等）
一个简单的Animation定义了一个简单的动画，很容易想到的是，如果若干个Animation同时作用于一个对象，那么这个对象不就可以表现复杂的动画了吗，对，这就是Storyboard
Storyboard可以看做是Animation的容器，它包含了若干的简单动画来完成一个复杂动画。
参考以下代码：
<!--
This example shows how to animate with a storyboard.
-->
<
Page
xmlns
="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x
="http://schemas.microsoft.com/winfx/2006/xaml"
WindowTitle
="Storyboards Example"
>
<
StackPanel
Margin
="20"
>
<
Rectangle
Name
="MyRectangle"
Width
="100"
Height
="100"
>
<
Rectangle
.Fill
>
<
SolidColorBrush
x:Name
="MySolidColorBrush"
Color
="Blue"
/>
</
Rectangle.Fill
>
<
Rectangle
.Triggers
>
<
EventTrigger
RoutedEvent
="Page.Loaded"
>
<
BeginStoryboard
>
<
Storyboard
RepeatBehavior
="Forever"
AutoReverse
="True"
>
<
DoubleAnimation
Storyboard.TargetName
="MyRectangle"
Storyboard.TargetProperty
="Width"
From
="100"
To
="200"
Duration
="0:0:1"
/>
<
ColorAnimation
Storyboard.TargetName
="MySolidColorBrush"
Storyboard.TargetProperty
="Color"
From
="Blue"
To
="Red"
Duration
="0:0:1"
/>
</
Storyboard
>
</
BeginStoryboard
>
</
EventTrigger
>
</
Rectangle.Triggers
>
</
Rectangle
>
</
StackPanel
>
</
Page
>
这里我们的Storyboard定义了DoubleAnimation来变化矩形的宽度，并定义了ColorAnimation来变化矩形的颜色。
至此,你已经可以编写绚丽的WPF动画了,并推荐你下载Expression Blend来制作WPF动画.
但你会发现使用XAML标记的方式来编写动画虽然很简单,但缺乏了C#等程序设计语言的灵活性,比如我们的矩形动画中矩形的宽度是由后台逻辑计算出来的变量值,我们的动画将如何编写呢,这时我更喜欢使用C#的方式来编写动画,虽然这所需的代码量更大.
以下重点介绍如何用C#编写动画，并且这更助于你理解Storyboard是如何工作的。
参考以下代码：
myRectangle.Name = " MyRectangle " ;
NameScope.SetNameScope( this , new NameScope());
this .RegisterName(myRectangle.Name, myRectangle);
DoubleAnimation myDoubleAnimation = new DoubleAnimation();
myDoubleAnimation.From = 100 ;
myDoubleAnimation.To = 200 ;
myDoubleAnimation.Duration = new Duration(TimeSpan.FromSeconds( 1 ));
Storyboard.SetTargetName(myDoubleAnimation, myRectangle.Name);
Storyboard.SetTargetProperty(myDoubleAnimation, new PropertyPath(Rectangle.WidthProperty));
Storyboard myStoryboard = new Storyboard();
myStoryboard.Children.Add(myDoubleAnimation);
this .Loaded += delegate ( object sender, MouseEventArgs e)
{
myStoryboard.Begin( this );
};
DoubleAnimation myDoubleAnimation = new DoubleAnimation();
myDoubleAnimation.From = 100;
myDoubleAnimation.To = 200;
myDoubleAnimation.Duration = new Duration(TimeSpan.FromSeconds(1));
定义了一个DoubleAniamtion,并指定了它的开始值和结束值以及所需的时间.
Storyboard.SetTargetName(myDoubleAnimation, myRectangle.Name);设置myDoubleAniamtion的作用对象是"myRectangle",注意到传入的第二个参数是一个字符串myRectangle.Name,那么我们的程序怎么知道"myRectangle"这个字符串就是指我们的矩形对象myRectangle呢,这里存在一个名称与对象的映射,即我们的"myRectangle"映射到矩形对象myRectangle,为了构造这个映射我们涉及到了NameScope(名字域)这个概念.
NameScope.SetNameScope(this, new NameScope());
this.RegisterName(myRectangle.Name, myRectangle);
上面的代码中,this设置了一个名字域,myRectagle向这个名字域注册了自己的名字,这样我们的程序就可以通过this的名字域来查找到myRectangle与"myRectangle"之间的映射关系了,关于NameScope可以参见MSDN WPF Namescopes主题.
为了让myDoubleAnimation知道它所作用的属性是谁,我们使用Storyboard.SetTargetProperty(myDoubleAnimation, new PropertyPath(Rectangle.WidthProperty));语句来将Aniamtion与属性关联起来,其中PropertyPath中指定要作用的对象所对应的DependencyProperty.
然后我们将定义好的myDoubleAniamtion添加到myStoryboard的Children中去.最后就可以通过调用Storyboard的Begin(FrameworkElement)方法来开始我们的动画.
Begin方法的另一个重载形式是public
至此也许我们会认为这些知识足以应付简单的动画了,现在让我们一起设计一个简单的动画,也许会发现些问题.
假设我们的界面中存在一个Button对象button1,我们设计一个简单的动画让它在窗口中的x坐标从0连续变化到100,然后在从100变化到0,如此重复.也许我们会编写如下的代码:
this .Name = " window1 " ;
NameScope.SetNameScope( this , new NameScope());
this .RegisterName( this .button1.Name, this .button1);
DoubleAnimation xAnimation = new DoubleAnimation();
xAnimation.From = 0 ;
xAnimation.To = 100 ;
xAnimation.Duration = new Duration(TimeSpan.FromSeconds( 1 ));
Storyboard story = new Storyboard();
story.AutoReverse = true ;
story.RepeatBehavior = RepeatBehavior.Forever;
story.Children.Add(xAnimation);
Storyboard.SetTargetName(xAnimation, this .button1.Name);
Storyboard.SetTargetProperty(xAnimation, ??? );
参考下面的代码:
{
Button.RenderTransformProperty,
TranslateTransform.XProperty
};
Storyboard.SetTargetProperty(xAnimation, new PropertyPath( " (0).(1) " , propertyChain));
这样我们的代码就演化如下:
this .button1.Name = " button1 " ;
this .Name = " window1 " ;
NameScope.SetNameScope( this , new NameScope());
this .RegisterName( this .button1.Name, this .button1);
DoubleAnimation xAnimation = new DoubleAnimation();
xAnimation.From = 0 ;
xAnimation.To = 100 ;
xAnimation.Duration = new Duration(TimeSpan.FromSeconds( 1 ));
DependencyProperty[] propertyChain = new DependencyProperty[]
{
Button.RenderTransformProperty,
TranslateTransform.XProperty
};
Storyboard story = new Storyboard();
story.AutoReverse = true ;
story.RepeatBehavior = RepeatBehavior.Forever;
story.Children.Add(xAnimation);
Storyboard.SetTargetName(xAnimation, this .button1.Name);
Storyboard.SetTargetProperty(xAnimation, new PropertyPath( " (0).(1) " , propertyChain));
story.Begin( this );
更多的,请参见Windows SDK "Storyboard Overview"
示例程序下载
