방법: 키 프레임을 사용하여 Double에 애니메이션 효과 주기
업데이트: 2007년 11월
이 예제에서는 키 프레임을 사용하여 Double 형식의 속성 값에 애니메이션 효과를 주는 방법을 보여 줍니다.
예제
다음 예제에서는 화면에서 사각형을 이동합니다. 이 예제에서는 Rectangle에 적용된 TranslateTransform의 X 속성에 DoubleAnimationUsingKeyFrames 클래스를 사용하여 애니메이션 효과를 줍니다. 무제한 반복되는 이 애니메이션에서는 다음과 같은 방식으로 세 가지 키 프레임을 사용합니다.
처음 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>
전체 샘플을 보려면 KeyFrame 애니메이션 샘플을 참조하십시오.
다른 애니메이션 예제와의 일관성을 위해 이 예제의 코드 버전에서는 Storyboard 개체를 사용하여 DoubleAnimationUsingKeyFrames를 적용합니다. 코드에 단일 애니메이션을 적용하는 경우 Storyboard를 사용하는 대신 BeginAnimation 메서드를 사용하면 더 간편합니다. 예제를 보려면 방법: Storyboard를 사용하지 않고 속성에 애니메이션 효과 주기를 참조하십시오.