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>

我举了几个例子：

前两个对我来说是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

您可能需要三个元素：

外圈（填充颜色为浅色）。
带有透明填充色的内圈。
圆弧段之间的半径厚度差异。
圆弧将以45度角放置，可以在两个圆圈上进行动画处理。

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

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度到终点。

使用XAML在WPF中动画绘制圆

2 个答案: