Procedura: animare lo spessore di un bordo utilizzando frame chiave

  • Articolo

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

Esempio

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

  1. Durante la prima metà del secondo, usa un'istanza della LinearThicknessKeyFrame classe per aumentare gradualmente lo spessore del bordo. Nell'esempio viene LinearThicknessKeyFrame usato per creare un aumento lineare uniforme tra i valori.

  2. Alla fine della seconda metà successiva, usa un'istanza della DiscreteThicknessKeyFrame classe per aumentare improvvisamente lo spessore del bordo. Fotogrammi chiave discreti come quelli derivati da DiscreteThicknessKeyFrame creare salti improvvisi tra i valori, ovvero il movimento dell'animazione è insodettiva.

  3. Durante i due secondi finali, usa un'istanza della SplineThicknessKeyFrame classe per ridurre lo spessore del bordo. Fotogrammi chiave spline come quelli derivati dalla SplineThicknessKeyFrame creazione di una transizione di variabile tra valori in base ai valori della KeySpline proprietà. In questo fotogramma chiave l'animazione inizia a spostarsi lentamente, quindi accelera in modo esponenziale verso la fine del segmento temporale.

<!-- 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 con fotogrammi chiave.

Vedi anche