方法: パスに沿ってオブジェクトをアニメーション化する (ダブル アニメーション)
この例では、DoubleAnimationUsingPath クラスを使用して、PathGeometry で定義したパスに沿ってオブジェクトを移動する方法を示します。
例
次の例では、2 つの DoubleAnimationUsingPath オブジェクトを使用して、ジオメトリック パスに沿って四角形を移動します。
最初の DoubleAnimationUsingPath は、四角形に適用されている TranslateTransform の X をアニメーション化します。 これにより、四角形がパスに沿って水平に移動します。
2番目の DoubleAnimationUsingPath は、四角形に適用されている TranslateTransform の Y をアニメーション化します。 これにより、四角形がパスに沿って垂直に移動します。
<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">
<Page.Resources>
<!-- This is the geometry creates the animation path. Because
this example uses it multiple times, it's declared as a resource and
frozen to improve performance. -->
<PathGeometry x:Key="AnimationPath"
Figures="M 10,100 C 35,0 135,0 160,100 180,190 285,200 310,100"
PresentationOptions:Freeze="True" />
</Page.Resources>
<Canvas Width="400" Height="400">
<!-- The object to animate. -->
<Rectangle
Width="30" Height="30" Fill="Blue">
<Rectangle.RenderTransform>
<TranslateTransform x:Name="AnimatedTranslateTransform" />
</Rectangle.RenderTransform>
<Rectangle.Triggers>
<EventTrigger RoutedEvent="Path.Loaded">
<BeginStoryboard>
<Storyboard RepeatBehavior="Forever">
<!-- Animates the rectangle horizotally along the path. -->
<DoubleAnimationUsingPath
Storyboard.TargetName="AnimatedTranslateTransform"
Storyboard.TargetProperty="X"
PathGeometry="{StaticResource AnimationPath}"
Source="X"
Duration="0:0:5" />
<!-- Animates the rectangle vertically along the path. -->
<DoubleAnimationUsingPath
Storyboard.TargetName="AnimatedTranslateTransform"
Storyboard.TargetProperty="Y"
PathGeometry="{StaticResource AnimationPath}"
Source="Y"
Duration="0:0:5" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Rectangle.Triggers>
</Rectangle>
</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
{
public class DoubleAnimationUsingPathExample : Page
{
public DoubleAnimationUsingPathExample()
{
// Create a NameScope for the page so that
// we can use Storyboards.
NameScope.SetNameScope(this, new NameScope());
// Create a rectangle.
Rectangle aRectangle = new Rectangle();
aRectangle.Width = 30;
aRectangle.Height = 30;
aRectangle.Fill = Brushes.Blue;
// Create a transform. This transform
// will be used to move the rectangle.
TranslateTransform animatedTranslateTransform =
new TranslateTransform();
// Register the transform's name with the page
// so that they it be targeted by a Storyboard.
this.RegisterName("AnimatedTranslateTransform", animatedTranslateTransform);
aRectangle.RenderTransform = animatedTranslateTransform;
// Create a Canvas to contain the rectangle
// and add it to the page.
Canvas mainPanel = new Canvas();
mainPanel.Width = 400;
mainPanel.Height = 400;
mainPanel.Children.Add(aRectangle);
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 DoubleAnimationUsingPath to move the
// rectangle horizontally along the path by animating
// its TranslateTransform.
DoubleAnimationUsingPath translateXAnimation =
new DoubleAnimationUsingPath();
translateXAnimation.PathGeometry = animationPath;
translateXAnimation.Duration = TimeSpan.FromSeconds(5);
// Set the Source property to X. This makes
// the animation generate horizontal offset values from
// the path information.
translateXAnimation.Source = PathAnimationSource.X;
// Set the animation to target the X property
// of the TranslateTransform named "AnimatedTranslateTransform".
Storyboard.SetTargetName(translateXAnimation, "AnimatedTranslateTransform");
Storyboard.SetTargetProperty(translateXAnimation,
new PropertyPath(TranslateTransform.XProperty));
// Create a DoubleAnimationUsingPath to move the
// rectangle vertically along the path by animating
// its TranslateTransform.
DoubleAnimationUsingPath translateYAnimation =
new DoubleAnimationUsingPath();
translateYAnimation.PathGeometry = animationPath;
translateYAnimation.Duration = TimeSpan.FromSeconds(5);
// Set the Source property to Y. This makes
// the animation generate vertical offset values from
// the path information.
translateYAnimation.Source = PathAnimationSource.Y;
// Set the animation to target the Y property
// of the TranslateTransform named "AnimatedTranslateTransform".
Storyboard.SetTargetName(translateYAnimation, "AnimatedTranslateTransform");
Storyboard.SetTargetProperty(translateYAnimation,
new PropertyPath(TranslateTransform.YProperty));
// Create a Storyboard to contain and apply the animations.
Storyboard pathAnimationStoryboard = new Storyboard();
pathAnimationStoryboard.RepeatBehavior = RepeatBehavior.Forever;
pathAnimationStoryboard.Children.Add(translateXAnimation);
pathAnimationStoryboard.Children.Add(translateYAnimation);
// Start the animations when the rectangle is loaded.
aRectangle.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
Public Class DoubleAnimationUsingPathExample
Inherits Page
Public Sub New()
' Create a NameScope for the page so that
' we can use Storyboards.
NameScope.SetNameScope(Me, New NameScope())
' Create a rectangle.
Dim aRectangle As New Rectangle()
aRectangle.Width = 30
aRectangle.Height = 30
aRectangle.Fill = Brushes.Blue
' Create a transform. This transform
' will be used to move the rectangle.
Dim animatedTranslateTransform As New TranslateTransform()
' Register the transform's name with the page
' so that they it be targeted by a Storyboard.
Me.RegisterName("AnimatedTranslateTransform", animatedTranslateTransform)
aRectangle.RenderTransform = animatedTranslateTransform
' Create a Canvas to contain the rectangle
' and add it to the page.
Dim mainPanel As New Canvas()
mainPanel.Width = 400
mainPanel.Height = 400
mainPanel.Children.Add(aRectangle)
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 DoubleAnimationUsingPath to move the
' rectangle horizontally along the path by animating
' its TranslateTransform.
Dim translateXAnimation As New DoubleAnimationUsingPath()
translateXAnimation.PathGeometry = animationPath
translateXAnimation.Duration = TimeSpan.FromSeconds(5)
' Set the Source property to X. This makes
' the animation generate horizontal offset values from
' the path information.
translateXAnimation.Source = PathAnimationSource.X
' Set the animation to target the X property
' of the TranslateTransform named "AnimatedTranslateTransform".
Storyboard.SetTargetName(translateXAnimation, "AnimatedTranslateTransform")
Storyboard.SetTargetProperty(translateXAnimation, New PropertyPath(TranslateTransform.XProperty))
' Create a DoubleAnimationUsingPath to move the
' rectangle vertically along the path by animating
' its TranslateTransform.
Dim translateYAnimation As New DoubleAnimationUsingPath()
translateYAnimation.PathGeometry = animationPath
translateYAnimation.Duration = TimeSpan.FromSeconds(5)
' Set the Source property to Y. This makes
' the animation generate vertical offset values from
' the path information.
translateYAnimation.Source = PathAnimationSource.Y
' Set the animation to target the Y property
' of the TranslateTransform named "AnimatedTranslateTransform".
Storyboard.SetTargetName(translateYAnimation, "AnimatedTranslateTransform")
Storyboard.SetTargetProperty(translateYAnimation, New PropertyPath(TranslateTransform.YProperty))
' Create a Storyboard to contain and apply the animations.
Dim pathAnimationStoryboard As New Storyboard()
pathAnimationStoryboard.RepeatBehavior = RepeatBehavior.Forever
pathAnimationStoryboard.Children.Add(translateXAnimation)
pathAnimationStoryboard.Children.Add(translateYAnimation)
' Start the animations when the rectangle is loaded.
AddHandler aRectangle.Loaded, Sub(sender As Object, e As RoutedEventArgs) pathAnimationStoryboard.Begin(Me)
End Sub
End Class
End Namespace
サンプル全体については、「パス アニメーションのサンプル」をご覧ください。
ジオメトリック パスを使用してオブジェクトを移動するために、MatrixAnimationUsingPath オブジェクトを使用する方法もあります。 例については、「パスに沿ってオブジェクトをアニメーション化する (行列アニメーション)」をご覧ください。
関連項目
GitHub で Microsoft と共同作業する
このコンテンツのソースは GitHub にあります。そこで、issue や pull request を作成および確認することもできます。 詳細については、共同作成者ガイドを参照してください。
.NET Desktop feedback
フィードバック
以下は間もなく提供いたします。2024 年を通じて、コンテンツのフィードバック メカニズムとして GitHub の issue を段階的に廃止し、新しいフィードバック システムに置き換えます。 詳細については、「https://aka.ms/ContentUserFeedback」を参照してください。
フィードバックの送信と表示