방법: 키 프레임 애니메이션 보간 제어
업데이트: 2007년 11월
애니메이션의 보간은 애니메이션에서 해당 지속 시간 동안 값 사이를 전환하는 방법을 말합니다. 애니메이션에서 사용할 키 프레임 형식을 선택하면 해당 키 프레임 세그먼트에 대한 보간 방법을 정의할 수 있습니다. 보간 방법에는 선형, 불연속 및 스플라인의 세 가지 유형이 있습니다. 다음 예제에서는 DoubleAnimationUsingKeyFrames를 사용하여 이러한 보간 유형을 설명합니다.
예제
다음 예제에서는 DoubleAnimationUsingKeyFrames 클래스에서 사용할 수 있는 서로 다른 보간 방법을 사용하여 Rectangle의 위치를 변경하는 애니메이션 효과를 만듭니다.
처음 3초 동안에는 LinearDoubleKeyFrame 클래스의 인스턴스를 사용하여 시작 위치에서 위치 500까지 경로를 따라 일정한 속도로 사각형을 이동합니다. LinearDoubleKeyFrame과 같은 선형 키 프레임을 사용하면 값 간에 완만한 선형 이동이 생성됩니다.
4초가 끝날 즈음에는 DiscreteDoubleKeyFrame 클래스의 인스턴스를 사용하여 사각형을 급격하게 다음 위치로 이동합니다. DiscreteDoubleKeyFrame과 같은 분리된 키 프레임을 사용하면 값 간에 급격한 점프가 생성됩니다. 이 예제에서는 사각형이 시작 위치에 있다가 위치 500에서 갑자기 나타납니다.
마지막 2초 동안은 SplineDoubleKeyFrame 클래스의 인스턴스를 사용하여 사각형을 원래 시작 위치로 이동합니다. SplineDoubleKeyFrame 같은 스플라인 키 프레임은 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 DoubleAnimationUsingKeyFrames class to
/// animate the position of an object.
/// Key frame animations enable you to create complex animations
/// by specifying multiple destination values
/// and controlling the animation's interpolation method.
/// </summary>
public class AltDoubleAnimationUsingKeyFramesExample : Page
{
public AltDoubleAnimationUsingKeyFramesExample()
{
Title = "DoubleAnimationUsingKeyFrames 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 a rectangle.
Rectangle aRectangle = new Rectangle();
aRectangle.Width = 100;
aRectangle.Height = 100;
aRectangle.Stroke = Brushes.Black;
aRectangle.StrokeThickness = 5;
// Create a Canvas to contain and
// position the rectangle.
Canvas containerCanvas = new Canvas();
containerCanvas.Width = 610;
containerCanvas.Height = 300;
containerCanvas.Children.Add(aRectangle);
Canvas.SetTop(aRectangle, 100);
Canvas.SetLeft(aRectangle, 10);
// Create a TranslateTransform to
// move the rectangle.
TranslateTransform animatedTranslateTransform =
new TranslateTransform();
aRectangle.RenderTransform = animatedTranslateTransform;
// Assign the TranslateTransform a name so that
// it can be targeted by a Storyboard.
this.RegisterName(
"AnimatedTranslateTransform", animatedTranslateTransform);
// Create a DoubleAnimationUsingKeyFrames to
// animate the TranslateTransform.
DoubleAnimationUsingKeyFrames translationAnimation
= new DoubleAnimationUsingKeyFrames();
translationAnimation.Duration = TimeSpan.FromSeconds(6);
// Animate from the starting position to 500
// over the first second using linear
// interpolation.
translationAnimation.KeyFrames.Add(
new LinearDoubleKeyFrame(
500, // Target value (KeyValue)
KeyTime.FromTimeSpan(TimeSpan.FromSeconds(3))) // KeyTime
);
// Animate from 500 (the value of the previous key frame)
// to 400 at 4 seconds using discrete interpolation.
// Because the interpolation is discrete, the rectangle will appear
// to "jump" from 500 to 400.
translationAnimation.KeyFrames.Add(
new DiscreteDoubleKeyFrame(
400, // Target value (KeyValue)
KeyTime.FromTimeSpan(TimeSpan.FromSeconds(4))) // KeyTime
);
// Animate from 400 (the value of the previous key frame) to 0
// over two seconds, starting at 4 seconds (the key time of the
// last key frame) and ending at 6 seconds.
translationAnimation.KeyFrames.Add(
new SplineDoubleKeyFrame(
0, // Target value (KeyValue)
KeyTime.FromTimeSpan(TimeSpan.FromSeconds(6)), // KeyTime
new KeySpline(0.6,0.0,0.9,0.0) // KeySpline
)
);
// Set the animation to repeat forever.
translationAnimation.RepeatBehavior = RepeatBehavior.Forever;
// Set the animation to target the X property
// of the object named "AnimatedTranslateTransform."
Storyboard.SetTargetName(translationAnimation, "AnimatedTranslateTransform");
Storyboard.SetTargetProperty(
translationAnimation, new PropertyPath(TranslateTransform.XProperty));
// Create a storyboard to apply the animation.
Storyboard translationStoryboard = new Storyboard();
translationStoryboard.Children.Add(translationAnimation);
// Start the storyboard after the rectangle loads.
aRectangle.Loaded += delegate(object sender, RoutedEventArgs e)
{
translationStoryboard.Begin(this);
};
Content = containerCanvas;
}
}
}
<!-- This example shows how to use the DoubleAnimationUsingKeyFrames to
animate the position of an object.
Key frame animations enable you to create complex animations
by specifying multiple destination values
and controlling the animation's interpolation method.
-->
<Page
xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
Title="DoubleAnimationUsingKeyFrames Example"
Background="White" Margin="20">
<Canvas Width="610" Height="300">
<!-- The position of this rectangle is animated using
a key frame animation. -->
<Rectangle
Canvas.Top="100"
Canvas.Left="10"
Height="100"
Width="100"
Stroke="Black"
StrokeThickness="5">
<Rectangle.RenderTransform>
<TranslateTransform x:Name="AnimatedTranslateTransform" />
</Rectangle.RenderTransform>
<Rectangle.Triggers>
<EventTrigger RoutedEvent="Rectangle.Loaded">
<BeginStoryboard>
<Storyboard>
<!-- Animate the TranslateTransform.X property using 3 KeyFrames
which animates the rectangle along a straight line.
This animation repeats indefinitely. -->
<DoubleAnimationUsingKeyFrames
Storyboard.TargetName="AnimatedTranslateTransform"
Storyboard.TargetProperty="X"
Duration="0:0:6"
RepeatBehavior="Forever">
<!-- Using a LinearDoubleKeyFrame, the rectangle moves
steadily from its starting position to 500 over
the first 3 seconds. -->
<LinearDoubleKeyFrame Value="500" KeyTime="0:0:3" />
<!-- Using a DiscreteDoubleKeyFrame, the rectangle suddenly
appears at 400 after the fourth second of the animation. -->
<DiscreteDoubleKeyFrame Value="400" KeyTime="0:0:4" />
<!-- Using a SplineDoubleKeyFrame, the rectangle moves
back to its starting point. The
animation starts out slowly at first and then speeds up.
This KeyFrame ends after the 6th
second. -->
<SplineDoubleKeyFrame KeySpline="0.6,0.0 0.9,0.00" Value="0" KeyTime="0:0:6" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Rectangle.Triggers>
</Rectangle>
</Canvas>
</Page>
모든 <Type>AnimationUsingKeyFrames 클래스가 모든 보간 방법을 지원하는 것은 아닙니다. 자세한 내용은 키 프레임 애니메이션 개요를 참조하십시오.