HOW TO:重複動畫
本範例說明如何使用 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="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>
如需完整範例,請參閱動畫計時行為範例 (英文)。