Gewusst wie: Sammeln von Animationswerten während Wiederholungszyklen
Aktualisiert: November 2007
In diesem Beispiel wird das Sammeln von Animationswerten aus verschiedenen Wiederholungszyklen mithilfe der IsCumulative-Eigenschaft veranschaulicht.
Beispiel
Verwenden Sie die IsCumulative-Eigenschaft, um Basiswerte einer Animation über sich wiederholende Zyklen hinweg zu sammeln. Wenn Sie beispielsweise eine Animation so erstellen, dass diese sich neun mal wiederholt (RepeatBehavior = “9x”) und für die Eigenschaft eine Animation zwischen 10 und 15 festlegen (From = 10 To = 15), wird die Eigenschaft im ersten Zyklus von 10 bis 15, im zweiten Zyklus von 15 bis 20, im dritten Zyklus von 20 bis 25 usw. animiert. Somit wird in jedem Animationszyklus der Endwert des vorherigen Animationszyklus als Basiswert verwendet.
Sie können die IsCumulative-Eigenschaft bei den meisten Basis- und Keyframe-Animationen verwenden. Weitere Informationen finden Sie unter Übersicht über Animationen und unter Übersicht über Keyframe-Animationen.
Im folgenden Beispiel wird dieses Verhalten veranschaulicht, indem die Breite von vier Rechtecken animiert wird. Beispiel:
Animiert das erste Rechteck mit DoubleAnimation und legt die IsCumulative-Eigenschaft auf true fest.
Animiert das zweite Rechteck mit DoubleAnimation und legt die IsCumulative-Eigenschaft auf den Standardwert false fest.
Animiert das dritte Rechteck mit DoubleAnimationUsingKeyFrames und legt die IsCumulative-Eigenschaft auf true fest.
Animiert das letzte Rechteck mit DoubleAnimationUsingKeyFrames und legt die IsCumulative-Eigenschaft auf false fest.
<Page
xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml">
<StackPanel Margin="20" >
<!-- This rectangle is animated with DoubleAnimation and IsCumulative set to "True". -->
<Rectangle Name="withIsCumulative"
Width="100" Height="20" Margin="12,0,0,5" Fill="#AA3333FF" HorizontalAlignment="Left" />
<!-- This rectangle is animated with DoubleAnimation and IsCumulative set to "False". -->
<Rectangle Name="withoutIsCumulative"
Width="100" Height="20" Margin="12,0,0,5" Fill="#AA3333FF" HorizontalAlignment="Left" />
<!-- This rectangle is animated with DoubleAnimationUsingKeyFrames and IsCumulative set to "True". -->
<Rectangle Name="withIsCumulativeUsingKeyFrames"
Width="100" Height="20" Margin="12,0,0,5" Fill="#AA3333FF" HorizontalAlignment="Left" />
<!-- This rectangle is animated with DoubleAnimationUsingKeyFrames and IsCumulative set to "False". -->
<Rectangle Name="withoutIsCumulativeUsingKeyFrames"
Width="100" Height="20" Margin="12,0,0,5" Fill="#AA3333FF" HorizontalAlignment="Left" />
<!-- Create a button to restart the animations. -->
<Button Margin="0,30,0,0" HorizontalAlignment="Left">
Restart Animations
<Button.Triggers>
<EventTrigger RoutedEvent="Button.Click">
<BeginStoryboard>
<Storyboard>
<!-- DoubleAnimation with IsCumulative set to "True". Because IsCumulative is set to "True",
the base values of the animation will accumulate over repeat cycles. In this example, the
first iteration will be from 100 to 200, the second will be from 200 to 300, the third from
300 to 400, etc. -->
<DoubleAnimation
Storyboard.TargetName="withIsCumulative"
Storyboard.TargetProperty="Width"
RepeatBehavior="4x"
AutoReverse="True"
IsCumulative="True"
Duration="0:0:3" From="100" To="200" />
<!-- DoubleAnimation with IsCumulative set to "False". The starting value 100 pixels and repeat
cycles do not build on earlier ones. -->
<DoubleAnimation
Storyboard.TargetName="withoutIsCumulative"
Storyboard.TargetProperty="Width"
RepeatBehavior="4x"
AutoReverse="True"
IsCumulative="False"
Duration="0:0:3" From="100" To="200" />
<!-- DoubleAnimationUsingKeyFrames with IsCumulative set to "True". Similar to the DoubleAnimation
above, the base value of each cycle builds on the last one. Note that the output value
is the total output value from all the key frames for a total output of 100 pixels. -->
<DoubleAnimationUsingKeyFrames
Storyboard.TargetName="withIsCumulativeUsingKeyFrames"
Storyboard.TargetProperty="Width"
RepeatBehavior="4x"
AutoReverse="True"
IsCumulative="True" >
<DoubleAnimationUsingKeyFrames.KeyFrames>
<LinearDoubleKeyFrame Value="100" KeyTime="0:0:0" />
<LinearDoubleKeyFrame Value="130" KeyTime="0:0:1" />
<SplineDoubleKeyFrame KeySpline="0.6,0.0 0.9,0.00" Value="200" KeyTime="0:0:3" />
</DoubleAnimationUsingKeyFrames.KeyFrames>
</DoubleAnimationUsingKeyFrames>
<!-- DoubleAnimationUsingKeyFrames with IsCumulative set to "False". The base value of each cycle
does not build on the last one. -->
<DoubleAnimationUsingKeyFrames
Storyboard.TargetName="withoutIsCumulativeUsingKeyFrames"
Storyboard.TargetProperty="Width"
RepeatBehavior="4x"
AutoReverse="True"
IsCumulative="False" >
<DoubleAnimationUsingKeyFrames.KeyFrames>
<LinearDoubleKeyFrame Value="100" KeyTime="0:0:0" />
<LinearDoubleKeyFrame Value="130" KeyTime="0:0:1" />
<SplineDoubleKeyFrame KeySpline="0.6,0.0 0.9,0.00" Value="200" KeyTime="0:0:3" />
</DoubleAnimationUsingKeyFrames.KeyFrames>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Button.Triggers>
</Button>
</StackPanel>
</Page>
Siehe auch
Aufgaben
Gewusst wie: Hinzufügen eines Animationsausgabewerts zu einem Animationsstartwert
Gewusst wie: Wiederholen einer Animation
Konzepte
Übersicht über Keyframe-Animationen