HOW TO：使用主要畫面格建立框線粗細的動畫

發行項
08/21/2008

更新：2007 年 11 月

本範例說明如何將 Border 的 BorderThickness 屬性顯示為動畫。

範例

下列範例會使用 ThicknessAnimationUsingKeyFrames 類別將 Border 的 BorderThickness 屬性顯示為動畫。這個動畫以下列方式使用三個主要畫面格。

在前半秒內，使用 LinearThicknessKeyFrame 類別的執行個體，逐漸將框線加粗。範例是使用 LinearThicknessKeyFrame，在兩個值之間建立平滑的線性遞增。
在後半秒結尾，使用 DiscreteThicknessKeyFrame 類別的執行個體，突然將框線加粗。不連續的主要畫面格 (例如衍生自 DiscreteThicknessKeyFrame 的主要畫面格) 會在值之間建立突然的跳躍點 (亦即動畫的動作會變得不穩定)。
在最後兩秒內，使用 SplineThicknessKeyFrame 類別的執行個體，使框線變細。Spline 主要畫面格 (例如衍生自 SplineThicknessKeyFrame 的主要畫面格) 會根據 KeySpline 屬性的值建立值之間的可變轉換。在這個主要畫面格中，動畫一開始很緩慢，接著當接近時間區段結尾時會以等比級數的速度加速。

<!-- This example shows how to use the ThicknessAnimationUsingKeyFrames to create
an animation on the BorderThickness property of a Border. -->
<Page  xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="https://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>

如需完整範例，請參閱 KeyFrame 動畫範例。

請參閱

共用方式為

HOW TO：使用主要畫面格建立框線粗細的動畫

範例

請參閱

工作

概念

參考

其他資源

其他資源