通过

如何：重复动画

  • 项目

此示例演示如何使用 Timeline 的 RepeatBehavior 属性来控制动画的重复行为。

示例

Timeline 的 RepeatBehavior 属性控制动画重复其简单持续时间的次数。 通过使用 RepeatBehavior，可以指定 Timeline 重复一定次数（迭代计数）或在指定时间段内重复。 无论是哪一种情况，动画都将根据需要从头到尾运行很多次，以便完成要求的次数或经历完所需的一段时间。

默认情况下，时间线的重复计数为 1.0，即播放一次时间线，不进行重复。 但是，如果将 Timeline 的 RepeatBehavior 属性设置为 Forever，则时间线将无限重复。

以下示例演示如何使用 RepeatBehavior 属性来控制动画的重复行为。 该示例对五个矩形的 Width 属性进行动画处理，其中每个矩形使用不同类型的重复行为。

<!-- RepeatBehaviorExample.xaml
     This example shows how to use the RepeatBehavior property to make a timeline repeat. -->
<Page 
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  WindowTitle="RepeatBehavior Example">
  
  <Border HorizontalAlignment="Stretch">
    <StackPanel Margin="20">

      <!-- Create several rectangles to animate. -->
      <Rectangle Name="ForeverRepeatingRectangle" 
        Fill="Orange" Width="50" Height="20" />
      <Rectangle Name="FourSecondsRepeatingRectangle" 
        Fill="Orange" Width="50" Height="20" />
      <Rectangle Name="TwiceRepeatingRectangle" 
        Fill="Orange" Width="50" Height="20" />
      <Rectangle Name="HalfRepeatingRectangle" 
        Fill="Orange" Width="50" Height="20" />
      <Rectangle Name="OneSecondRepeatingRectangle" 
        Fill="Orange" Width="50" Height="20" />

    
      <!-- Create buttons to restart and stop the animations. -->
      <StackPanel Orientation="Horizontal" Margin="0,20,0,0">
        <Button Name="restartButton">Start Animations</Button>
        <Button Name="stopButton" Background="#669900FF">Stop</Button>
        
        <StackPanel.Triggers>
          <EventTrigger SourceName="restartButton" RoutedEvent="Button.Click">
            <BeginStoryboard Name="myBeginStoryboard">
              <Storyboard>
              
                <!-- Create an animation that repeats indefinitely. -->
                <DoubleAnimation 
                  Storyboard.TargetName="ForeverRepeatingRectangle" 
                  Storyboard.TargetProperty="Width" 
                  From="50" To="300" Duration="0:0:2" RepeatBehavior="Forever" />
          
                <!-- Create an animation that repeats for four seconds. As a result, the
                     animation repeats twice. -->          
                <DoubleAnimation 
                  Storyboard.TargetName="FourSecondsRepeatingRectangle" 
                  Storyboard.TargetProperty="Width"
                  From="50" To="300" Duration="0:0:2" RepeatBehavior="0:0:4" />

                <!-- Create an animation that repeats twice. -->
                <DoubleAnimation 
                  Storyboard.TargetName="TwiceRepeatingRectangle" 
                  Storyboard.TargetProperty="Width" 
                  From="50" To="300" Duration="0:0:2" RepeatBehavior="2x" />     
          
                <!-- Create an animation that repeats 0.5 times. The resulting animation
                     plays for one second, half of its Duration. It animates from 50 to 150. -->
                <DoubleAnimation 
                  Storyboard.TargetName="HalfRepeatingRectangle" 
                  Storyboard.TargetProperty="Width" 
                  From="50" To="300" Duration="0:0:2" RepeatBehavior="0.5x" />
          
                <!-- Create an animation that repeats for one second. The resulting animation
                     plays for one second, half of its Duration. It animates from 50 to 150. -->
                <DoubleAnimation 
                  Storyboard.TargetName="OneSecondRepeatingRectangle" 
                  Storyboard.TargetProperty="Width" 
                  From="50" To="300" Duration="0:0:2" RepeatBehavior="0:0:1" />          
              </Storyboard>
            </BeginStoryboard>
          </EventTrigger>        
          <EventTrigger SourceName="stopButton" RoutedEvent="Button.Click">
            <StopStoryboard BeginStoryboardName="myBeginStoryboard" />
          </EventTrigger>
        </StackPanel.Triggers>
      </StackPanel>
    </StackPanel>
  </Border>
</Page>

有关完整示例，请参阅动画计时行为示例。

另请参阅