Como controlar uma animação usando de, para e por

  • Artigo

Um “De/Para/Por” ou “animação básica” cria uma transição entre dois valores de destino (consulte Visão geral da animação para ver uma introdução aos diferentes tipos de animações). Para definir os valores de destino de uma animação básica, use suas Frompropriedades , Toe By . A tabela a seguir resume como as Frompropriedades , Toe By podem ser usadas juntas ou separadamente para determinar os valores de destino de uma animação.

Propriedades especificadas Comportamento resultante
From A animação progride do valor especificado pela From propriedade para o valor base da propriedade que está sendo animada ou para o valor de saída de uma animação anterior, dependendo de como a animação anterior está configurada.
From e To A animação progride do valor especificado pela propriedade para o valor especificado pela FromTo propriedade.
From e By A animação progride do valor especificado pela propriedade para o valor especificado pela From soma das From propriedades e By .
To A animação progride do valor base da propriedade animada ou do valor de saída de uma animação anterior para o valor especificado pela To propriedade.
By A animação progride do valor base da propriedade que está sendo animada ou do valor de saída de uma animação anterior para a soma desse valor e o valor especificado pela By propriedade.

Observação

Não defina a propriedade e a ToBy propriedade na mesma animação.

Para usar outros métodos de interpolação ou animar entre mais de dois valores de destino, use uma animação de quadro chave. Consulte Visão geral de animações de quadro chave para obter mais informações.

Para obter informações sobre como aplicar várias animações a uma única propriedade, consulte Visão geral de animações de quadro chave.

O exemplo abaixo mostra os diferentes efeitos de configuração To, Bye From propriedades em animações.

Exemplo

<!-- This example shows the different effects of setting
   To, By, and From properties on animations.  -->
<Page
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

  <StackPanel Margin="20">

    <!-- Demonstrates the From and To properties used together. -->
    <Rectangle Name="fromToAnimatedRectangle" Height="10" Width="100" 
      HorizontalAlignment="Left" Margin="10" Fill="#99FF9900" />

    <!-- Demonstrates the use of the To property. -->
    <Rectangle Name="toAnimatedRectangle" Height="10" Width="100" 
      HorizontalAlignment="Left" Margin="10" Fill="#99FF9900" />

    <!-- Demonstrates the use of the By property. -->
    <Rectangle Name="byAnimatedRectangle" Height="10" Width="100" 
      HorizontalAlignment="Left" Margin="10" Fill="#99FF9900" />

    <!-- Demonstrates the use of the From and By properties. -->
    <Rectangle Name="fromByAnimatedRectangle" Height="10" Width="100" 
      HorizontalAlignment="Left" Margin="10" Fill="#99FF9900" />

    <!-- Demonstrates the use of the From property. -->
    <Rectangle Name="fromAnimatedRectangle" Height="10" Width="100" 
      HorizontalAlignment="Left" Margin="10" Fill="#99FF9900" />
    <Button>
      Start Animations
      <Button.Triggers>
        <EventTrigger RoutedEvent="Button.Click">
          <BeginStoryboard>
            <Storyboard FillBehavior="Stop">

              <!-- Demonstrates the From and To properties used together.
                 Animates the rectangle's Width property from 50 to 300 over 10 seconds. -->
              <DoubleAnimation 
                Storyboard.TargetName="fromToAnimatedRectangle" 
                Storyboard.TargetProperty="(Rectangle.Width)"
                From="50" To="300" Duration="0:0:10" />

              <!-- Demonstrates the To property used by itself.
                 Animates the Rectangle's Width property from its base value
                 (100) to 300 over 10 seconds. -->
              <DoubleAnimation 
                Storyboard.TargetName="toAnimatedRectangle" Storyboard.TargetProperty="(Rectangle.Width)"
                To="300" Duration="0:0:10" />

              <!-- Demonstrates the By property used by itself.
                 Increments the Rectangle's Width property by 300 over 10 seconds.
                 As a result, the Width property is animated from its base value
                 (100) to 400 (100 + 300) over 10 seconds. -->
              <DoubleAnimation 
                Storyboard.TargetName="byAnimatedRectangle" Storyboard.TargetProperty="(Rectangle.Width)" 
                By="300" Duration="0:0:10" />

              <!-- Demonstrates the From and By properties used together.
                 Increments the Rectangle's Width property by 300 over 10 seconds.
                 As a result, the Width property is animated from 50
                 to 350 (50 + 300) over 10 seconds. -->
              <DoubleAnimation 
                Storyboard.TargetName="fromByAnimatedRectangle" Storyboard.TargetProperty="(Rectangle.Width)" 
                From="50" By="300" Duration="0:0:10"  />

              <!-- Demonstrates the From property used by itself.
                 Animates the rectangle's Width property from 50 to its base value (100)
                 over 10 seconds. -->
              <DoubleAnimation 
                Storyboard.TargetName="fromAnimatedRectangle" Storyboard.TargetProperty="(Rectangle.Width)"
                From="50" Duration="0:0:10"  />
            </Storyboard>
          </BeginStoryboard>
        </EventTrigger>
      </Button.Triggers>
    </Button>
  </StackPanel>
</Page>

Confira também