Compartir a través de

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

Un elemento "From/To/By" o "animación básica" crea una transición entre dos valores de destino (vea Información general de animación para obtener una introducción a diferentes 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 se pueden usar las Frompropiedades , Toy By juntas o por separado para determinar los valores de destino de una animación.

Propiedades especificadas Comportamiento resultante
From La animación avanza desde el valor especificado por la From propiedad hasta el valor base de la propiedad que se está animando o hasta el valor de salida de una animación anterior, dependiendo de cómo se configure la animación anterior.
From y To La animación avanza desde el valor especificado por la From propiedad hasta el valor especificado por la To propiedad .
From y By La animación avanza del valor especificado por la From propiedad al valor especificado por la suma de las From propiedades y By .
To La animación avanza desde el valor base de la propiedad animada o el valor de salida de una animación anterior al valor especificado por la To propiedad .
By La animación avanza desde el valor base de la propiedad que se está animando o el valor de salida de una animación anterior hasta la suma de ese valor y el valor especificado por la By propiedad .

Nota:

No establezca tanto la To propiedad como la By propiedad 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 fotograma clave. Consulte Key-Frame Animations Overview (Información general sobre animaciones deKey-Frame ) para obtener más información.

Para obtener información sobre cómo aplicar varias animaciones a una sola propiedad, consulte Key-Frame Información general sobre animaciones.

En el ejemplo siguiente se muestran los distintos efectos de establecer las propiedades To, By y From en las 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>

Consulte también