如何:重复动画

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

示例

TimelineRepeatBehavior 属性控制动画重复其简单期间的次数。 通过使用 RepeatBehavior,您可以指定让 Timeline 重复一定的次数(重复次数)或在指定的一段时间内发生重复。 无论是哪一种情况,动画都将从头到尾地不断运行,直到完成要求的次数或经历完所需的一段时间。

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

下面的示例演示如何使用 RepeatBehavior 属性控制动画的重复行为。 此示例对五个矩形的 Width 属性进行动画处理,每个矩形使用了不同类型的重复行为。

<!-- RepeatBehaviorExample.xaml
     This example shows how to use the RepeatBehavior property to make a timeline repeat. -->
<Page 
  xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation" 
  xmlns:x="https://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>

有关完整示例,请参见 Animation Timing Behavior Sample(动画计时行为示例)。

请参见

任务

如何:在重复循环过程中累积动画值

如何:指定时间线是否自动反转

概念

动画概述

其他资源

动画和计时帮助主题

动画和计时

Animation Timing Behavior Sample