HOW TO：使用 PointAnimation 建立物件位置的動畫
本範例說明如何使用 PointAnimation 類別，沿著 Path 將物件顯示為動畫。
範例
下列範例會在畫面上將橢圓形沿著 Path 從某一點移動至另一點。 範例會使用 PointAnimation 讓 Center 屬性產生變動，藉由改變 EllipseGeometry 的位置以顯示動畫。
Imports Microsoft.VisualBasic
Imports System
Imports System.Windows
Imports System.Windows.Controls
Imports System.Windows.Shapes
Imports System.Windows.Media.Animation
Imports System.Windows.Media
Namespace SDKSamples
' This example shows how to use PointAnimation to animate the
' position of an ellipse by animating the Center property of an
' EllipseGeometry. PointAnimation is used because the Center property
' takes a Point value.
Public Class PointAnimationExample
Inherits Page
Public Sub New()
' Create a NameScope for this page so that
' Storyboards can be used.
NameScope.SetNameScope(Me, New NameScope())
Dim myEllipseGeometry As New EllipseGeometry()
With myEllipseGeometry
.Center = New Point(200, 100)
.RadiusX = 15
.RadiusY = 15
End With
' Assign the EllipseGeometry a name so that
' it can be targeted by a Storyboard.
Me.RegisterName("MyAnimatedEllipseGeometry", myEllipseGeometry)
Dim myPath As New Path()
With myPath
.Fill = Brushes.Blue
.Margin = New Thickness(15)
.Data = myEllipseGeometry
End With
Dim myPointAnimation As New PointAnimation()
With myPointAnimation
.Duration = TimeSpan.FromSeconds(2)
' Set the animation to repeat forever.
.RepeatBehavior = RepeatBehavior.Forever
' Set the From and To properties of the animation.
.From = New Point(200, 100)
.To = New Point(450, 250)
End With
' Set the animation to target the Center property
' of the object named "MyAnimatedEllipseGeometry."
Storyboard.SetTargetName(myPointAnimation, "MyAnimatedEllipseGeometry")
Storyboard.SetTargetProperty(myPointAnimation, New PropertyPath(EllipseGeometry.CenterProperty))
' Create a storyboard to apply the animation.
Dim ellipseStoryboard As New Storyboard()
ellipseStoryboard.Children.Add(myPointAnimation)
' Start the storyboard when the Path loads.
AddHandler myPath.Loaded, Sub(sender As Object, e As RoutedEventArgs) ellipseStoryboard.Begin(Me)
Dim containerCanvas As New Canvas()
containerCanvas.Children.Add(myPath)
Content = containerCanvas
End Sub
End Class
End Namespace
using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Shapes;
using System.Windows.Media.Animation;
using System.Windows.Media;
namespace SDKSamples
{
// This example shows how to use PointAnimation to animate the
// position of an ellipse by animating the Center property of an
// EllipseGeometry. PointAnimation is used because the Center property
// takes a Point value.
public class PointAnimationExample : Page
{
public PointAnimationExample()
{
// Create a NameScope for this page so that
// Storyboards can be used.
NameScope.SetNameScope(this, new NameScope());
EllipseGeometry myEllipseGeometry = new EllipseGeometry();
myEllipseGeometry.Center = new Point(200, 100);
myEllipseGeometry.RadiusX = 15;
myEllipseGeometry.RadiusY = 15;
// Assign the EllipseGeometry a name so that
// it can be targeted by a Storyboard.
this.RegisterName(
"MyAnimatedEllipseGeometry", myEllipseGeometry);
Path myPath = new Path();
myPath.Fill = Brushes.Blue;
myPath.Margin = new Thickness(15);
myPath.Data = myEllipseGeometry;
PointAnimation myPointAnimation = new PointAnimation();
myPointAnimation.Duration = TimeSpan.FromSeconds(2);
// Set the animation to repeat forever.
myPointAnimation.RepeatBehavior = RepeatBehavior.Forever;
// Set the From and To properties of the animation.
myPointAnimation.From = new Point(200, 100);
myPointAnimation.To = new Point(450, 250);
// Set the animation to target the Center property
// of the object named "MyAnimatedEllipseGeometry."
Storyboard.SetTargetName(myPointAnimation, "MyAnimatedEllipseGeometry");
Storyboard.SetTargetProperty(
myPointAnimation, new PropertyPath(EllipseGeometry.CenterProperty));
// Create a storyboard to apply the animation.
Storyboard ellipseStoryboard = new Storyboard();
ellipseStoryboard.Children.Add(myPointAnimation);
// Start the storyboard when the Path loads.
myPath.Loaded += delegate(object sender, RoutedEventArgs e)
{
ellipseStoryboard.Begin(this);
};
Canvas containerCanvas = new Canvas();
containerCanvas.Children.Add(myPath);
Content = containerCanvas;
}
}
}
<!-- This example shows how to use PointAnimation to animate the
position of an ellipse by animating the Center property of an
EllipseGeometry. PointAnimation is used because the Center property
takes a Point value. -->
<Page xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml">
<Canvas>
<Path Fill="Blue" Margin="15,15,15,15">
<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 Name="MyBeginStoryboard">
<Storyboard>
<!-- Animate the Center property so that the ellipse animates from
one point on the screen to another. -->
<PointAnimation
Storyboard.TargetProperty="Center"
Storyboard.TargetName="MyAnimatedEllipseGeometry"
Duration="0:0:2" From="200,100" To="450,250" RepeatBehavior="Forever" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Path.Triggers>
</Path>
</Canvas>
</Page>