방법: 키 프레임을 사용하여 포인트에 애니메이션 효과 주기
이 예제에서는 PointAnimationUsingKeyFrames 클래스를 사용하여 Point에 애니메이션 효과를 주는 방법을 보여 줍니다.
예제
다음 예제에서는 삼각형 경로를 따라 타원을 이동합니다. 예제에서는 PointAnimationUsingKeyFrames 클래스를 사용하여 EllipseGeometry의 Center 속성에 애니메이션 효과를 줍니다. 이 애니메이션에서는 다음과 같은 방식으로 세 가지 키 프레임을 사용합니다.
처음 0.5초 동안에는 LinearPointKeyFrame 클래스의 인스턴스를 사용하여 시작 위치부터 일정한 속도로 경로를 따라 타원을 이동합니다. LinearPointKeyFrame과 같은 선형 키 프레임은 값 사이에 부드러운 선형 보간을 생성합니다.
다음 0.5초가 끝날 무렵에는 DiscretePointKeyFrame 클래스의 인스턴스를 사용하여 경로를 따라 타원을 급격하게 다음 위치로 이동합니다. DiscretePointKeyFrame과 같은 불연속 키 프레임을 사용하면 값 간에 급격한 점프가 생성됩니다.
마지막 2초 동안은 SplinePointKeyFrame 클래스의 인스턴스를 사용하여 타원을 원래 시작 위치로 이동합니다. SplinePointKeyFrame 같은 스플라인 키 프레임은 KeySpline 속성 값에 따라 값 사이의 가변 전환을 만듭니다. 이 예제의 경우 애니메이션이 처음에는 서서히 시작되다가 시간 세그먼트의 끝 부분으로 갈수록 빠르게 진행됩니다.
Imports System
Imports System.Windows
Imports System.Windows.Controls
Imports System.Windows.Shapes
Imports System.Windows.Media.Animation
Imports 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
Inherits Page
Public Sub New()
Title = "PointAnimationUsingKeyFrames Example"
Background = Brushes.White
Margin = New Thickness(20)
' Create a NameScope for this page so that
' Storyboards can be used.
NameScope.SetNameScope(Me, New NameScope())
' Create an EllipseGeometry.
Dim myAnimatedEllipseGeometry As New EllipseGeometry(New Point(200,100), 15, 15)
' Assign the EllipseGeometry a name so that
' it can be targeted by a Storyboard.
Me.RegisterName("MyAnimatedEllipseGeometry", myAnimatedEllipseGeometry)
' Create a Path element to display the geometry.
Dim aPath As New Path()
aPath.Fill = Brushes.Blue
aPath.Data = myAnimatedEllipseGeometry
' Create a Canvas to contain the path.
Dim containerCanvas As New Canvas()
containerCanvas.Width = 500
containerCanvas.Height = 400
containerCanvas.Children.Add(aPath)
' Create a PointAnimationUsingKeyFrames to
' animate the EllipseGeometry.
Dim centerPointAnimation As 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), KeyTime.FromTimeSpan(TimeSpan.FromSeconds(0.5)))) ' KeyTime - Target value (KeyValue)
' 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), KeyTime.FromTimeSpan(TimeSpan.FromSeconds(1)))) ' KeyTime - Target value (KeyValue)
' 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), KeyTime.FromTimeSpan(TimeSpan.FromSeconds(3)), New KeySpline(0.6, 0.0, 0.9, 0.0))) ' KeySpline - KeyTime - Target value (KeyValue)
' 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.
Dim ellipseStoryboard As New Storyboard()
ellipseStoryboard.Children.Add(centerPointAnimation)
' Start the storyboard when the Path loads.
AddHandler aPath.Loaded, Sub(sender As Object, e As RoutedEventArgs) ellipseStoryboard.Begin(Me)
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 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 Animation 샘플을 참조하십시오.
다른 애니메이션 예제와의 일관성을 위해 이 예제의 코드 버전에서는 Storyboard 개체를 사용하여 PointAnimationUsingKeyFrames를 적용합니다. 하지만 코드에 단일 애니메이션을 적용하는 경우 Storyboard를 사용하는 대신 BeginAnimation 메서드를 사용하면 더 간편합니다. 예제를 보려면 방법: Storyboard를 사용하지 않고 속성에 애니메이션 효과 주기을 참조하십시오.