Compartir a través de

Cómo: Animar un objeto Matrix mediante fotogramas clave

  • Artículo

En este ejemplo se muestra cómo animar una propiedad Matrix de MatrixTransform mediante el uso de fotogramas clave.

Ejemplo

En el ejemplo siguiente se usa la clase MatrixAnimationUsingKeyFrames para animar la propiedad Matrix de MatrixTransform. En el ejemplo se usa el objeto MatrixTransform para transformar la apariencia y la posición de Button.

Esta animación usa la clase DiscreteMatrixKeyFrame para crear dos fotogramas clave, y hace lo siguiente con ellos:

  1. Anima la primera estructura Matrix durante los primeros 0,2 segundos. En el ejemplo se cambian las propiedades M11 y M12 de Matrix. Este cambio hace que el botón se ajuste y se distorsione. En el ejemplo también se cambian las propiedades OffsetX y OffsetY para que el botón cambie la posición.

  2. Anima la segunda estructura Matrix a 1,0 segundos. El botón se mueve a otra posición mientras este ya no está ajustado o distorsionado.

  3. Repite la animación de forma indefinida.

Nota:

Los fotogramas clave que derivan del objeto DiscreteMatrixKeyFrame crean saltos repentinos entre valores, es decir, el movimiento de la animación se entrecorta.

<Page 
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
  Title="MatrixAnimationUsingPath Example">
  <StackPanel Margin="20">
    <Canvas HorizontalAlignment="Left" Width="340" Height="240" >

      <!-- The Button that is animated. -->
      <Button Margin="-30,0,0,0" MinWidth="100">
        Click
        <Button.RenderTransform>
          <MatrixTransform x:Name="myMatrixTransform">
            <MatrixTransform.Matrix >
              <Matrix OffsetX="10" OffsetY="100"/>
            </MatrixTransform.Matrix>
          </MatrixTransform>
        </Button.RenderTransform>
        <Button.Triggers>
          <EventTrigger RoutedEvent="Button.Loaded">
            <BeginStoryboard>
              <Storyboard>

                <!-- Animates the button's MatrixTransform using MatrixAnimationUsingKeyFrames. 
                Animates to first Matrix in the first 0.2 seconds, to second Matrix in the next
                second, and then starts over. Notice that the first KeyFrame stretches the button
                and skews it using the M11 and M12 Matrix properties respectively. Also, animations are 
                using Discrete interpolation, so the MatrixTransform appears to "jump" from one value 
                to the next. -->
                <MatrixAnimationUsingKeyFrames
                Storyboard.TargetName="myMatrixTransform"
                Storyboard.TargetProperty="Matrix"
                Duration="0:0:3" 
                RepeatBehavior="Forever">
                  <DiscreteMatrixKeyFrame KeyTime="0:0:0.2">
                    <DiscreteMatrixKeyFrame.Value>
                      <Matrix OffsetX="100" OffsetY="200" M11="3" M12="1" />
                    </DiscreteMatrixKeyFrame.Value>
                  </DiscreteMatrixKeyFrame>
                  <DiscreteMatrixKeyFrame KeyTime="0:0:1">
                    <DiscreteMatrixKeyFrame.Value>
                      <Matrix OffsetX="300" OffsetY="100" M11="1" M12="0" />
                    </DiscreteMatrixKeyFrame.Value>
                  </DiscreteMatrixKeyFrame>
                </MatrixAnimationUsingKeyFrames>
              </Storyboard>
            </BeginStoryboard>
          </EventTrigger>

        </Button.Triggers>
      </Button>

    </Canvas>
  </StackPanel>
</Page>

Para consultar el ejemplo completo, vea Ejemplo de animación mediante fotogramas clave.

Vea también