Este artigo foi traduzido por máquina. Para visualizar o arquivo em inglês, marque a caixa de seleção Inglês. Você também pode exibir o texto Em inglês em uma janela pop-up, movendo o ponteiro do mouse sobre o texto.
Tradução
Inglês

Como: acumular valores de animação durante ciclos de repetição

 

Publicado: junho de 2016

Este exemplo mostra como usar o IsCumulative propriedade para acumular valores de animação entre ciclos de repetição.

Exemplo

Use o IsCumulative propriedade para acumular valores de base de uma animação entre ciclos de repetição. Por exemplo, se você definir uma animação para repetir 9 vezes (RepeatBehavior = "9x") e você definir a propriedade para animar entre 10 e 15 (de = 10 para = 15), a propriedade anima de 10 a 15 durante o primeiro ciclo, de 15 a 20 durante o segundo ciclo, de 20 a 25 durante o terceiro ciclo e assim por diante. Portanto, cada ciclo de animação usa o valor final de animação do ciclo de animação anterior como seu valor de base.

Você pode usar o IsCumulative propriedade com animações mais básicas e a maioria das animações de quadro-chave. Para obter mais informações, consulte Visão geral da animação e Visão geral de animações de quadro-chave.

O exemplo a seguir mostra esse comportamento, animando a largura de quatro retângulos. O exemplo:

<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>
Mostrar: