Compartilhar via

Como: Controlar uma animação usando From, To e By

  • Artigo

Um "De/Para/Por" de uma "animação básica" cria uma transição entre dois valores alvo (consulte Revisão de Animação para obter uma introdução aos diferentes tipos de animações). Para definir os valores de destino de uma animação básica, use suas propriedades From, To e By. A tabela a seguir resume como as propriedades From, To e By podem ser usadas em conjunto ou separadamente para determinar valores alvo de uma animação.

Propriedades especificadas

Comportamento resultante

From

A animação progride do valor especificado pela propriedade From para o valor base da propriedade sendo animada ou para o valor de saída de uma animação anterior, dependendo de como a animação anterior é configurada.

From e To

A animação progride do valor especificado pela propriedade From para o valor especificado pela propriedade To.

From e By

A animação progride do valor especificado pela propriedade From para o valor especificado pela soma das propriedades From e By.

To

A animação progride do valor base da propriedade animada ou ao valor de saída de uma animação anterior para o valor especificado pela propriedade To.

By

A animação progride do valor base de uma propriedade sendo animada ou do valor de saída de uma animação anterior para a soma deste valor e o valor especificado pela propriedade By.
ObservaçãoObservação:

Não defina ambos o To propriedade e o By propriedade sobre a mesma animação.

Para usar outros métodos de interpolação ou animar entre mais de dois valores alvo, use uma animação keyframe. 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 a seguir mostra os efeitos diferentes de configurar as propriedades To, By e From em animações.

Exemplo

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

Consulte também

Tarefas

De, Para e By exemplo de vParalores de destino de ParanimParação

Conceitos

Revisão de Animação

Visão geral de animações de Quadro-Chave