用XAML在WPF中动画画圈

本文关键字：动画 WPF XAML | 更新日期: 2023-09-27 17:49:53

我希望能够顺利地画一个圆(椭圆)，这样你就可以看到它被绘制在屏幕上

是否有可能使用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动画-派-切片- - windows - 8. - html
  • 椭圆绘制WPF动画

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

用XAML在WPF中动画画圈

您可能需要三个元素:

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

  2. 内圆，透明填充色。

  3. 圆弧段之间存在半径厚度差

  4. 圆弧将定位为45角，可以在两个圆上动画

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

您可以使用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度到达终点。

相关文章：