方法 : キー フレームを使用して点をアニメーション化する
更新 : 2007 年 11 月
PointAnimationUsingKeyFrames クラスを使用して Point をアニメーション化する方法を次の例に示します。
使用例
次の例では、三角形のパスに沿って楕円を移動します。この例では、PointAnimationUsingKeyFrames クラスを使用して EllipseGeometry の Center プロパティをアニメーション化します。このアニメーションは、次の方法で 3 つのキー フレームを使用します。
最初の 0.5 秒間は、LinearPointKeyFrame クラスのインスタンスを使用して、開始位置から一定の速度で、パスに沿って楕円を移動します。LinearPointKeyFrame のようなリニア キー フレームは、値間の滑らかな線形補間を作成します。
次の 0.5 秒間の終わりには、DiscretePointKeyFrame クラスのインスタンスを使用して、楕円をパスに沿って次の位置にいきなり移動します。DiscretePointKeyFrame のような不連続キー フレームを使用すると、ある値から次の値へのジャンプが生成されます。
最後の 2 秒間は、SplinePointKeyFrame クラスのインスタンスを使用して、楕円を開始位置まで戻します。SplinePointKeyFrame のようなスプライン キー フレームでは、KeySpline プロパティの値に従って、値間の可変遷移が作成されます。この例では、アニメーションは最初はゆっくりしていますが、時間セグメントの終点に向かって急激に速くなります。
using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Shapes;
using System.Windows.Media.Animation;
using System.Windows.Media;
namespace Microsoft.Samples.KeyFrameExamples
{
/// <summary>
/// This example shows how to use the PointAnimationUsingKeyFrames class
/// to animate the position of an object.
/// </summary>
public class PointAnimationUsingKeyFramesExample : Page
{
public PointAnimationUsingKeyFramesExample()
{
Title = "PointAnimationUsingKeyFrames Example";
Background = Brushes.White;
Margin = new Thickness(20);
// Create a NameScope for this page so that
// Storyboards can be used.
NameScope.SetNameScope(this, new NameScope());
// Create an EllipseGeometry.
EllipseGeometry myAnimatedEllipseGeometry =
new EllipseGeometry(new Point(200,100), 15, 15);
// Assign the EllipseGeometry a name so that
// it can be targeted by a Storyboard.
this.RegisterName(
"MyAnimatedEllipseGeometry", myAnimatedEllipseGeometry);
// Create a Path element to display the geometry.
Path aPath = new Path();
aPath.Fill = Brushes.Blue;
aPath.Data = myAnimatedEllipseGeometry;
// Create a Canvas to contain the path.
Canvas containerCanvas = new Canvas();
containerCanvas.Width = 500;
containerCanvas.Height = 400;
containerCanvas.Children.Add(aPath);
// Create a PointAnimationUsingKeyFrames to
// animate the EllipseGeometry.
PointAnimationUsingKeyFrames centerPointAnimation
= new PointAnimationUsingKeyFrames();
centerPointAnimation.Duration = TimeSpan.FromSeconds(5);
// Animate from the starting position to (100,300)
// over the first half-second using linear
// interpolation.
centerPointAnimation.KeyFrames.Add(
new LinearPointKeyFrame(
new Point(100, 300), // Target value (KeyValue)
KeyTime.FromTimeSpan(TimeSpan.FromSeconds(0.5))) // KeyTime
);
// Animate from (100,300) (the value of the previous key frame)
// to (400,300) at 1 second using discrete interpolation.
// Because the interpolation is discrete, the ellipse will appear
// to "jump" to (400,300) at 1 second.
centerPointAnimation.KeyFrames.Add(
new DiscretePointKeyFrame(
new Point(400, 300), // Target value (KeyValue)
KeyTime.FromTimeSpan(TimeSpan.FromSeconds(1))) // KeyTime
);
// Animate from (400,300) (the value of the previous key frame) to (200,100)
// over two seconds, starting at 1 second (the key time of the
// last key frame) and ending at 3 seconds.
centerPointAnimation.KeyFrames.Add(
new SplinePointKeyFrame(
new Point(200, 100), // Target value (KeyValue)
KeyTime.FromTimeSpan(TimeSpan.FromSeconds(3)), // KeyTime
new KeySpline(0.6, 0.0, 0.9, 0.0) // KeySpline
)
);
// Set the animation to repeat forever.
centerPointAnimation.RepeatBehavior = RepeatBehavior.Forever;
// Set the animation to target the Center property
// of the object named "MyAnimatedEllipseGeometry".
Storyboard.SetTargetName(centerPointAnimation, "MyAnimatedEllipseGeometry");
Storyboard.SetTargetProperty(
centerPointAnimation, new PropertyPath(EllipseGeometry.CenterProperty));
// Create a storyboard to apply the animation.
Storyboard ellipseStoryboard = new Storyboard();
ellipseStoryboard.Children.Add(centerPointAnimation);
// Start the storyboard when the Path loads.
aPath.Loaded += delegate(object sender, RoutedEventArgs e)
{
ellipseStoryboard.Begin(this);
};
Content = containerCanvas;
}
}
}
<Page
xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
Background="White" Margin="20">
<Canvas Width="400" Height="400">
<Path Fill="Blue">
<Path.Data>
<!-- Describes an ellipse. -->
<EllipseGeometry x:Name="MyAnimatedEllipseGeometry"
Center="200,100" RadiusX="15" RadiusY="15" />
</Path.Data>
<Path.Triggers>
<EventTrigger RoutedEvent="Path.Loaded">
<BeginStoryboard>
<Storyboard>
<!-- Animating the Center property uses 3 KeyFrames, which animate
the ellipse allong a triangular path. -->
<PointAnimationUsingKeyFrames
Storyboard.TargetProperty="Center"
Storyboard.TargetName="MyAnimatedEllipseGeometry"
Duration="0:0:5" RepeatBehavior="Forever">
<!-- Over the first half second, Using a LinearPointKeyFrame, the ellipse
moves steadily from its starting position along the first line of the
trianglar path. -->
<LinearPointKeyFrame
KeyTime="0:0:0.5"
Value="100,300" />
<!-- Using a DiscretePointKeyFrame, the ellipse suddenly changes position
after the first second of the animation. -->
<DiscretePointKeyFrame
KeyTime="0:0:1"
Value="400,300" />
<!-- Using a SplinePointKeyFrame, the ellipse moves back to its starting
position. It moves slowly at first and then speeds up. This key frame
takes 2 seconds to complete. -->
<SplinePointKeyFrame
KeySpline="0.6,0.0 0.9,0.00"
KeyTime="0:0:3"
Value="200,100" />
</PointAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Path.Triggers>
</Path>
</Canvas>
</Page>
サンプル全体については、「KeyFrame アニメーションのサンプル」を参照してください。
他のアニメーション例との一貫性を保つために、この例のコードでは、Storyboard オブジェクトを使用して PointAnimationUsingKeyFrames を適用しています。ただし、コードで 1 つのアニメーションを適用する場合は、Storyboard よりも BeginAnimation メソッドを使用する方が簡単です。例については、「方法 : ストーリーボードを使用せずにプロパティをアニメーション化する」を参照してください。