Dela via

Anvisningar: Animera tjockleken på en kantlinje med hjälp av nyckelramar

Det här exemplet visar hur du animerar egenskapen BorderThickness för en Border.

Exempel

I följande exempel används klassen ThicknessAnimationUsingKeyFrames för att animera egenskapen BorderThickness för en Border. Den här animeringen använder tre nyckelramar på följande sätt:

  1. Under den första halv sekunden använder en instans av klassen LinearThicknessKeyFrame för att gradvis öka kantlinjens tjocklek. I exemplet används LinearThicknessKeyFrame för att skapa en smidig linjär ökning mellan värden.

  2. I slutet av nästa halv sekund använder en instans av klassen DiscreteThicknessKeyFrame för att plötsligt öka kantlinjens tjocklek. Diskreta nyckelramar som de som härleds från DiscreteThicknessKeyFrame skapa plötsliga hopp mellan värden, dvs. animeringens rörelse är ryckig.

  3. Under de sista två sekunderna använder en instans av klassen SplineThicknessKeyFrame för att minska kantlinjens tjocklek. Spline-nyckelramar som de som härleds från SplineThicknessKeyFrame skapar en variabel övergång mellan värden i enlighet med värdena för KeySpline-egenskapen. I den här nyckelramen startar animeringen långsamt och ökar exponentiellt mot slutet av tidssegmentet.

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

Det fullständiga exemplet finns i Exempel på keyframe-animering.

Se även