Практическое руководство. Повторение анимации
В этом примере показано использование свойства RepeatBehavior Timeline для управления повторением анимации.
Пример
Свойство RepeatBehavior Timeline определяет, сколько раз будет повторяться анимация. С помощью RepeatBehavior можно указать, что Timeline будет повторяться определенное число раз (итераций) или в течение указанного периода времени. В любом случае анимация осуществляет столько проходов от начала до конца, сколько требуется для выполнения запрошенного числа повторений или длительности.
По умолчанию временные шкалы имеют число повторений, равное 1.0. Это означает, что они воспроизводятся один раз и не повторяются. Тем не менее, если установить свойство RepeatBehavior элемента Timeline в значение 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>
Полный код примера см. на веб-странице Пример поведения анимации во времени.
См. также
Задачи
Практическое руководство. Накапливание значений анимации в повторяющихся циклах
Практическое руководство. Определение автоматического реверса для шкалы времени
Основные понятия
Общие сведения об эффектах анимации