Gewusst wie: Animieren eines Clip-Bereichs

  • Artikel

Aktualisiert: November 2007

Dieses Beispiel zeigt, wie Sie den Clip-Bereich eines Frameworkelements animieren. Im folgenden Beispiel wird eine EllipseGeometry verwendet, um einen elliptischen Clip-Bereich für ein Image-Element zu definieren. Eine PointAnimation animiert die Center-Eigenschaft der Ellipsengeometrie von (0, 0) bis (200, 150). Die Wiedergabe der Animation beginnt, nachdem das Bild geladen wurde, und wird endlos wiederholt.

Beispiel

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

Das vollständige Beispiel finden Sie unter Beispiel für einen Clip-Bereich.