Share via

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

  • Artículo

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

Ejemplo

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

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

  2. Al final del siguiente medio segundo, se usa una instancia de la clase DiscreteSizeKeyFrame para aumentar repentinamente el tamaño del arco. Los marcos clave discretos como DiscreteSizeKeyFrame crean saltos repentinos entre valores, es decir, los cambios de tamaño se producen de repente y no son sutiles.

  3. Durante los dos segundos finales, se usa una instancia de la clase SplineSizeKeyFrame para aumentar el tamaño del arco. Los marcos 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 va aumentando exponencialmente hacia el final del segmento temporal.

<!-- 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 consultar el ejemplo completo, vea Ejemplo de animación mediante fotogramas clave.

Vea también