Animer le dessin d'un cercle dans WPF avec XAML

Question

Je veux pouvoir dessiner un cercle (ellipse) en douceur, de manière à ce que l'on puisse le voir se dessiner à l'écran.

Est-il possible d'utiliser DoubleAnimation pour faire cela ? Sinon, quelle est la méthode alternative ?

Un exemple de ce que j'ai :

• Une ellipse extérieure (noire)
• Ellipse intérieure (blanche) - c'est celle que je veux animer.

Code :

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

J'ai regardé quelques exemples par exemple :

• 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
• Dessin d'une ellipse - Animation WPF

Les deux premières sont un peu confuses pour moi qui suis novice en matière d'animation WPF. La dernière a 7 votes comme "Bonne réponse" mais elle ne fonctionne pas pour moi car j'obtiens l'erreur "l'élément de collection StrokeDashArray[0] n'est pas une propriété de dépendance" (et aussi je ne veux pas de tirets, Bien que j'ai essayé ceci même sur une ellipse avec des tirets comme dans l'article ci-dessus et il a toujours échoué sur cette erreur.

Mise à jour :

Une méthode que j'ai réussi à faire fonctionner en utilisant le code est la suivante :

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

Vous pourriez avoir besoin de trois éléments :

1. Cercle extérieur (la couleur de remplissage sera des couleurs claires).

2. cercle intérieur avec une couleur de remplissage transparente.

3. Le segment d'arc aura une différence de rayon d'épaisseur entre eux.

4. L'arc sera positionné à un angle de 45°, il peut être animé sur les deux cercles.

Ce n'est qu'une idée, je devrais peut-être la tester par moi-même.

Answer 2

Vous pouvez aller plus loin en utilisant un ArcSegment au lieu d'une ellipse :

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

Il doit faire partie de la PathFigure - où le point de départ est spécifié.

Vous pouvez alors animer Point qui est le point final de l'arc pour aller du point de départ au point final en passant par 360 degrés.