次の方法で共有

方法 : キー フレーム アニメーションのタイミングを制御する

  • [アーティクル]

更新 : 2007 年 11 月

この例では、キー フレーム アニメーション内のキー フレームのタイミングを制御する方法を示します。他のアニメーションと同様に、キー フレーム アニメーションにも Duration プロパティがあります。アニメーションの継続時間の指定に加えて、その継続時間のどの部分を各キー フレームに割り当てるかを指定する必要があります。継続時間を割り当てるには、アニメーションの各キー フレームの KeyTime を指定します。

各キー フレームの KeyTime は、キー フレームが終了するタイミングを指定します (キー フレームの再生時間は指定しません)。KeyTime は、TimeSpan 値として、パーセンテージとして、または特殊な Uniform 値や Paced 値として指定できます。

使用例

DoubleAnimationUsingKeyFrames を使用して、画面を横切るように四角形をアニメーション化する例を次に示します。キー フレームのキー時刻は、TimeSpan 値で設定します。

/*
   This Rectangle is animated with KeyTimes using TimeSpan Values. 
   It moves horizontally to 100 in the first 3 seconds, 100 to 300 in 
   the next second, and 300 to 500 in the last 6 seconds.
*/

// Create the a rectangle.
Rectangle aRectangle = new Rectangle();
aRectangle.Fill = Brushes.Blue;
aRectangle.Stroke = Brushes.Black;
aRectangle.StrokeThickness = 5;
aRectangle.Width = 50;
aRectangle.Height = 50;

// Create a transform to move the rectangle
// across the screen.
TranslateTransform translateTransform1 = 
    new TranslateTransform();
aRectangle.RenderTransform = translateTransform1;

// Create a DoubleAnimationUsingKeyFrames
// to animate the transform.
DoubleAnimationUsingKeyFrames transformAnimation = 
    new DoubleAnimationUsingKeyFrames();
transformAnimation.Duration = TimeSpan.FromSeconds(10);

// Animate to 100 at 3 seconds.
transformAnimation.KeyFrames.Add(
    new LinearDoubleKeyFrame(100, KeyTime.FromTimeSpan(TimeSpan.FromSeconds(3))));

// Animate to 300 at 4 seconds.
transformAnimation.KeyFrames.Add(
    new LinearDoubleKeyFrame(300, KeyTime.FromTimeSpan(TimeSpan.FromSeconds(4))));

// Animate to 500 at 10 seconds.
transformAnimation.KeyFrames.Add(
    new LinearDoubleKeyFrame(500, KeyTime.FromTimeSpan(TimeSpan.FromSeconds(10))));

// Start the animation when the rectangle is loaded.
aRectangle.Loaded += delegate(object sender, RoutedEventArgs e)
{
    translateTransform1.BeginAnimation(TranslateTransform.XProperty, transformAnimation);
};


<!-- This Rectangle is animated with KeyTimes using TimeSpan Values. 
     It moves horizontally to 100 in the first 3 seconds, 100 to 300 in 
     the next second, and 300 to 500 in the last 6 seconds. -->
<Rectangle Fill="Blue" Stroke="Black" StrokeThickness="5"
  Width="50" Height="50">
  <Rectangle.RenderTransform>
    <TranslateTransform x:Name="TranslateTransform1" />
  </Rectangle.RenderTransform>
  <Rectangle.Triggers>
    <EventTrigger RoutedEvent="Rectangle.Loaded">
      <BeginStoryboard>
        <Storyboard>
          <DoubleAnimationUsingKeyFrames 
            Storyboard.TargetName="TranslateTransform1" 
            Storyboard.TargetProperty="X"
            Duration="0:0:10">

            <!-- These KeyTime properties are specified as TimeSpan values 
                 which are in the form of "hours:minutes:seconds". -->
            <LinearDoubleKeyFrame Value="100" KeyTime="0:0:3" />
            <LinearDoubleKeyFrame Value="300" KeyTime="0:0:4" />
            <LinearDoubleKeyFrame Value="500" KeyTime="0:0:10" />
          </DoubleAnimationUsingKeyFrames>
        </Storyboard>
      </BeginStoryboard>
    </EventTrigger>
  </Rectangle.Triggers>
