次の方法で共有

方法: キー フレームを使用してマトリックスをアニメーション化する

  • [アーティクル]

この例では、キー フレームを使用して 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>

完全なサンプルについては、「KeyFrame アニメーションのサンプル」を参照してください。

関連項目