Compartir a través de

Cómo: Animar una región de recorte

  • Artículo

Actualización: noviembre 2007

En este ejemplo se muestra cómo animar la zona de recorte (Clip) de un elemento de marco. En el ejemplo siguiente, se utiliza un elemento EllipseGeometry para definir una zona de recorte elíptica para un elemento Image. Un objeto PointAnimation anima la propiedad Center de la geometría de elipse desde (0, 0) hasta (200, 150). La animación comienza a reproducirse después de que se carga la imagen, y se repite indefinidamente.

Ejemplo

<Image
  Source="sampleImages\Waterlilies.jpg" 
  Width="200" Height="150" HorizontalAlignment="Left">
  <Image.Clip>
    <EllipseGeometry x:Name="MyEllipseGeometry1"
      RadiusX="100"
      RadiusY="75"
      Center="100,75"/>
  </Image.Clip>
  <Image.Triggers>
    <EventTrigger RoutedEvent="Image.Loaded">
      <BeginStoryboard>
        <Storyboard>
          <PointAnimation 
            Storyboard.TargetName="MyEllipseGeometry1" 
            Storyboard.TargetProperty="(EllipseGeometry.Center)"
            From="0,0" To="200,150" Duration="0:0:3" RepeatBehavior="Forever" 
            AutoReverse="True" />
          </Storyboard>
      </BeginStoryboard>
    </EventTrigger>
  </Image.Triggers>
</Image>

Para obtener el ejemplo completo, vea Ejemplo Clip Region.