HOW TO：使用主要畫面格建立點的動畫
更新：2007 年 11 月
本範例說明如何使用 PointAnimationUsingKeyFrames 類別，將 Point 顯示為動畫。
範例
下列範例會沿著三角形路徑移動一個橢圓形。此範例使用 PointAnimationUsingKeyFrames 類別，將 EllipseGeometry 的 Center 屬性顯示為動畫。這個動畫以下列方式使用三個主要畫面格。
在前半秒，使用 LinearPointKeyFrame 類別的執行個體，從起始位置沿著路徑以穩定速率移動橢圓形。線性的主要畫面格 (例如 LinearPointKeyFrame) 會在兩個值之間建立平滑的線性插補 (Linear Interpolation)。
在後半秒結尾，使用 DiscretePointKeyFrame 類別的執行個體，突然將橢圓形沿著路徑移動至下一個位置。不連續的主要畫面格 (例如 DiscretePointKeyFrame) 會在值之間建立突然的跳躍點。
在最後兩秒時，使用 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。不過，在程式碼中套用單一動畫時，使用 BeginAnimation 方法會比使用 Storyboard 更簡單。如需範例，請參閱 HOW TO：不使用腳本而建立屬性的動畫。