Postupy: Animace tloušťky ohraničení použitím klíčových snímků

  • Článek

Tento příklad ukazuje, jak animovat BorderThickness vlastnost objektu Border.

Příklad

Následující příklad používá ThicknessAnimationUsingKeyFrames třídu k animaci BorderThickness vlastnosti Border. Tato animace používá tři klíčové snímky následujícím způsobem:

  1. Během první poloviny sekundy používá instanci LinearThicknessKeyFrame třídy k postupnému zvýšení tloušťky ohraničení. Příklad používá LinearThicknessKeyFrame k vytvoření hladkého lineárního zvýšení mezi hodnotami.

  2. Na konci další poloviny sekundy používá instanci DiscreteThicknessKeyFrame třídy k náhlému zvýšení tloušťky ohraničení. Diskrétní klíčové snímky, jako jsou snímky odvozené z DiscreteThicknessKeyFrame vytvoření náhlého přeskakování mezi hodnotami, to znamená, že pohyb animace je trhaný.

  3. Během posledních dvou sekund použije instanci SplineThicknessKeyFrame třídy ke snížení tloušťky ohraničení. Klíčové rámce spline, jako jsou ty odvozené z SplineThicknessKeyFrame vytvoření proměnné přechod mezi hodnotami podle hodnot KeySpline vlastnosti. V tomto klíčovém rámečku se animace spustí pomalu a exponenciálně se zrychlí směrem ke konci časového segmentu.

<!-- 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>

Kompletní ukázku najdete v části Ukázka animace klíčového rámce.

Viz také