如何:为已经到达有效期末尾的时间线指定 FillBehavior
更新:2007 年 11 月
此示例演示如何为动画属性的非活动 Timeline 指定 FillBehavior。
示例
Timeline 的 FillBehavior 属性决定了在未对动画属性的值进行动画处理时,即在 Timeline 处于非活动状态但其父 Timeline 在其活动或保持期内时,动画属性的值会发生什么情况。例如,动画结束后动画属性是仍然保留其结束值,还是恢复为动画开始之前所具有的值?
下面的示例使用 DoubleAnimation 对两个矩形的 Width 进行动画处理。每个矩形都使用不同的 Timeline 对象。
一个 Timeline 具有设置为 Stop 的 FillBehavior,因此,在 Timeline 结束时矩形的宽度将恢复为未经过动画处理的值。另一个 Timeline 具有 HoldEnd 的 FillBehavior,因此,在 Timeline 结束时,宽度将保留为其结束值。
<Page
xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml" >
<StackPanel Margin="20">
<Border Background="#99FFFFFF">
<TextBlock Margin="20">
This example shows how the FillBehavior property determines how an animation behaves
after it reaches the end of its duration.
</TextBlock>
</Border>
<TextBlock>FillBehavior="Deactivate"</TextBlock>
<Rectangle Name="deactiveAnimationRectangle" Width="20" Height="20" Fill="#AA3333FF" HorizontalAlignment="Left" >
<Rectangle.Triggers>
<EventTrigger RoutedEvent="Rectangle.Loaded">
<BeginStoryboard>
<Storyboard>
<!-- The animated rectangle's width reverts back to its non-animated value
after the animation ends. -->
<DoubleAnimation
Storyboard.TargetName="deactiveAnimationRectangle"
Storyboard.TargetProperty="Width"
From="100" To="400" Duration="0:0:2" FillBehavior="Stop" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Rectangle.Triggers>
</Rectangle>
<TextBlock Margin="0,20,0,0">FillBehavior="HoldEnd" </TextBlock>
<Rectangle Name="holdEndAnimationRectangle" Width="20" Height="20" Fill="#AA3333FF" HorizontalAlignment="Left" >
<Rectangle.Triggers>
<EventTrigger RoutedEvent="Rectangle.Loaded">
<BeginStoryboard>
<Storyboard>
<!-- The animated rectangle's width remains at its end value after the
animation ends. -->
<DoubleAnimation Storyboard.TargetName="holdEndAnimationRectangle"
Storyboard.TargetProperty="Width"
From="100" To="400" Duration="0:0:2" FillBehavior="HoldEnd" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Rectangle.Triggers>
</Rectangle>
</StackPanel>
</Page>
有关完整示例,请参见 动画示例库。