How to: Specify Whether a Timeline Automatically Reverses
A timeline's AutoReverse property determines whether it plays in reverse after it completes a forward iteration. The following example shows several animations with identical duration and target values, but with different AutoReverse settings. To demonstrate how the AutoReverse property behaves with different RepeatBehavior settings, some animations are set to repeat. The last animation shows how the AutoReverse property works on nested timelines.
Example
<!-- AutoReverseExample.xaml
This example shows how to use the AutoReverse property to make a timeline
play backwards at the end of each iteration.
Several rectangles are animated by DoubleAnimations with
identical durations and target values, but with different
AutoReverse and RepeatBehavior settings.-->
<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
WindowTitle="AutoReverse Example">
<StackPanel Margin="20">
<!-- Create some rectangles to animate. -->
<Rectangle Name="withoutAutoReverseRectangle"
Width="100" Height="20" Fill="Blue" />
<Rectangle Name="autoReverseRectangle"
Width="100" Height="20" Fill="Blue" />
<Rectangle Name="autoReverseRectangleWithRepeats"
Width="100" Height="20" Fill="Blue" />
<Rectangle Name="complexAutoReverseExample"
Width="100" Height="20" Fill="Blue" />
<!-- Use a button to restart the animations. -->
<Button Margin="30" Content="Start Animations">
<Button.Triggers>
<EventTrigger RoutedEvent="Button.Click">
<BeginStoryboard>
<Storyboard>
<!-- Create an animation that does not automatically play in reverse.
This animation plays for a total of 2 seconds. -->
<DoubleAnimation
Storyboard.TargetName="withoutAutoReverseRectangle"
Storyboard.TargetProperty="Width"
Duration="0:0:2" From="100" To="400" AutoReverse="False" />
<!-- Create an animation that automatically reverses at the end of each iteration.
This animation plays for a total of 4 seconds. -->
<DoubleAnimation Storyboard.TargetName="autoReverseRectangle"
Storyboard.TargetProperty="Width"
Duration="0:0:2" From="100" To="400" AutoReverse="True" />
<!-- Create an animation that automatically reverses at the end of each iteration.
Set the animation to repeat twice. As a result, then animation plays forward,
the backward, then forward, and then backward again.
This animation plays for a total of 8 seconds. -->
<DoubleAnimation Storyboard.TargetName="autoReverseRectangleWithRepeats"
Storyboard.TargetProperty="Width"
Duration="0:0:2" From="100" To="400" AutoReverse="True" RepeatBehavior="2x" />
<!-- Set the parent timeline's AutoReverse property to True and set the animation's
RepeatBehavior to 2x. As a result, the animation plays forward twice and then
backwards twice.
This animation plays for a total of 8 seconds. -->
<ParallelTimeline AutoReverse="True">
<DoubleAnimation
Storyboard.TargetName="complexAutoReverseExample"
Storyboard.TargetProperty="Width"
Duration="0:0:2" From="100" To="400" RepeatBehavior="2x" />
</ParallelTimeline>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Button.Triggers>
</Button>
</StackPanel>
</Page>
التعاون معنا على GitHub
يمكن العثور على مصدر هذا المحتوى على GitHub حيث يمكنك أيضاً إضافة مشاكل وطلبات سحب ومراجعتها. للحصول على معلومات إضافية، اطلع على دليل المساهم لدينا.
.NET Desktop feedback