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

  • Artículo

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

Ejemplo

En el ejemplo siguiente se crean dos botones que se amplían cuando el cursor del mouse se mueve sobre ellos y se vuelven más pequeños cuando el cursor se aleja. Si pasa el mouse sobre un botón y, a continuación, quita rápidamente el cursor, la segunda animación se aplicará antes de que finalice la primera. Es cuando las dos animaciones se superponen de esta manera que puede ver la diferencia entre los valores HandoffBehavior de Compose y SnapshotAndReplace. Un valor de Compose combina las animaciones superpuestas, lo que causa una transición más fluida entre animaciones, mientras que un valor de SnapshotAndReplace hace que la nueva animación reemplace inmediatamente la animación superpuesta anterior.

<Page 
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
  xmlns:x="http://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