Delen via

Procedure: De dikte van een rand animeren met behulp van sleutelframes

  • Artikel

In dit voorbeeld ziet u hoe u de eigenschap BorderThickness van een Borderkunt animeren.

Voorbeeld

In het volgende voorbeeld wordt de klasse ThicknessAnimationUsingKeyFrames gebruikt om de eigenschap BorderThickness van een Borderte animeren. Deze animatie maakt gebruik van drie belangrijke frames op de volgende manier:

  1. Tijdens de eerste halve seconde wordt een instantie van de klasse LinearThicknessKeyFrame gebruikt om de dikte van de rand geleidelijk te vergroten. In het voorbeeld wordt LinearThicknessKeyFrame gebruikt om een vloeiende lineaire toename tussen waarden te maken.

  2. Aan het einde van de komende halve seconde wordt een exemplaar van de DiscreteThicknessKeyFrame-klasse gebruikt om plotseling de dikte van de rand te doen toenemen. Discrete sleutelbeelden zoals die zijn afgeleid van DiscreteThicknessKeyFrame, maken plotselinge sprongen tussen waarden, dat wil zeggen, de beweging van de animatie is schokkerig.

  3. Tijdens de laatste twee seconden wordt een instantie van de SplineThicknessKeyFrame klasse gebruikt om de dikte van de rand te verminderen. Spline-sleutelframes, zoals frames die zijn afgeleid van SplineThicknessKeyFrame maken een variabeleovergang tussen waarden op basis van de waarden van de eigenschap KeySpline. In dit sleutelframe start de animatie langzaam en versnelt deze exponentieel naar het einde van het tijdsegment.

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

Zie KeyFrame Animation Samplevoor het volledige voorbeeld.

Zie ook