方法: キー フレームを使用して行列をアニメーション化するHow to: Animate a Matrix by Using Key Frames

この例では、キー フレームを使用して MatrixTransformMatrix プロパティをアニメーション化する方法を示します。This example shows how to animate the Matrix property of a MatrixTransform by using key frames.

Example

次の例では、MatrixAnimationUsingKeyFrames クラスを使用して、MatrixTransformMatrix プロパティをアニメーション化します。The following example uses the MatrixAnimationUsingKeyFrames class to animate the Matrix property of a MatrixTransform. この例では、MatrixTransform オブジェクトを使用して、Button の外観と位置を変換します。The example uses the MatrixTransform object to transform the appearance and position of a Button.

このアニメーションでは、DiscreteMatrixKeyFrame クラスを使用して 2 つのキー フレームを作成し、それらを使用して次のことを行います。This animation uses the DiscreteMatrixKeyFrame class to create two key frames and does the following with them:

  1. 最初の 0.2 秒間で、最初の Matrix をアニメーション化します。Animates the first Matrix during the first 0.2 seconds. この例では、MatrixM11 プロパティと M12 プロパティを変更します。The example changes the M11 and M12 properties of the Matrix. この変更により、ボタンが引き伸ばされて、傾斜します。This change causes the button to stretch and become skewed. また、この例では、ボタンの位置が変更するように、OffsetX プロパティと OffsetY プロパティも変更されます。The example also changes the OffsetX and OffsetY properties so that the button changes position.

  2. 2番目の Matrix を 1.0 秒でアニメーション化します。Animates the second Matrix at 1.0 seconds. ボタンは別の位置に移動しますが、ボタンの傾斜や引き伸ばしは行われなくなります。The button moves to another position while the button is no longer skewed or stretched.

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

注意

DiscreteMatrixKeyFrame オブジェクトから派生するキー フレームによって、ある値から次の値への突然の変化が作成されます。つまり、アニメーションの動きがぎくしゃくします。Key frames that derive from the DiscreteMatrixKeyFrame object create sudden jumps between values, that is, the movement of the animation is jerky.

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

サンプル全体については、「キーフレーム アニメーションのサンプル」を参照してください。For the complete sample, see KeyFrame Animation Sample.

関連項目See also