</Rectangle>

各キー フレームの値に達したときの図を次に示します。

キー値は 3 秒、4 秒、および 10 秒です

キー フレームのキー時刻をパーセンテージの値で設定する以外は前と同一であるアニメーションの例を次に示します。

/*
  This rectangle moves horizontally to 100 in the first 3 seconds, 
  100 to 300 in  the next second, and 300 to 500 in the last 6 seconds.
*/

// Create the a rectangle.
Rectangle aRectangle = new Rectangle();
aRectangle.Fill = Brushes.Purple;
aRectangle.Stroke = Brushes.Black;
aRectangle.StrokeThickness = 5;
aRectangle.Width = 50;
aRectangle.Height = 50;

// Create a transform to move the rectangle
// across the screen.
TranslateTransform translateTransform2 =
    new TranslateTransform();
aRectangle.RenderTransform = translateTransform2;

// Create a DoubleAnimationUsingKeyFrames
// to animate the transform.
DoubleAnimationUsingKeyFrames transformAnimation =
    new DoubleAnimationUsingKeyFrames();
transformAnimation.Duration = TimeSpan.FromSeconds(10);

// Animate to 100 at 30% of the animation's duration.
transformAnimation.KeyFrames.Add(
    new LinearDoubleKeyFrame(100, KeyTime.FromPercent(0.3)));

// Animate to 300 at 40% of the animation's duration.
transformAnimation.KeyFrames.Add(
    new LinearDoubleKeyFrame(300, KeyTime.FromPercent(0.4)));

// Animate to 500 at 100% of the animation's duration.
transformAnimation.KeyFrames.Add(
    new LinearDoubleKeyFrame(500, KeyTime.FromPercent(1.0)));

// Start the animation when the rectangle is loaded.
aRectangle.Loaded += delegate(object sender, RoutedEventArgs e)
{
    translateTransform2.BeginAnimation(TranslateTransform.XProperty, transformAnimation);
};

<!-- This rectangle moves horizontally to 100 in the first 3 seconds, 
     100 to 300 in  the next second, and 300 to 500 in the last 6 seconds.-->
<Rectangle Fill="Purple" Stroke="Black" StrokeThickness="5"
  Width="50" Height="50">
  <Rectangle.RenderTransform>
    <TranslateTransform x:Name="TranslateTransform2" />
  </Rectangle.RenderTransform>
  <Rectangle.Triggers>
    <EventTrigger RoutedEvent="Rectangle.Loaded">
      <BeginStoryboard>
        <Storyboard>
          <DoubleAnimationUsingKeyFrames 
            Storyboard.TargetName="TranslateTransform2" 
            Storyboard.TargetProperty="X"
            Duration="0:0:10">

            <!-- KeyTime properties are expressed as Percentages. -->
            <LinearDoubleKeyFrame Value="100" KeyTime="30%" />
            <LinearDoubleKeyFrame Value="300" KeyTime="40%" />
            <LinearDoubleKeyFrame Value="500" KeyTime="100%" />
          </DoubleAnimationUsingKeyFrames>
        </Storyboard>
      </BeginStoryboard>
    </EventTrigger>
  </Rectangle.Triggers>
</Rectangle>

各キー フレームの値に達したときの図を次に示します。

キー値は 3 秒、4 秒、および 10 秒です

Uniform キー時刻の値を使用する例を次に示します。

/*
   This rectangle is animated with KeyTimes using Uniform values. 
   Goes to 100 in the first 3.3 seconds, 100 to
   300 in the next 3.3 seconds, 300 to 500 in the last 3.3 seconds.
*/

