Click here to Skip to main content
Click here to Skip to main content

Making a Nice Wait Effect

, 27 Mar 2014
Rate this:
Please Sign up or sign in to vote.
Making a nice tailed round effect

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 Smile | :)

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 Smile | :)

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:

Upon request, here are the project files:

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

About the Author

Muhsin Fatih Yorulmaz
Software Developer Home office
Turkey Turkey
No Biography provided

Comments and Discussions

 
QuestionProject code PinmemberSuresh1989131127-Mar-14 0:49 
AnswerRe: Project code PinprotectorRichard MacCutchan27-Mar-14 1:22 
GeneralRe: Project code PinmemberMuhsinFatih27-Mar-14 1:30 
GeneralRe: Project code PinprotectorRichard MacCutchan27-Mar-14 1:40 
GeneralRe: Project code PinmemberMuhsinFatih27-Mar-14 1:44 
NewsRe: Project code PinprotectorRichard MacCutchan27-Mar-14 1:50 
GeneralRe: Project code PinmemberMuhsinFatih27-Mar-14 1:59 
GeneralRe: Project code PinprotectorRichard MacCutchan27-Mar-14 2:29 
AnswerRe: Project code (Project files in this comment) [modified] PinmemberMuhsinFatih27-Mar-14 1:27 
GeneralRe: Project code (Project files in this comment) PinpremiumRavi Bhavnani27-Mar-14 3:49 
AnswerRe: Project code (Project files in this comment) PinmemberMuhsinFatih27-Mar-14 4:10 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web04 | 2.8.140718.1 | Last Updated 27 Mar 2014
Article Copyright 2014 by Muhsin Fatih Yorulmaz
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid