Cómo: Animar un objeto Matrix mediante fotogramas clave

En este ejemplo, se muestra cómo animar la propiedad Matrix de MatrixTransform mediante fotogramas clave.

Ejemplo

En el ejemplo siguiente se utiliza la clase MatrixAnimationUsingKeyFrames para animar la propiedad Matrix de MatrixTransform. En el ejemplo se utiliza el objeto MatrixTransform para transformar el aspecto y la posición de un control Button.

En esta animación se utiliza la clase DiscreteMatrixKeyFrame para crear dos fotogramas clave y se hace lo siguiente con ellos:

1. Se anima el primer objeto 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 sesgue. En el ejemplo también se cambian las propiedades OffsetX y OffsetY para que el botón cambie de posición.

2. Se anima el segundo objeto Matrix a los 1,0 segundos. El botón se mueve a otra posición y ya no está sesgado ni ajustado.

3. Se repite indefinidamente la animación.

Nota
Los fotogramas clave que se derivan del objeto DiscreteMatrixKeyFrame crean saltos súbitos entre los valores, es decir, el movimiento de la animación es brusco.

<Page 
  xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation" 
  xmlns:x="https://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 obtener el ejemplo completo, vea KeyFrame Animation Sample.

Vea también

Referencia

Matrix

MatrixTransform

Conceptos

Información general sobre animaciones de fotogramas clave

Otros recursos

Temas "Cómo..." de animaciones de fotogramas clave