// Create the a rectangle.
Rectangle aRectangle = new Rectangle();
aRectangle.Fill = Brushes.Red;
aRectangle.Stroke = Brushes.Black;
aRectangle.StrokeThickness = 5;
aRectangle.Width = 50;
aRectangle.Height = 50;

// Create a transform to move the rectangle
// across the screen.
TranslateTransform translateTransform3 =
    new TranslateTransform();
aRectangle.RenderTransform = translateTransform3;

// Create a DoubleAnimationUsingKeyFrames
// to animate the transform.
DoubleAnimationUsingKeyFrames transformAnimation =
    new DoubleAnimationUsingKeyFrames();
transformAnimation.Duration = TimeSpan.FromSeconds(10);

/*
   KeyTime properties are expressed with values of Uniform. When a key time is set to
   "Uniform" the total allotted time of the animation is divided evenly between key frames.  
   In this example, the total duration of the animation is ten seconds and there are four 
   key frames each of which are set to "Uniform", therefore, the duration of each key frame 
   is 3.3 seconds (10/3).
 */

// Animate to 100.
transformAnimation.KeyFrames.Add(
    new LinearDoubleKeyFrame(100, KeyTime.Uniform));

// Animate to 300.
transformAnimation.KeyFrames.Add(
    new LinearDoubleKeyFrame(300, KeyTime.Uniform));

// Animate to 500.
transformAnimation.KeyFrames.Add(
    new LinearDoubleKeyFrame(500, KeyTime.Uniform));

// Start the animation when the rectangle is loaded.
aRectangle.Loaded += delegate(object sender, RoutedEventArgs e)
{
    translateTransform3.BeginAnimation(TranslateTransform.XProperty, transformAnimation);
};


<!-- This rectangle is animated with KeyTimes using Uniform values. 
     Goes to 100 in the first 3.3 seconds, 100 to
     300 in the next 3.3 seconds, 300 to 500 in the last 3.3 seconds. -->
<Rectangle Fill="Red" Stroke="Black" StrokeThickness="5"
  Width="50" Height="50">
  <Rectangle.RenderTransform>
    <TranslateTransform x:Name="TranslateTransform3" />
  </Rectangle.RenderTransform>
  <Rectangle.Triggers>
    <EventTrigger RoutedEvent="Rectangle.Loaded">
      <BeginStoryboard>
        <Storyboard>
          <DoubleAnimationUsingKeyFrames 
            Storyboard.TargetName="TranslateTransform3" 
            Storyboard.TargetProperty="X"
            Duration="0:0:10">

            <!--   KeyTime properties are expressed with values of Uniform. When a key time is set to
                   "Uniform" the total allotted time of the animation is divided evenly between key frames.  
                   In this example, the total duration of the animation is ten seconds and there are four 
                   key frames each of which are set to "Uniform", therefore, the duration of each key frame 
                   is 3.3 seconds (10/3). -->
            <LinearDoubleKeyFrame Value="100" KeyTime="Uniform" />
            <LinearDoubleKeyFrame Value="300" KeyTime="Uniform" />
            <LinearDoubleKeyFrame Value="500" KeyTime="Uniform" />
          </DoubleAnimationUsingKeyFrames>
        </Storyboard>
      </BeginStoryboard>
    </EventTrigger>
  </Rectangle.Triggers>
</Rectangle>

各キー フレームの値に達したときの図を次に示します。

キー値は 3.3 秒、6.6 秒、および 9.9 秒です

最後の例では、Paced キー時刻の値を使用します。

/*
   This rectangle is animated with KeyTimes using Paced Values. 
   The rectangle moves between key frames at uniform rate except for first key frame
   because using a Paced value on the first KeyFrame in a collection of frames gives a time of zero.
*/

