Freigeben über

Animieren der Breite eines Rahmens mithilfe von Keyframes

Dieses Beispiel zeigt, wie Sie die BorderThickness-Eigenschaft eines Border animieren können.

Beispiel

Im folgenden Beispiel wird die ThicknessAnimationUsingKeyFrames-Klasse verwendet, um die BorderThickness-Eigenschaft einer Border zu animieren. Diese Animation verwendet drei Keyframes auf folgende Weise:

  1. In der ersten halben Sekunde wird eine Instanz der LinearThicknessKeyFrame-Klasse verwendet, um die Breite des Rahmens schrittweise zu erhöhen. Im Beispiel wird LinearThicknessKeyFrame verwendet, um eine gleichmäßige lineare Zunahme zwischen Werten zu erstellen.

  2. Am Ende der nächsten halben Sekunde wird eine Instanz der DiscreteThicknessKeyFrame-Klasse verwendet, um die Breite des Rahmens plötzlich zu erhöhen. Diskrete Keyframes, wie sie von DiscreteThicknessKeyFrame abgeleitet werden, erzeugen plötzliche Sprünge zwischen den Werten, d.h. die Bewegung der Animation ist ruckartig.

  3. Während der letzten zwei Sekunden wird eine Instanz der SplineThicknessKeyFrame-Klasse verwendet, um die Dicke des Rahmens zu verringern. Splineschlüsselframes wie die von SplineThicknessKeyFrame abgeleiteten erzeugen einen variablen Übergang zwischen den Werten entsprechend den Werten der KeySpline-Eigenschaft. In diesem Keyframe beginnt die Animation langsam und beschleunigt exponentiell gegen Ende des Zeitsegments.

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

Das vollständige Beispiel finden Sie unter KeyFrame-Animationsbeispiel.

Siehe auch