Compartilhar via

Como: Animar uma região de Clip

  • Artigo

Este exemplo mostra como animar uma região Clip de um elemento de estrutura. No exemplo a seguir, uma EllipseGeometry é usada para definir uma região elíptico de clip para um elemento Image. Uma PointAnimation anima a propriedade Center da geometria da elipse de (0, 0) para (200, 150). A animação inicia depois de a imagem ser carregada e repete indefinidamente.

Exemplo

<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 o exemplo completo, consulte Exemplo de área do clipe.