方法: キー フレームを使用して行列をアニメーション化する

  • [アーティクル]

この例では、キー フレームを使用して MatrixTransform の Matrix プロパティをアニメーション化する方法を示します。

例

次の例では、MatrixAnimationUsingKeyFrames クラスを使用して、MatrixTransform の Matrix プロパティをアニメーション化します。 この例では、MatrixTransform オブジェクトを使用して、Button の外観と位置を変換します。

このアニメーションでは、DiscreteMatrixKeyFrame クラスを使用して 2 つのキー フレームを作成し、それらを使用して次のことを行います。

  1. 最初の 0.2 秒間で、最初の Matrix をアニメーション化します。 この例では、Matrix の M11 プロパティと M12 プロパティを変更します。 この変更により、ボタンが引き伸ばされて、傾斜します。 また、この例では、ボタンの位置が変更するように、OffsetX プロパティと OffsetY プロパティも変更されます。

  2. 2番目の Matrix を 1.0 秒でアニメーション化します。 ボタンは別の位置に移動しますが、ボタンの傾斜や引き伸ばしは行われなくなります。

  3. アニメーションを無限に繰り返します。

注意

DiscreteMatrixKeyFrame オブジェクトから派生するキー フレームによって、ある値から次の値への突然の変化が作成されます。つまり、アニメーションの動きがぎくしゃくします。

<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>

サンプル全体については、「キーフレーム アニメーションのサンプル」を参照してください。

関連項目