Compartir a través de

Cómo: Animar los cambios de tamaño mediante el uso de fotogramas clave

En este ejemplo se muestra cómo animar los cambios de tamaño mediante fotogramas clave.

Ejemplo

En el siguiente ejemplo, se utiliza la clase SizeAnimationUsingKeyFrames para animar la propiedad Size de un ArcSegment. Esta animación usa tres fotogramas clave de la siguiente manera:

  1. Durante el primer medio segundo de la animación, se utiliza una instancia de la clase LinearSizeKeyFrame para aumentar gradualmente el tamaño del arco. Los fotogramas clave lineales como LinearSizeKeyFrame crean una transición lineal suave entre valores.

  2. Al final del próximo medio segundo, usa una instancia de la clase DiscreteSizeKeyFrame para aumentar de forma súbita el tamaño del arco. Fotogramas clave discretos como DiscreteSizeKeyFrame crean saltos repentinos entre valores, es decir, los cambios de tamaño se producen de forma repentina y no son sutiles.

  3. Durante los dos segundos finales, usa una instancia de la clase SplineSizeKeyFrame para aumentar el tamaño del arco. Fotogramas clave de spline como SplineSizeKeyFrame crean una transición variable entre valores según los valores de la propiedad KeySpline. En este ejemplo, el tamaño del arco aumenta lentamente al principio y, a continuación, aumenta exponencialmente hacia el final del segmento de tiempo.

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

Para ver el ejemplo completo, consulte Ejemplo de animación de cuadros clave.

Consulte también