椭圆图WPF动画

Question

我正在开发一个矩形区域的控件，并在发生触发时在矩形区域绘制一个椭圆。此控件将能够托管其他控件，如文本框，按钮等，以便在触发时圈出它们。我想要这个圆圈被画成一个动画，就像你用钢笔在内部控制旋转一样。

我的问题是最好的办法来完成这个。我一直在做一些研究，我可以使用WPF动画，或者我可以使用GDI +来完成任务。我是WPF动画的新手，所以这就是我问这个问题的原因。

Answer 1

WPF动画使得这非常容易。这里是基本技术：

1. 使用任何WPF功能，你喜欢（形状，路径，几何形状，画笔，图纸，照片等），创建椭圆形的外观。这可以是一个简单的椭圆或您的图形设计师创建的一个奇特的图形，或其中任何东西。

2. 应用由单椭圆虚线组成的不透明度蒙板和单个零长度虚线。由于短划线长度为零，整个自定义样式的椭圆将不可见。

3. 动画显示短划线的长度。当它变得更长时，椭圆的部分将变得不透明（因此它将被可见），直到它全部可见。默认情况下，您的椭圆将从0到1平滑地进行动画制作，但您可以通过动画参数控制和改变椭圆出现的速率，例如，您可以先开始慢速然后加速。

的解决方案

下面整体结构是基本控件模板结构：

<ControlTemplate TargetType="MyCustomControl"> 
    <Grid> 

    <Rectangle Fill="{StaticResource EllipseVisualAppearance}"> 
     <Rectangle.OpacityMask> 
     <VisualBrush> 
      <VisualBrush.Visual> 
      <Ellipse 
       x:Name="opacityEllipse" 
       StrokeDashArray="0 10" 
       Stroke="Black" StrokeThickness="0.5" 
       Width="1" Height"1" /> 
      </VisualBrush.Visual> 
     </VisualBrush> 
     </Rectangle.OpacityMask> 
    </Rectangle> 

    <ContentPresenter /> <!-- This presents the actual content --> 

    </Grid> 
</ControlTemplate> 

创建你的椭圆形的视觉

WPF是令人难以置信的丰富，在表达的视觉效果，所以当涉及到你的椭圆形时，天空是极限 看起来像。

使用任何WPF绘图技术完全按照您希望显示的方式绘制椭圆。根据您从椭圆你能做到多少“艺术风格”想要一个简单的（和乏味）抚摸椭圆形或任何随意幻想，如：

• 行程，大约有一个椭圆形，但没有关闭，也许路径燃烧了。
• 填写一个由图形设计师创建的路径，开始就好像一个画笔正在做它，也许随着你四处走动并在一个blob中结束。
• 在Expression Design（或Adobe Illustrator）中创建矢量绘图，将其转换为XAML绘图。
• 创建的位图图像（注意相比矢量附图，在一般的位图具有保真度和性能的缺点）
• 使用表达混合

下面是一个最终简单椭圆上绘制一个帆布多个形状：

<VisualBrush x:Key="EllipseVisualAppearance"> 
    <VisualBrush.Visual> 
    <Ellipse StrokeThickness="0.1" Stroke="Blue" /> 
    </VisualBrush.Visual> 
</VisualBrush> 

动画您椭圆

这里也有一个巨大的变种取决于您希望动画的外观如何，您可以做到这一点。对于一个简单的0到360的动画的DoubleAnimation是可以简单为：

<DoubleAnimation 
    StoryBoard.TargetName="opacityEllipse" 
    StoryBoard.TargetProperty="StrokeDashArray[0]" 
    From="0" To="3.1416" Duration="0:0:0.5" /> 

常数3.1416是略高于PI，这是直径1的圆的圆周上这意味着椭圆将是完全可见只是在动画持续时间结束时。

另一种解决方案

StackOverflow的用户Simon Fox已发布包含链接到this article by Charles Petzold一个答案，但他的回答消失了几分钟后。我想他删除了它。 Petzold代码显示了使用PathGeometry和ArcSegment进行此操作的更简单的方法。如果你想要的只是一个简单的椭圆而没有多余的元素，那么在他的例子中对你的代码进行建模可能是一条可行的路。