Making a Nice Wait Effect

• Download source - 34 KB
• Watch demo
• Download latest version of project files

Introduction

I was looking for a better wait effect for my applications. Then I made my own. In this tip, I'll show you how I've made my round effect. Better looking gives applications quality I think :)

I've written this code in VB.NET, but I think you can understand even if you don't know VB.NET. It's easy!

Using the Code

It's simple, let's start by adding dimensionals we will use:

Public Class Form1
    Dim lastpos() As Integer               '{x,y}
    Dim lastangle As Integer = 0           'between 0 - 360
    Dim last20pos As New List(Of Point)    'tail 

Now add a timer, and set its interval as 10. Go to Timer_Tick event.

Here, we will use a simple trigonometry. First, make sure angle is between 0 and 360. It would be much process if it goes to big numbers.

Private Sub Timer1_Tick(sender As Object, e As EventArgs) Handles Timer1.Tick 
If lastangle = 360 Then
     lastangle = 0
 End If 

Now we will roll the point to get a round effect starting this point: (origin.x + r, origin.y).

This formula will give us the next point: (origin.x + cos(a) * r , origin.y + sin(a) * r).

I used (250,250) as origin, and 15 as radius. And set 10 as change of angle at every step.

lastpos = {250 + Math.Cos((lastangle / 360) * 2 * Math.PI) * 15, 250 + Math.Sin((lastangle / 360) * 2 * Math.PI) * 15}

lastangle += 10 

We will add the last position to last20pos list which we defined at the beginning of code at the end of step.

The code below will make a tail for effect (background should be black. Or you'll need to change equation for another backcolor):

 For i = 1 To last20pos.Count - 1 

     Panel1.CreateGraphics.FillEllipse(New SolidBrush(Color.FromArgb(255 / (20 - i), 255 / (20 - i), 255 / (20 - i))), last20pos.Item(i).X, last20pos.Item(i).Y, 4, 4) 

 Next

Tail has 20 points, so if the list has 20 points, the first added point should turn to black and then be removed from the list.

If last20pos.Count >= 20 Then   
     Panel1.CreateGraphics.FillEllipse(Brushes.Black, last20pos.Item(0).X, last20pos.Item(0).Y, 4, 4) 

     last20pos.RemoveAt(0)
 
End If  

Lastly, add the lastpos into last20pos list.

 last20pos.Add(New Point(lastpos(0), lastpos(1))) 

Points of Interest

With simple trigonometry knowledge, you can make beautiful effects for users to enjoy it. Have fun :)

You can change the color by changing 255s in this code:

Panel1.CreateGraphics.FillEllipse(New SolidBrush(Color.FromArgb(255 / (20 - i), 255 / (20 - i), 255 / (20 - i))), last20pos.Item(i).X, last20pos.Item(i).Y, 4, 4) 

For example, add some buttons with different colors. Define CL as color. In button click event, set CL = button.backcolor. Write CL.R , CL.G , CL.B instead 255.

You can see the effect running in this video:

• https://www.youtube.com/watch?v=ir3BT4pZiEU

Upon request, here are the project files:

• https://www.dropbox.com/sh/2c71n79plk7cia2/__25oMuSnz