方法 : キー フレームを使用して行列をアニメーション化する
更新 : 2007 年 11 月
次の例は、キー フレームを使用して MatrixTransform の Matrix プロパティにアニメーションを適用する方法を示しています。
使用例
次のコード例では、MatrixAnimationUsingKeyFrames クラスを使用して MatrixTransform の Matrix プロパティにアニメーションを適用しています。この例では、MatrixTransform オブジェクトを使用して Button の外観と位置を変換します。
このアニメーションでは、DiscreteMatrixKeyFrame クラスを使用して 2 つのキー フレームを作成し、そのキー フレームで次の処理を行います。
最初の 0.2 秒の間に、1 番目の Matrix をアニメーション化します。この例では、Matrix の M11 プロパティおよび M12 プロパティを変更します。この変更によって、ボタンは引き伸ばされ、傾斜します。また、ここでは、OffsetX プロパティと OffsetY プロパティを変更することによって、ボタンの位置を変えます。
1.0 秒の時点で、2 番目の Matrix をアニメーション化します。ボタンは、傾斜と引き伸ばしがなくなると同時に、別の位置に移動します。
このアニメーションを無制限に繰り返します。
.gif "メモ") メモ : |
|---|
DiscreteMatrixKeyFrame オブジェクトから派生するキー フレームは、値間で突然のジャンプを作成します。つまり、アニメーションの動きはぎくしゃくしています。 |
<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>
サンプル全体については、「KeyFrame アニメーションのサンプル」を参照してください。