이 설명서는 보관되지만 유지 되지 않습니다.

DoubleAnimationUsingKeyFrames.KeyFrames 속성

업데이트: 2007년 11월

애니메이션을 정의하는 DoubleKeyFrame 개체 컬렉션을 가져오거나 설정합니다.

네임스페이스:  System.Windows.Media.Animation
어셈블리:  PresentationCore(PresentationCore.dll)
XAML의 XMLNS: http://schemas.microsoft.com/winfx/xaml/presentation

public DoubleKeyFrameCollection KeyFrames { get; set; }
/** @property */
public DoubleKeyFrameCollection get_KeyFrames()
/** @property */
public  void set_KeyFrames(DoubleKeyFrameCollection value)

public function get KeyFrames () : DoubleKeyFrameCollection
public function set KeyFrames (value : DoubleKeyFrameCollection)
<object>
  <DoubleKeyFrameCollection .../>
</object>

속성 값

형식: System.Windows.Media.Animation.DoubleKeyFrameCollection

애니메이션을 정의하는 DoubleKeyFrame 개체 컬렉션입니다. 기본값은 Empty입니다.

이 예제에서는 키 프레임을 사용하여 Double 형식의 속성 값에 애니메이션 효과를 주는 방법을 보여 줍니다.

다음 예제에서는 화면에서 사각형을 이동합니다. 이 예제에서는 Rectangle에 적용된 TranslateTransformX 속성에 DoubleAnimationUsingKeyFrames 클래스를 사용하여 애니메이션 효과를 줍니다. 무제한 반복되는 이 애니메이션에서는 다음과 같은 방식으로 세 가지 키 프레임을 사용합니다.

  1. 처음 3초 동안에는 LinearDoubleKeyFrame 클래스의 인스턴스를 사용하여 시작 위치에서 위치 500까지 경로를 따라 일정한 속도로 사각형을 이동합니다. LinearDoubleKeyFrame과 같은 선형 키 프레임을 사용하면 값 간에 완만한 선형 이동이 생성됩니다.

  2. 4초가 끝날 즈음에는 DiscreteDoubleKeyFrame 클래스의 인스턴스를 사용하여 사각형을 급격하게 다음 위치로 이동합니다. DiscreteDoubleKeyFrame과 같은 분리된 키 프레임을 사용하면 값 간에 급격한 점프가 생성됩니다. 이 예제에서는 사각형이 시작 위치에 있다가 위치 500에서 갑자기 나타납니다.

  3. 마지막 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="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://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를 사용하지 않고 속성에 애니메이션 효과 주기를 참조하십시오.

Windows Vista

.NET Framework 및 .NET Compact Framework에서 모든 플랫폼의 전체 버전을 지원하지는 않습니다. 지원되는 버전의 목록을 보려면 .NET Framework 시스템 요구 사항을 참조하십시오.

.NET Framework

3.5, 3.0에서 지원
표시: