Cómo: Animar un objeto Matrix mediante fotogramas clave
Actualización: noviembre 2007
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:
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 expanda y se sesgue. En el ejemplo también se cambian las propiedades OffsetX y OffsetY para que el botón cambie de posición.
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 expandido.
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 Ejemplo KeyFrame Animation.
Vea también
Tareas
Conceptos
Información general sobre animaciones de fotogramas clave