Cómo: Especificar HandoffBehavior entre animaciones de guión gráfico

En este ejemplo se muestra cómo especificar el comportamiento de entrega entre animaciones de guión gráfico. La propiedad HandoffBehavior de BeginStoryboard especifica cómo interactúan las nuevas animaciones con las existentes que ya se aplicaron a una propiedad.

Ejemplo

En el ejemplo siguiente se crean dos botones que aumentan de tamaño cuando el cursor del mouse se mueve por encima de ellos y disminuyen de tamaño cuando el cursor se aleja. Si pasa el mouse por encima de un botón y lo quita rápidamente, la segunda animación se aplicará antes de que la primera haya finalizado. Cuando dos animaciones se superponen de esta manera es cuando se aprecia la diferencia entre los valores Compose y SnapshotAndReplace de HandoffBehavior. El valor Compose combina las animaciones superpuestas y crea una transición más suave entre ambas, mientras que el valor SnapshotAndReplace hace que la nueva animación reemplace inmediatamente la anterior.

<Page 
  xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation" 
  xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml">
  <Page.Resources>
    <!-- This Style specifies mouseover and mouseout behaviors. The button gets larger when
    the cursor moves over it and smaller when the cursor moves away. Note that the same Properties
    (ScaleX and ScaleY) are being targeted by both animations. The BeginStoryboard for each animation
    uses a HandoffBehavior of "Compose" which causes the old animation to interpolate more gradually into
    the new one. -->
    <Style x:Key="ButtonWithCompose" TargetType="{x:Type Button}">
      <Setter Property="Button.RenderTransform">
        <Setter.Value>
          <ScaleTransform CenterX="50" CenterY="50" ScaleX="1" ScaleY="1" />
        </Setter.Value>
      </Setter>
      <Style.Triggers>
        <EventTrigger RoutedEvent="Mouse.MouseEnter">
          <EventTrigger.Actions>
            <BeginStoryboard >
              <Storyboard>
                <DoubleAnimation Duration="0:0:2" Storyboard.TargetProperty="RenderTransform.ScaleX" To="3"  />
                <DoubleAnimation Duration="0:0:2" Storyboard.TargetProperty="RenderTransform.ScaleY" To="3"  />
              </Storyboard>
            </BeginStoryboard>
          </EventTrigger.Actions>
        </EventTrigger>
        <EventTrigger RoutedEvent="Mouse.MouseLeave">
          <EventTrigger.Actions>
            <BeginStoryboard HandoffBehavior="Compose">
              <Storyboard>
                <DoubleAnimation Duration="0:0:2" Storyboard.TargetProperty="RenderTransform.ScaleX" />
                <DoubleAnimation Duration="0:0:2" Storyboard.TargetProperty="RenderTransform.ScaleY" />
              </Storyboard>
            </BeginStoryboard>
          </EventTrigger.Actions>
        </EventTrigger>
      </Style.Triggers>
    </Style>
    <!-- For this button style, BeginStoryboard uses the default HandoffBehavior of "SnapShotAndReplace" -->
    <Style x:Key="ButtonWithSnapShotAndReplace" TargetType="{x:Type Button}">
      <Setter Property="Button.RenderTransform">
        <Setter.Value>
          <ScaleTransform CenterX="50" CenterY="50" ScaleX="1" ScaleY="1" />
        </Setter.Value>
      </Setter>
      <Style.Triggers>
        <EventTrigger RoutedEvent="Mouse.MouseEnter">
          <EventTrigger.Actions>
            <BeginStoryboard >
              <Storyboard>
                <DoubleAnimation Duration="0:0:2" Storyboard.TargetProperty="RenderTransform.ScaleX" To="3"  />
                <DoubleAnimation Duration="0:0:2" Storyboard.TargetProperty="RenderTransform.ScaleY" To="3"  />
              </Storyboard>
            </BeginStoryboard>
          </EventTrigger.Actions>
        </EventTrigger>
        <EventTrigger RoutedEvent="Mouse.MouseLeave">
          <EventTrigger.Actions>
            <BeginStoryboard>
              <Storyboard>
                <DoubleAnimation Duration="0:0:2" Storyboard.TargetProperty="RenderTransform.ScaleX" />
                <DoubleAnimation Duration="0:0:2" Storyboard.TargetProperty="RenderTransform.ScaleY" />
              </Storyboard>
            </BeginStoryboard>
          </EventTrigger.Actions>
        </EventTrigger>
      </Style.Triggers>
    </Style>
  </Page.Resources>
  <Canvas>
    <Button Style="{StaticResource ButtonWithSnapShotAndReplace}" Canvas.Top="200" Canvas.Left="200" Width="100" Height="100">
      SnapShotAndReplace
    </Button>
    <Button Style="{StaticResource ButtonWithCompose}" Canvas.Top="200" Canvas.Left="400" Width="100" Height="100">
      Compose
    </Button>
  </Canvas>
</Page>

Vea también

Referencia

BeginStoryboard

HandoffBehavior

Conceptos

Información general sobre animaciones

Otros recursos

Animación y temporización

Temas "Cómo..." de animación y control de tiempo