使用XAML在WPF中制作绘制圆形动画

Question

我希望能够平滑地绘制一个圆（椭圆），以便您可以在屏幕上看到它正在被绘制。

有没有可能使用DoubleAnimation来实现这一点？如果不行，有什么替代方法？

以下是我拥有的示例：

• 一个外部椭圆（黑色）
• 内部椭圆（白色）- 这是我想要动画的那个椭圆

代码：

<Ellipse Width="200" Height="200" Stroke="Black" StrokeThickness="20"/>
    <Ellipse Width="190" Height="190" Stroke="White" StrokeThickness="10" Canvas.Left="5"    Canvas.Top="5" x:Name="animatedEllipse">
        <Ellipse.Triggers>
            <EventTrigger RoutedEvent="Ellipse.Loaded">
                <BeginStoryboard>
                    <Storyboard>
                        <DoubleAnimation/>
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger>
        </Ellipse.Triggers>
    </Ellipse>

我查看了一些例子，例如：

• http://elegantcode.com/2009/08/21/a-simple-wpf-loading-animation/
• http://www.charlespetzold.com/blog/2012/03/The-Animated-Pie-Slice-in-Windows-8.html
• Ellipse Drawing WPF Animation

对于我这个初学者来说，前两个有点困惑。后一个被评为“正确答案”，但我遇到了错误：“the collection element StrokeDashArray[0] is not a dependency property”（而且我不想要虚线，尽管我按照上述文章的方法在椭圆上试了试，但仍然会出现此错误。

更新：

我使用代码得到的一个方法是这样的：

public static class ExtensionMethods
{
    private static Action EmptyDelegate = delegate() { };

    public static void Refresh(this UIElement uiElement)
    {
        uiElement.Dispatcher.Invoke(DispatcherPriority.Render, EmptyDelegate);
    }
}

public partial class Page1 : Page
{
    private void Page_Loaded_1(object sender, RoutedEventArgs e)
    {
        path = new Path();
        group = new GeometryGroup();
        path.Data = group;

        path.Stroke = new SolidColorBrush(Colors.White);
        path.StrokeThickness = 3;

        canvas.Children.Add(path);
        BackgroundWorker worker = new BackgroundWorker();
        worker.DoWork += worker_DoWork;
        worker.RunWorkerAsync();
    }

    void worker_DoWork(object sender, DoWorkEventArgs e)
    {
        int radius = 90;
        for (double i = 0.0; i < 360.0; i += 1)
        {
            double angle = i * System.Math.PI / 180;
            double x = (int)(100 + radius * System.Math.Cos(angle));
            double y = (int)(100 + radius * System.Math.Sin(angle));
            canvas.Dispatcher.Invoke(new Action(delegate
            {
                group.Children.Add(new EllipseGeometry(new Point(x, y), 5, 5));
            }));
            canvas.Refresh();
            System.Threading.Thread.Sleep(1);

        }
    }

- Malcolm McCaffery

Answer 1

您可能需要三个元素：

1. 外圆（填充颜色将是浅色）。

2. 内圆，填充颜色为透明。

3. 弧段之间的半径厚度差异。

4. 弧将位于45度角，可以在两个圆上进行动画处理。

这只是一个想法，我可能需要自己测试一下。

- Paritosh

Answer 2

使用ArcSegment而不是椭圆可能会更有帮助：

<PathFigure StartPoint="100,100">
    <PathFigure.Segments>
        <PathSegmentCollection>
            <ArcSegment Size="100,100" IsLargeArc="True"
                        SweepDirection="CounterClockwise" Point="200,200" />
        </PathSegmentCollection>
    </PathFigure.Segments>
</PathFigure>

它需要成为PathFigure的一部分 - 其中指定了起始点。

然后，您可以动画化弧的终点Point，使其从起始点通过360度到达终点。

- ChrisF

---

我在让这个正常工作方面遇到了一些麻烦。目前我成功的唯一方法是使用一些代码，但感觉有些hackish。我已经将代码添加到问题中。 - Malcolm McCaffery