通过

如何：对剪辑区域进行动画处理

  • 项目

更新：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>

有关完整示例，请参见剪辑区域示例。