如何：針對已達到使用中週期結尾的時刻表指定 FillBehavior

  • 發行項

這個範例示範如何為 Timeline 動畫屬性的非使用中指定 FillBehavior 。

範例

的 FillBehaviorTimeline 屬性會決定動畫屬性的值未產生動畫效果時，也就是當 處於非作用中狀態，但其父 Timeline 系在其作用中或保留期間內時 Timeline ，會發生什麼情況。 例如，動畫屬性是否會在動畫結束之後維持在其結束值，還是會還原回動畫開始前的值？

下列範例會使用 DoubleAnimation 以動畫顯示 Width 兩個矩形的 。 每個矩形都會使用不同的 Timeline 物件。

其中一個 TimelineFillBehavior 設定為 Stop 的 ，這會導致矩形的寬度在結束時 Timeline 還原回其非動畫值。 另 Timeline 一個 FillBehavior 具有 的 HoldEnd ，這會導致寬度在結束時 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>

如需完整的範例，請參閱 動畫範例庫 。

另請參閱