HOW TO：建立裁剪區域的動畫

更新：2007 年 11 月

本範例示範如何建立架構項目之 Clip 區域的動畫。下列範例使用 EllipseGeometry 定義 Image 項目的橢圓形裁剪區域。PointAnimation 可讓橢圓形幾何圖案的 Center 屬性產生從 (0, 0) 到 (200, 150) 的動畫效果。動畫會在載入影像之後開始播放，並不斷重複。

範例

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

如需完整的範例，請參閱裁剪區域範例。