パス アニメーションの概要

このトピックでは、ジオメトリック パスを使用して出力値を生成できるパス アニメーションについて説明します。 パス アニメーションは、複雑なパスに沿ってオブジェクトを移動したり回転したりするのに便利です。

[前提条件]

このトピックを理解するには、WPF アニメーションの機能について理解している必要があります。 アニメーション機能の概要については、「 アニメーションの概要」を参照してください。

PathGeometry オブジェクトを使用してパス アニメーションを定義するため、PathGeometryとさまざまな種類のPathSegment オブジェクトについても理解しておく必要があります。 詳細については、「ジオメトリの概要」を参照してください。

パス アニメーションとは何ですか

パス アニメーションは、AnimationTimelineを入力として使用するPathGeometryの一種です。 From、To、By プロパティ (From/To/By アニメーションの場合と同様) またはキー フレーム (キー フレーム アニメーションに使用する場合) を設定する代わりに、ジオメトリック パスを定義し、それを使用してパス アニメーションの PathGeometry プロパティを設定します。 パス アニメーションが進行すると、パスから x、y、および角度の情報が読み取られ、その情報を使用してその出力が生成されます。

パス アニメーションは、複雑なパスに沿ってオブジェクトをアニメーション化する場合に非常に便利です。 パスに沿ってオブジェクトを移動する 1 つの方法は、 MatrixTransform と MatrixAnimationUsingPath を使用して、複雑なパスに沿ってオブジェクトを変換することです。 次の例では、MatrixAnimationUsingPath オブジェクトを使用して、MatrixのMatrixTransform プロパティをアニメーション化することで、この手法を示します。 MatrixTransformはボタンに適用され、曲線パスに沿って移動します。 DoesRotateWithTangentプロパティはtrueに設定されているため、四角形はパスの接線に沿って回転します。

<Page 
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
  xmlns:PresentationOptions="http://schemas.microsoft.com/winfx/2006/xaml/presentation/options" 
  xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  mc:Ignorable="PresentationOptions" Margin="20">
  <Canvas Width="400" Height="400">
      
    <!-- The Button that is animated across the screen by animating
         the MatrixTransform applied to the button. -->
    <Button MinWidth="100" Content="A Button">
      <Button.RenderTransform>
        <MatrixTransform x:Name="ButtonMatrixTransform">
          <MatrixTransform.Matrix >
            <Matrix />
          </MatrixTransform.Matrix>
        </MatrixTransform>
      </Button.RenderTransform>
      <Button.Triggers>
        <EventTrigger RoutedEvent="Button.Loaded">
          <BeginStoryboard>
            <Storyboard>
              <MatrixAnimationUsingPath
              Storyboard.TargetName="ButtonMatrixTransform"
              Storyboard.TargetProperty="Matrix"
              DoesRotateWithTangent="True"
              Duration="0:0:5" 
              RepeatBehavior="Forever" >
                <MatrixAnimationUsingPath.PathGeometry>
                  <PathGeometry 
                    Figures="M 10,100 C 35,0 135,0 160,100 180,190 285,200 310,100" 
                    PresentationOptions:Freeze="True" />
                </MatrixAnimationUsingPath.PathGeometry>
              </MatrixAnimationUsingPath>
            </Storyboard>
          </BeginStoryboard>
        </EventTrigger>
      </Button.Triggers>
    </Button>
  </Canvas>
</Page>

