Condividi tramite

Procedura: Animare lo spessore di un bordo usando fotogrammi chiave

  • Articolo

In questo esempio viene illustrato come animare la proprietà BorderThickness di un Border.

Esempio

Nell'esempio seguente viene utilizzata la classe ThicknessAnimationUsingKeyFrames per animare la proprietà BorderThickness di un Border. Questa animazione usa tre fotogrammi chiave nel modo seguente:

  1. Nei primi mezzo secondo, usa un'istanza della classe LinearThicknessKeyFrame per aumentare gradualmente lo spessore del bordo. L'esempio usa LinearThicknessKeyFrame per creare un aumento lineare uniforme tra i valori.

  2. Alla fine del mezzo secondo successivo, utilizza un'istanza della classe DiscreteThicknessKeyFrame per aumentare bruscamente lo spessore del bordo. Fotogrammi chiave discreti come quelli derivati da DiscreteThicknessKeyFrame creano salti improvvisi tra i valori, ovvero il movimento dell'animazione è scattoso.

  3. Durante gli ultimi due secondi, utilizza un'istanza della classe SplineThicknessKeyFrame per ridurre lo spessore del bordo. I fotogrammi chiave spline, come quelli derivati da SplineThicknessKeyFrame, creano una transizione variabile tra i valori, condizionata dai valori della proprietà KeySpline. In questo fotogramma chiave, l'animazione inizia lentamente e accelera in modo esponenziale verso la fine del segmento di tempo.

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

Per l'esempio completo, vedere esempio di animazione basata su fotogrammi chiave.

Vedere anche