Condividi tramite

Procedura: animare le modifiche di dimensione utilizzando fotogrammi chiave

  • Articolo

Questo esempio mostra come animare le modifiche di dimensione usando fotogrammi chiave.

Esempio

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

  1. Durante la prima metà dell'animazione, usa un'istanza della LinearSizeKeyFrame classe per aumentare gradualmente le dimensioni dell'arco. Fotogrammi chiave lineari come LinearSizeKeyFrame creare una transizione lineare uniforme tra valori.

  2. Alla fine della seconda metà successiva, usa un'istanza della DiscreteSizeKeyFrame classe per aumentare improvvisamente le dimensioni dell'arco. Fotogrammi chiave discreti come DiscreteSizeKeyFrame creare salti improvvisi tra valori, ovvero le modifiche delle dimensioni si verificano improvvisamente e non sono sottili.

  3. Negli ultimi due secondi, usa un'istanza della SplineSizeKeyFrame classe per aumentare le dimensioni dell'arco. Fotogrammi chiave spline come SplineSizeKeyFrame creare una transizione di variabile tra valori in base ai valori della KeySpline proprietà. In questo esempio la dimensione dell'arco aumenta lentamente all'inizio e quindi aumenta in misura esponenziale verso la fine dell'intervallo di tempo.

<!-- This example shows how to use the SizeAnimationUsingKeyFrames to animate the
size of an ArcSegment. -->
<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" >

    <Canvas HorizontalAlignment="Left" Margin="0" >

      <!-- Create an arc on the screen that animates its size when it loads. -->
      <Path Stroke="Black" StrokeThickness="2" >
        <Path.Data>
          <PathGeometry>
            <PathGeometry.Figures>
              <PathFigureCollection>
                <PathFigure StartPoint="100,200">
                  <PathFigure.Segments>
                    <PathSegmentCollection>
                      <ArcSegment x:Name="myArcSegment" Size="90,80" 
                      SweepDirection="Clockwise"  Point="500,200" />
                    </PathSegmentCollection>
                  </PathFigure.Segments>
                </PathFigure>
              </PathFigureCollection>
            </PathGeometry.Figures>
          </PathGeometry>
        </Path.Data>
        <Path.Triggers>
          <EventTrigger RoutedEvent="Path.Loaded">
            <BeginStoryboard Name="myBeginStoryBoard">
              <Storyboard>
                
                <!-- Animating the Size property uses 3 KeyFrames. -->
                <SizeAnimationUsingKeyFrames
                Storyboard.TargetName="myArcSegment"
                Storyboard.TargetProperty="Size" >
                  <SizeAnimationUsingKeyFrames.KeyFrames>
                    <!-- Using a LinearSizeKeyFrame, the size of the arc increases
                         gradually over the first half second of the animation. -->
                    <LinearSizeKeyFrame KeyTime="0:0:0.5" Value="120,120" />

                    <!-- Using a DiscreteSizeKeyFrame, the size increases suddenly
                    after the first second of the animation. -->
                    <DiscreteSizeKeyFrame KeyTime="0:0:1" Value="150,150" />

                    <!-- Using a SplineSizeKeyFrame, the Size increases slowly at first 
                         and then speeds up exponentially. This KeyFrame takes 2 seconds. -->
                    <SplineSizeKeyFrame KeySpline="0.6,0.0 0.9,0.00" KeyTime="0:0:3" Value="300,300" />

                  </SizeAnimationUsingKeyFrames.KeyFrames>
                </SizeAnimationUsingKeyFrames>

              </Storyboard>
            </BeginStoryboard>
          </EventTrigger>
        </Path.Triggers>
      </Path>
    </Canvas>

</Page>

Per l'esempio completo, vedere Esempio di animazione con fotogrammi chiave.

Vedi anche