방법: 애니메이션 반복
업데이트: 2007년 11월
이 예제에서는 Timeline의 RepeatBehavior 속성을 사용하여 애니메이션의 반복 동작을 제어하는 방법을 보여 줍니다.
예제
Timeline 컨트롤의 RepeatBehavior 속성을 사용하여 애니메이션이 단순 지속 시간을 반복할 횟수를 제어합니다. RepeatBehavior를 사용하면 특정 횟수(반복 횟수)만큼 또는 지정한 시간 간격 동안 Timeline이 반복되도록 지정할 수 있습니다. 두 경우 모두 애니메이션은 요청된 횟수 또는 기간이 충족될 때까지 처음부터 끝까지 반복 실행됩니다.
기본적으로 Timeline의 반복 횟수는 1.0이며 이 경우 한 번만 재생되고 반복되지 않습니다. 하지만 Timeline의 RepeatBehavior 속성을 Forever로 설정하면 Timeline이 무한 반복됩니다.
다음 예제에서는 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>
전체 샘플을 보려면 애니메이션 타이밍 동작 샘플을 참조하십시오.