using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace SDKSample
{

    /// <summary>
    /// Shows how to animate an object along
    /// a geometric path.
    /// </summary>
    public class MatrixAnimationUsingPathDoesRotateWithTangentExample : Page
    {

        public MatrixAnimationUsingPathDoesRotateWithTangentExample()
        {
            this.Margin = new Thickness(20);

            // Create a NameScope for the page so that
            // we can use Storyboards.
            NameScope.SetNameScope(this, new NameScope());

            // Create a button.
            Button aButton = new Button();
            aButton.MinWidth = 100;
            aButton.Content = "A Button";

            // Create a MatrixTransform. This transform
            // will be used to move the button.
            MatrixTransform buttonMatrixTransform = new MatrixTransform();
            aButton.RenderTransform = buttonMatrixTransform;

            // Register the transform's name with the page
            // so that it can be targeted by a Storyboard.
            this.RegisterName("ButtonMatrixTransform", buttonMatrixTransform);

            // Create a Canvas to contain the button
            // and add it to the page.
            // Although this example uses a Canvas,
            // any type of panel will work.
            Canvas mainPanel = new Canvas();
            mainPanel.Width = 400;
            mainPanel.Height = 400;
            mainPanel.Children.Add(aButton);
            this.Content = mainPanel;

            // Create the animation path.
            PathGeometry animationPath = new PathGeometry();
            PathFigure pFigure = new PathFigure();
            pFigure.StartPoint = new Point(10, 100);
            PolyBezierSegment pBezierSegment = new PolyBezierSegment();
            pBezierSegment.Points.Add(new Point(35, 0));
            pBezierSegment.Points.Add(new Point(135, 0));
            pBezierSegment.Points.Add(new Point(160, 100));
            pBezierSegment.Points.Add(new Point(180, 190));
            pBezierSegment.Points.Add(new Point(285, 200));
            pBezierSegment.Points.Add(new Point(310, 100));
            pFigure.Segments.Add(pBezierSegment);
            animationPath.Figures.Add(pFigure);

            // Freeze the PathGeometry for performance benefits.
            animationPath.Freeze();

            // Create a MatrixAnimationUsingPath to move the
            // button along the path by animating
            // its MatrixTransform.
            MatrixAnimationUsingPath matrixAnimation =
                new MatrixAnimationUsingPath();
            matrixAnimation.PathGeometry = animationPath;
            matrixAnimation.Duration = TimeSpan.FromSeconds(5);
            matrixAnimation.RepeatBehavior = RepeatBehavior.Forever;

            // Set the animation's DoesRotateWithTangent property
            // to true so that rotates the rectangle in addition
            // to moving it.
            matrixAnimation.DoesRotateWithTangent = true;

            // Set the animation to target the Matrix property
            // of the MatrixTransform named "ButtonMatrixTransform".
            Storyboard.SetTargetName(matrixAnimation, "ButtonMatrixTransform");
            Storyboard.SetTargetProperty(matrixAnimation,
                new PropertyPath(MatrixTransform.MatrixProperty));

            // Create a Storyboard to contain and apply the animation.
            Storyboard pathAnimationStoryboard = new Storyboard();
            pathAnimationStoryboard.Children.Add(matrixAnimation);

            // Start the storyboard when the button is loaded.
            aButton.Loaded += delegate(object sender, RoutedEventArgs e)
            {
                // Start the storyboard.
                pathAnimationStoryboard.Begin(this);
            };
        }
    }
}

Imports System.Windows
Imports System.Windows.Controls
Imports System.Windows.Media
Imports System.Windows.Media.Animation
Imports System.Windows.Navigation
Imports System.Windows.Shapes


Namespace SDKSample

    ''' <summary>
    ''' Shows how to animate an object along
    ''' a geometric path.
    ''' </summary>
    Public Class MatrixAnimationUsingPathDoesRotateWithTangentExample
        Inherits Page

        Public Sub New()
            Me.Margin = New Thickness(20)

            ' Create a NameScope for the page so that
            ' we can use Storyboards.
            NameScope.SetNameScope(Me, New NameScope())

            ' Create a button.
            Dim aButton As New Button()
            aButton.MinWidth = 100
            aButton.Content = "A Button"

            ' Create a MatrixTransform. This transform
            ' will be used to move the button.
            Dim buttonMatrixTransform As New MatrixTransform()
            aButton.RenderTransform = buttonMatrixTransform

            ' Register the transform's name with the page
            ' so that it can be targeted by a Storyboard.
            Me.RegisterName("ButtonMatrixTransform", buttonMatrixTransform)

            ' Create a Canvas to contain the button
            ' and add it to the page.
            ' Although this example uses a Canvas,
            ' any type of panel will work.
            Dim mainPanel As New Canvas()
            mainPanel.Width = 400
            mainPanel.Height = 400
            mainPanel.Children.Add(aButton)
            Me.Content = mainPanel

            ' Create the animation path.
            Dim animationPath As New PathGeometry()
            Dim pFigure As New PathFigure()
            pFigure.StartPoint = New Point(10, 100)
            Dim pBezierSegment As New PolyBezierSegment()
            pBezierSegment.Points.Add(New Point(35, 0))
            pBezierSegment.Points.Add(New Point(135, 0))
            pBezierSegment.Points.Add(New Point(160, 100))
            pBezierSegment.Points.Add(New Point(180, 190))
            pBezierSegment.Points.Add(New Point(285, 200))
            pBezierSegment.Points.Add(New Point(310, 100))
            pFigure.Segments.Add(pBezierSegment)
            animationPath.Figures.Add(pFigure)

            ' Freeze the PathGeometry for performance benefits.
            animationPath.Freeze()

            ' Create a MatrixAnimationUsingPath to move the
            ' button along the path by animating
            ' its MatrixTransform.
            Dim matrixAnimation As New MatrixAnimationUsingPath()
            matrixAnimation.PathGeometry = animationPath
            matrixAnimation.Duration = TimeSpan.FromSeconds(5)
            matrixAnimation.RepeatBehavior = RepeatBehavior.Forever

            ' Set the animation's DoesRotateWithTangent property
            ' to true so that rotates the rectangle in addition
            ' to moving it.
            matrixAnimation.DoesRotateWithTangent = True

            ' Set the animation to target the Matrix property
            ' of the MatrixTransform named "ButtonMatrixTransform".
            Storyboard.SetTargetName(matrixAnimation, "ButtonMatrixTransform")
            Storyboard.SetTargetProperty(matrixAnimation, New PropertyPath(MatrixTransform.MatrixProperty))

            ' Create a Storyboard to contain and apply the animation.
            Dim pathAnimationStoryboard As New Storyboard()
            pathAnimationStoryboard.Children.Add(matrixAnimation)

            ' Start the storyboard when the button is loaded.
            AddHandler aButton.Loaded, Sub(sender As Object, e As RoutedEventArgs) pathAnimationStoryboard.Begin(Me)



        End Sub
    End Class
