Freigeben über

Sammeln von Animationswerten während Wiederholungszyklen

  • Artikel

In diesem Beispiel wird gezeigt, wie Sie mithilfe der eigenschaft IsCumulative Animationswerte in wiederholten Zyklen ansammeln.

Beispiel

Verwenden Sie die eigenschaft IsCumulative, um Basiswerte einer Animation über wiederholte Zyklen hinweg zu sammeln. Wenn Sie beispielsweise eine Animation so festlegen, dass 9 Mal wiederholt wird (RepeatBehavior = 9x), und Sie legen die Eigenschaft so fest, dass sie zwischen 10 und 15 (von = 10 bis = 15) animiert, wird die Eigenschaft während des ersten Zyklus von 10 bis 15 und während des zweiten Zyklus von 15 bis 20 und während des dritten Zyklus von 20 bis 25 usw. animiert. Daher verwendet jeder Animationszyklus den Endanimationswert aus dem vorherigen Animationszyklus als Basiswert.

Sie können die IsCumulative-Eigenschaft mit den meisten grundlegenden Animationen und den meisten Keyframeanimationen verwenden. Weitere Informationen finden Sie unter der Übersicht über Animationen und der Übersicht über Keyframeanimationen.

Das folgende Beispiel zeigt dieses Verhalten durch das Animieren der Breite von vier Rechtecken. Das Beispiel:

<Page 
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
  xmlns:x="http://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>

Weitere Informationen