方法: キー フレームを使用して境界線の太さをアニメーション化するHow to: Animate the Thickness of a Border by Using Key Frames

この例では、BorderBorderThickness プロパティをアニメーション化する方法を示します。This example shows how to animate the BorderThickness property of a Border.

Example

次の例では、ThicknessAnimationUsingKeyFrames クラスを使用して、BorderBorderThickness プロパティをアニメーション化します。The following example uses the ThicknessAnimationUsingKeyFrames class to animate the BorderThickness property of a Border. このアニメーションは、次の方法で 3 つのキー フレームを使用します。This animation uses three key frames in the following manner:

  1. 最初の 0.5 秒間は、LinearThicknessKeyFrame クラスのインスタンスを使用して、境界線の太さを徐々に太くします。During the first half second, uses an instance of the LinearThicknessKeyFrame class to gradually increase the thickness of the border. この例では、LinearThicknessKeyFrame を使用して、値と値の間に滑らかな線形増加を作成します。The example uses LinearThicknessKeyFrame to create a smooth linear increase between values.

  2. 次の 0.5 秒間の終わりに、DiscreteThicknessKeyFrame クラスのインスタンスを使用して、境界線の太さを突然太くします。At the end of the next half second, uses an instance of the DiscreteThicknessKeyFrame class to suddenly increase the thickness of the border. DiscreteThicknessKeyFrame から派生するような不連続キー フレームによって、ある値から次の値への突然の変化が作成されます。つまり、アニメーションの動きがぎくしゃくします。Discrete key frames like those derived from DiscreteThicknessKeyFrame create sudden jumps between values, that is, the movement of the animation is jerky.

  3. 最後の 2 秒間は、SplineThicknessKeyFrame クラスのインスタンスを使用して、境界線の太さを細くします。During the final two seconds, uses an instance of the SplineThicknessKeyFrame class to decrease the thickness of the border. SplineThicknessKeyFrame から派生するようなスプライン キー フレームは、KeySpline プロパティの値に従って、ある値から次の値への可変遷移を作成します。Spline key frames like those derived from SplineThicknessKeyFrame create a variable transition between values according to the values of the KeySpline property. このキー フレームでは、アニメーションはゆっくりと始まりますが、時間セグメントの終点に向かって急激に速くなります。In this key frame, the animation starts off slow and speeds up exponentially toward the end of the time segment.

<!-- This example shows how to use the ThicknessAnimationUsingKeyFrames to create
an animation on the BorderThickness property of a Border. -->
<Page  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  x:Class="Microsoft.Samples.KeyFrameExamples.ThicknessAnimationUsingKeyFramesExample"
  Name="myRootElement"
  WindowTitle="ThicknessAnimationUsingKeyFrames Example">

  <StackPanel Orientation="Vertical" HorizontalAlignment="Center">
    <Border Background="#99FFFFFF" BorderBrush="#CCCCFF" BorderThickness="1"
    Margin="0,60,0,20" Padding="20"  >
      <Border.Triggers>
        <EventTrigger RoutedEvent="Border.Loaded">
          <BeginStoryboard>
            <Storyboard>

              <!-- Animating the BorderThickness property uses 3 KeyFrames. -->
              <ThicknessAnimationUsingKeyFrames
                Storyboard.TargetProperty="BorderThickness"
                Duration="0:0:5" FillBehavior="HoldEnd" RepeatBehavior="Forever">
                <ThicknessAnimationUsingKeyFrames.KeyFrames>

                  <!-- Using a LinearThicknessKeyFrame, thickness increases gradually
                  over the first half second of the animation. -->
                  <LinearThicknessKeyFrame KeyTime="0:0:0.5">
                    <LinearThicknessKeyFrame.Value>
                      <Thickness Left="8" Right="8" Top="6" Bottom="6" />
                    </LinearThicknessKeyFrame.Value>
                  </LinearThicknessKeyFrame>

                  <!-- Using a DiscreteThicknessKeyFrame, thickness increases suddenly
                  after the first second of the animation. -->
                  <DiscreteThicknessKeyFrame KeyTime="0:0:1">
                    <DiscreteThicknessKeyFrame.Value>
                      <Thickness Left="28" Right="28" Top="24" Bottom="24" />
                    </DiscreteThicknessKeyFrame.Value>
                  </DiscreteThicknessKeyFrame>

                  <!-- Using a SplineThicknessKeyFrame, thickness decreases slowly at first
                  and then suddenly contracts. This KeyFrame takes 2 seconds. -->
                  <SplineThicknessKeyFrame KeySpline="0.6,0.0 0.9,0.00" KeyTime="0:0:3">
                    <SplineThicknessKeyFrame.Value>
                      <Thickness Left="1" Right="1" Top="1" Bottom="8" />
                    </SplineThicknessKeyFrame.Value>
                  </SplineThicknessKeyFrame>

                </ThicknessAnimationUsingKeyFrames.KeyFrames>
              </ThicknessAnimationUsingKeyFrames>
            </Storyboard>
          </BeginStoryboard>
        </EventTrigger>
      </Border.Triggers>

      <TextBlock>
        This example shows how to use the ThicknessAnimationUsingKeyFrames to create
        an animation on the BorderThickness property of a Border. 
      </TextBlock>
    </Border>

  </StackPanel>
</Page>

サンプル全体については、「キーフレーム アニメーションのサンプル」を参照してください。For the complete sample, see KeyFrame Animation Sample.

関連項目See also