End Namespace

XAML の例で使用されるパス構文の詳細については、「 パス マークアップ構文 の概要」を参照してください。 完全なサンプルについては、「パス アニメーションのサンプル」を参照してください。

パス アニメーションをプロパティに適用するには、XAML とコードの Storyboard を使用するか、コードで BeginAnimation メソッドを使用します。 パス アニメーションを使用して AnimationClock を作成し、1 つ以上のプロパティに適用することもできます。 アニメーションを適用するためのさまざまな方法の詳細については、「 プロパティ アニメーション手法の概要」を参照してください。

パス アニメーションの種類

アニメーションはプロパティ値を生成するため、プロパティの種類ごとに異なるアニメーションの種類があります。 Doubleを受け取るプロパティ (XのTranslateTransform プロパティなど) をアニメーション化するには、Double値を生成するアニメーションを使用します。 Pointを受け取るプロパティをアニメーション化するには、Point値を生成するアニメーションなどを使用します。

パス アニメーション クラスは、 System.Windows.Media.Animation 名前空間に属し、次の名前付け規則を使用します。

<種類>AnimationUsingPath

ここで、<Type> クラスがアニメーション化する値の型です。

WPF には、次のパス アニメーション クラスが用意されています。

MatrixAnimationUsingPathは、MatrixからPathGeometry値を生成します。 MatrixTransformで使用すると、MatrixAnimationUsingPathはパスに沿ってオブジェクトを移動できます。 DoesRotateWithTangentのMatrixAnimationUsingPathプロパティをtrueに設定すると、パスの曲線に沿ってオブジェクトも回転します。

PointAnimationUsingPathは、Pointの x 座標と y 座標からPathGeometry値を生成します。 PointAnimationUsingPathを使用して、Point値を受け取るプロパティをアニメーション化すると、パスに沿ってオブジェクトを移動できます。 PointAnimationUsingPathはオブジェクトを回転できません。

DoubleAnimationUsingPathは、DoubleからPathGeometry値を生成します。 Sourceプロパティを設定すると、DoubleAnimationUsingPathがパスの x 座標、y 座標、または角度を出力として使用するかどうかを指定できます。 DoubleAnimationUsingPath を使用すると、オブジェクトを回転したり、x 軸または y 軸に沿って移動したりすることができます。

パス アニメーションの入力

各パス アニメーション クラスは、入力を指定するための PathGeometry プロパティを提供します。 パス アニメーションは、 PathGeometry を使用して出力値を生成します。 PathGeometry クラスを使用すると、円弧、曲線、線で構成される複数の複雑な図形を記述できます。

PathGeometryの中心には、PathFigure オブジェクトのコレクションがあります。これらのオブジェクトは、各図形がPathGeometryの個別の図形を表しているため、非常に名前が付けられます。 各 PathFigure は、1 つ以上の PathSegment オブジェクトで構成され、それぞれが図のセグメントを記述します。

セグメントにはさまざまな種類があります。

PathFigure内のセグメントは、1 つのジオメトリシェイプに結合され、セグメントの終点が次のセグメントの始点として使用されます。 StartPointのPathFigure プロパティは、最初のセグメントの描画元のポイントを指定します。 後続の各セグメントは、前のセグメントの終点から開始します。 たとえば、10,50から10,150までの垂直線を定義するには、StartPoint プロパティを10,50に設定し、LineSegmentのPointプロパティ設定を使用して10,150を作成します。

PathGeometry オブジェクトの詳細については、「ジオメトリの概要」を参照してください。

XAML では、特別な省略構文を使用して、FiguresのPathGeometry プロパティを設定することもできます。 詳細については、「 パス マークアップ構文 の概要」を参照してください。

XAML の例で使用されるパス構文の詳細については、「 パス マークアップ構文 の概要」を参照してください。

こちらも参照ください

• パス アニメーションのサンプル
• パス マークアップ構文
• パス アニメーションの使い方に関するトピック
• アニメーションの概要
• プロパティアニメーションテクニックの概要