// Create the a rectangle.
Rectangle aRectangle = new Rectangle();
aRectangle.Fill = Brushes.Orange;
aRectangle.Stroke = Brushes.Black;
aRectangle.StrokeThickness = 5;
aRectangle.Width = 50;
aRectangle.Height = 50;

// Create a transform to move the rectangle
// across the screen.
TranslateTransform translateTransform4 =
    new TranslateTransform();
aRectangle.RenderTransform = translateTransform4;

// Create a DoubleAnimationUsingKeyFrames
// to animate the transform.
DoubleAnimationUsingKeyFrames transformAnimation =
    new DoubleAnimationUsingKeyFrames();
transformAnimation.Duration = TimeSpan.FromSeconds(10);

/*
   Use Paced values when a constant rate is desired. 
   The time allocated to a key frame with a KeyTime of "Paced" is
   determined by the time allocated to the other key frames of the animation. This time is 
   calculated to attempt to give a "paced" or "constant velocity" for the animation.
 */

// Animate to 100.
transformAnimation.KeyFrames.Add(
    new LinearDoubleKeyFrame(100, KeyTime.Paced));

// Animate to 300.
transformAnimation.KeyFrames.Add(
    new LinearDoubleKeyFrame(300, KeyTime.Paced));

// Animate to 500.
transformAnimation.KeyFrames.Add(
    new LinearDoubleKeyFrame(500, KeyTime.Paced));

// Start the animation when the rectangle is loaded.
aRectangle.Loaded += delegate(object sender, RoutedEventArgs e)
{
    translateTransform4.BeginAnimation(TranslateTransform.XProperty, transformAnimation);
};


<!-- This rectangle is animated with KeyTimes using Paced Values. 
     The rectangle moves between key frames at uniform rate except for first key frame
     because using a Paced value on the first KeyFrame in a collection of frames gives a time of zero. -->
<Rectangle Fill="Orange" Stroke="Black" StrokeThickness="5"
  Width="50" Height="50">
  <Rectangle.RenderTransform>
    <TranslateTransform x:Name="TranslateTransform4" />
  </Rectangle.RenderTransform>
  <Rectangle.Triggers>
    <EventTrigger RoutedEvent="Rectangle.Loaded">
      <BeginStoryboard>
        <Storyboard>
          <DoubleAnimationUsingKeyFrames 
            Storyboard.TargetName="TranslateTransform4" 
            Storyboard.TargetProperty="X"
            Duration="0:0:10">

            <!-- Use Paced values when a constant rate is desired. 
                 The time allocated to a key frame with a KeyTime of "Paced" is
                 determined by the time allocated to the other key frames of the animation. This time is 
                 calculated to attempt to give a "paced" or "constant velocity" for the animation. -->
            <LinearDoubleKeyFrame Value="100" KeyTime="Paced" />
            <LinearDoubleKeyFrame Value="300" KeyTime="Paced" />
            <LinearDoubleKeyFrame Value="500" KeyTime="Paced" />
          </DoubleAnimationUsingKeyFrames>
        </Storyboard>
      </BeginStoryboard>
    </EventTrigger>
  </Rectangle.Triggers>
</Rectangle>

各キー フレームの値に達したときの図を次に示します。

キー値は 0 秒、5 秒、および 10 秒です

この例のコードでは、単純化するためにストーリーボードではなくローカル アニメーションを使用しています。1 つのアニメーションだけが 1 つのプロパティに適用されるためですが、代わりにストーリーボードを使用するように変更することもできます。コードでストーリーボードを宣言する方法の例については、「方法 : ストーリーボードを使ってプロパティをアニメーション化する」を参照してください。

サンプル全体については、「KeyFrame アニメーションのサンプル」を参照してください。キー フレーム アニメーションの詳細については、「キー フレーム アニメーションの概要」を参照してください。

参照

概念

キー フレーム アニメーションの概要

アニメーションの概要

その他の技術情報

アニメーションとタイミングのサンプル

アニメーションおよびタイミングに関する「方法」トピック