Cómo: Controlar una animación mediante From, To y By

Un tipo de animación "From/To/By" o "animación básica" crea una transición entre dos valores de destino (vea Información general sobre animaciones para obtener una introducción a los distintos tipos de animaciones). Para establecer los valores de destino de una animación básica, se utilizan sus propiedades From, To y By. En la siguiente tabla se resume cómo se pueden usar las propiedades From, To y By juntas o por separado para determinar los valores de destino de una animación.

Propiedades especificadas	Comportamiento resultante
From	La animación progresa desde el valor especificado por la propiedad From hasta el valor base de la propiedad que se está animando o hasta el valor de resultado de una animación previa, en función de la configuración de esta última.
From y To	La animación progresa desde el valor especificado por la propiedad From hasta el valor especificado por la propiedad To.
From y By	La animación progresa desde el valor especificado por la propiedad From hasta el valor especificado por la suma de las propiedades From y By.
To	La animación progresa desde el valor base de la propiedad animada o desde el valor de salida de una animación previa al valor especificado por la propiedad To.
By	La animación progresa desde el valor base de la propiedad que se anima o desde el valor de salida de una animación previa hasta la suma de ese valor y del valor especificado por la propiedad By.

Nota
No establezca a la vez las propiedades To y By para la misma animación.

Para usar otros métodos de interpolación o animar entre más de dos valores de destino, use una animación de fotogramas clave. Vea Información general sobre animaciones de fotogramas clave para obtener más información.

Para obtener información sobre la aplicación de varias animaciones a una sola propiedad, vea Información general sobre animaciones de fotogramas clave.

En el ejemplo siguiente se muestran los diferentes efectos de establecer las propiedades To, By y From para las animaciones.

Ejemplo

<!-- 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>

Vea también

Conceptos

Información general sobre animaciones

Información general sobre animaciones de fotogramas clave

Otros recursos

Ejemplo From, To, and By Animation Target Values