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

  • Artículo

Una "animación básica" o "From/To/By" crea una transición entre dos valores de destino (vea Información general sobre animaciones para una introducción a los distintos tipos de animaciones). Para establecer los valores de destino de una animación básica, use sus propiedades From, To y By. En la tabla siguiente se resume cómo las propiedades From, To y By se pueden usar 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 anima 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 avanza desde el valor especificado por la propiedad From al valor especificado por la propiedad To.
From y By La animación avanza desde el valor especificado por la propiedad From al valor especificado por la suma de 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 las propiedades To y By en 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 más información.

Para 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 distintos efectos de establecer las propiedades To, By y From en animaciones.

Ejemplo

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

Vea también