Storyboard是动画的集合。如果你使用了标记,所有的动画必须要被定义在一个Storyboard中。(在 代码中创建隔离的动画对象,这是可能的,参见本章后面部分。)一个动画的结构通常是不同于设置了动 画的UI的结构上。例如,你可能想要来两个单独的用户界面元素在同一时间被设置动画。因为Storyboard 将动画从有动画效果的对象中隔离出来,Storyboard是自由地反射这样的连接,即使这些元素被设置了对 象,可能被定义在完全不同的文件部分中。
示例8-15显示了包含了两个椭圆的用户界面的标记。
示例8-15
<Window Text="Two Animations" Width="420" Height="150"
xmlns="http://schemas.microsoft.com/winfx/avalon/2005"
xmlns:x="http://schemas.microsoft.com/winfx/xaml/2005">
<Window.Storyboards>
<ParallelTimeline>
<SetterTimeline TargetName="myEllipse" Path="(Ellipse.Width)">
<DoubleAnimation From="10" To="300" Duration="0:0:5"
RepeatBehavior="Forever" />
</SetterTimeline>
<SetterTimeline TargetName="myOtherEllipse" Path="(Ellipse.Width)">
<DoubleAnimation From="300" To="10" Duration="0:0:5"
RepeatBehavior="Forever" />
</SetterTimeline>
</ParallelTimeline>
</Window.Storyboards>
<StackPanel Orientation="Horizontal">
<Ellipse x:Name="myEllipse" Height="100" Fill="Red" />
<TextBlock>This is some text</TextBlock>
<Ellipse x:Name="myOtherEllipse" Height="100" Fill="Blue" />
</StackPanel>
</Window>
这些椭圆是互不邻近的,但是它们的宽度都以异步的方式设置了动画。这种异步被反射在Storyboard 的结构中:这两个动画都是内嵌在同样的ParallelTimeline元素中,指出了这些动画都在相同的时间运行 。一个从10到300的动画,另一个是从300到10,因此StackPanel中这三项的总宽度保持为恒定的。
Storyboard必须运行以三种位置中的一种。它们可以放置在Style中、ContentTemplate中、或者顶级 元素中。顶级元素是Window和Page,或者派生于此的类。
所有的用户界面元素都有一个Storyboard属性,继承于基类型FrameworkElement。你可能想这意味着 你可以添加一个Storyboard到任意一个元素。这于当前是不被支持的。Storyboard只会工作于:Style中 、ContentTemplate中、或者顶级元素中。