通过

如何：为已经到达有效期末尾的时间线指定 FillBehavior

  • 项目

此示例演示如何为动画属性的非活动 Timeline 指定 FillBehavior。

示例

Timeline 的 FillBehavior 属性决定了当动画属性未处于动画状态，即当 Timeline 处于非活动状态但其父级 Timeline 处于活动状态或保持状态期间时，动画属性的值会发生什么变化。 例如，动画属性在动画结束时是否保持其结束值，还是还原为动画开始前的值？

以下示例使用 DoubleAnimation 为两个矩形的 Width 添加动画效果。 每个矩形都使用不同的 Timeline 对象。

一个 Timeline 具有一个设置为 Stop 的 FillBehavior，这将导致当 Timeline 结束时，矩形的宽度还原为其非动画值。 另一个 Timeline 具有一个设置为 HoldEnd 的 FillBehavior，这将导致当 Timeline 结束时，矩形宽度保持在其结束值。

<Page 
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
  xmlns:x="http://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>

有关完整示例，请参阅动画示例库。

另请参阅