使用 XAML 在 WPF 中为绘图圈设置动画答案

【问题标题】：Animate Drawing Circle in WPF with XAML使用 XAML 在 WPF 中为绘图圈设置动画
【发布时间】：2015-09-01 14:37:44
【问题描述】：

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

是否有可能使用 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>

我看过几个例子：

对于刚接触 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);

        }
    }

【问题讨论】：

标签： c# wpf animation geometry

【解决方案1】：

你可能需要三个元素：

外圈（填充颜色为浅色）。
带有透明填充颜色的内圈。
弧段之间会存在半径厚度差。
圆弧将以 45 角定位，可以在两个圆上设置动画。

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

【讨论】：

【解决方案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 度到达终点。

【讨论】：

我无法将其用于工作。目前我唯一可以使用的方法是使用一些代码，虽然看起来有点骇人听闻。我加入了问题。