c# - 使用 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

对于刚接触 WPF 动画的我来说，前两个有点令人困惑。后者有 7 票作为“正确答案”，但它对我不起作用，因为我收到错误“集合元素 StrokeDashArray[0] 不是依赖属性”(而且我不想要破折号，尽管我什至尝试过根据上述文章在带破折号的椭圆上，它仍然因这个错误而失败。

更新:

我使用代码的一种方法是这样的:

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

        }
    }

Answer 1

您可能需要三个元素:

1. 外圈(填充颜色为浅色)。

2. 具有透明填充颜色的内圈。

3. 圆弧段之间将具有半径的粗细差异。

4. 圆弧将以 45 度角定位，可以在两个圆上设置动画。

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