パス アニメーションの概要
このトピックでは、ジオメトリック パスを使用して出力値を生成できるパス アニメーションの概要を説明します。 パス アニメーションは、複雑なパスに沿ってオブジェクトを移動および回転させるときに便利です。
必須コンポーネント
このトピックを理解するには、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 名前空間に属し、次の名前付け規則を使用します。
<Type>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 オブジェクトで構成され、このそれぞれで図形のセグメントが記述されます。
多くの種類のセグメントがあります。
| セグメントの種類 | 説明 |
|---|---|
| ArcSegment | 2 つの点を結ぶ楕円の円弧を作成します。 |
| BezierSegment | 2 つの点を結ぶ 3 次ベジエ曲線を作成します。 |
| LineSegment | 2 つの点を結ぶ直性を作成します。 |
| PolyBezierSegment | 一続きの 3 次ベジエ曲線を作成します。 |
| PolyLineSegment | 一続きの直線を作成します。 |
| PolyQuadraticBezierSegment | 一続きの 2 次ベジエ曲線を作成します。 |
| QuadraticBezierSegment | 2 次ベジエ曲線を作成します。 |
PathFigure 内のセグメントは 1 つの幾何学図形に結合され、各セグメントの終点が次のセグメントの始点として使用されます。 StartPoint の PathFigure プロパティでは、最初のセグメントが描画されるときの開始地点を指定します。 後続の各セグメントは、前のセグメントの終点から始まります。 たとえば、10,50 から 10,150 までの垂直線を定義するには、StartPoint プロパティを 10,50 に設定し、LineSegment プロパティを Point に設定して 10,150 を作成します。
PathGeometry オブジェクトの詳細については、「ジオメトリの概要」を参照してください。
XAML では、特殊な省略構文を使用して Figures の PathGeometry プロパティを設定することもできます。 詳細については、「パス マークアップ構文」の概要を参照してください。
XAML の例で使用されているパス構文の詳細については、「パス マークアップ構文」の概要を参照してください。
関連項目
.NET Desktop feedback