Freigeben über

Gewusst wie: Animieren der Breite eines Rahmens mithilfe von Keyframes

  • Artikel

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. In dieser Animation werden drei Keyframes folgendermaßen verwendet:

  1. In der ersten halben Sekunde wird eine Instanz der LinearThicknessKeyFrame-Klasse verwendet, um die Dicke des Rahmens schrittweise zu erhöhen. Das Beispiel verwendet LinearThicknessKeyFrame, um einen sanften linearen Anstieg zwischen den Werten zu erzeugen.

  2. Am Ende der nächsten halben Sekunde wird eine Instanz der DiscreteThicknessKeyFrame-Klasse verwendet, um die Dicke 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 ist die Animation zunächst langsam und beschleunigt dann exponentiell im letzten Bereich des Zeitabschnitts.

<!-- 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 Beispiel für eine Keyframe-Animation.

Weitere Informationen