How to make drawn points in winforms Paint event to be animated?

Question

The goal is to create loading label effect.

I created a new user control added a new List<PointF> type and updating and adding items to the List in a timer tick event.
then in the paint event i loop pver the List and draw the points.

now it's drawing nice 3 points. the problem is how to create the animation effect of the loading, meaning each time another point is deleted or something that make it looks like loading.

using System;  
using System.Collections.Generic;  
using System.ComponentModel;  
using System.Data;  
using System.Drawing;  
using System.Drawing.Drawing2D;  
using System.Linq;  
using System.Text;  
using System.Threading;  
using System.Threading.Tasks;  
using System.Windows.Forms;  
  
namespace Test  
{  
    public partial class LoadingLabel : UserControl  
    {  
        private List<PointF> points = new List<PointF>();  
  
        public LoadingLabel()  
        {  
            InitializeComponent();  
  
            points.Add(new PointF(0, 0));  
  
            timer1.Enabled = true;  
        }  
  
        private void LoadingLabel_Load(object sender, EventArgs e)  
        {  
  
        }  
  
        private void LoadingLabel_Paint(object sender, PaintEventArgs e)  
        {  
            e.Graphics.SmoothingMode = SmoothingMode.AntiAlias;  
              
            for (int i = 0; i < points.Count; i++)  
            {  
                e.Graphics.FillEllipse(Brushes.Red, points[i].X, points[i].Y, 20, 20);  
            }  
        }  
  
        int count = 0;  
        private void timer1_Tick(object sender, EventArgs e)  
        {  
            count++;  
  
            if (count < 3)  
            {  
                points.Add(new PointF(count * 20, 0));  
                //points = new List<PointF>();  
            }  
  
            //this.Invalidate();  
        }  
    }  
}  

If i will make the instance in the tick event it will not draw anything. if i will use the Invalidate line it will make the points to be like blinking.
what i want is to create a loading effect animation.

the result as the code now is still 3 points, and i want to animate them like in the link.

something like this :

https://www.bing.com/images/search?view=detailV2&ccid=8KW2mRlu&id=2B3DD82CEF9C3ED45D9FD7BA46D1D1C1E44EA110&thid=OIP.8KW2mRluqOT5e0IvqPrGawHaFj&mediaurl=https%3a%2f%2ffantasydata.com%2fassets%2fimages%2floading-dots.gif&cdnurl=https%3a%2f%2fth.bing.com%2fth%2fid%2fR.f0a5b699196ea8e4f97b422fa8fac66b%3frik%3dEKFO5MHR0Ua61w%26pid%3dImgRaw%26r%3d0&exph=600&expw=800&q=Loading+Dots+Animation&simid=608049150611506477&FORM=IRPRST&ck=B497533834C14185A9F54E79EAA24244&selectedIndex=1&ajaxhist=0&ajaxserp=0

Answer 1

Animation is result of redrawing your model in an interval; and in each interval applying some changes, like change of the color for a blink effect, or change of location or size for a move or grow or shrink effect.

In a loading example like what you shared in your question, the animation is result of changing the active circle in the interval and drawing active circle with different color. So, you need a timer, set the interval and in the timer increment the active circle index and call Invalidate to raise paint. Then in the paint event, draw all circles, but the one which is active, should be in different color. In the next interval, active index will move, and after a redraw it looks like the active circle is moving:

Here is the code:

using System;  
using System.Drawing;  
using System.Windows.Forms;  
public class LoadingDotsControl : Control  
{  
    private Timer timer;  
    public LoadingDotsControl()  
    {  
        timer = new Timer();  
        timer.Interval = 300;  
        timer.Tick += Timer_Tick;  
        timer.Enabled = true;  
        DoubleBuffered = true;  
        ResizeRedraw = true;  
    }  
    int count = 5;  
    int active = 0;  
    private void Timer_Tick(object sender, EventArgs e)  
    {  
        Invalidate();  
        active = (active + 1) % count;  
    }  
    protected override void OnPaint(PaintEventArgs e)  
    {  
        e.Graphics.Clear(BackColor);  
        e.Graphics.SmoothingMode = System.Drawing.Drawing2D.SmoothingMode.AntiAlias;  
        var w = this.Width / count;  
        var h = this.Height / 2;  
        var padding = w / 8;  
        for (int i = 0; i < count; i++)  
        {  
            var rect = new Rectangle(i * w, h - w / 2, w, w);  
            var brush = active == i? Brushes.RoyalBlue: Brushes.SkyBlue;  
            rect.Inflate(-padding, -padding);  
            e.Graphics.FillEllipse(brush, rect);  
        }  
        base.OnPaint(e);  
    }  
    protected override void Dispose(bool disposing)  
    {  
        if (disposing && (timer != null))  
        {  
            timer.Dispose();  
        }  
        base.Dispose(disposing);  
    }  
}   

If you want to see more examples, take a look at my post here:

• Show Transparent Loading Spinner above other Controls
• Show Loading animation during loading data in other thread which simply uses a gif animation for loading.