SIGN UP MEMBER LOGIN:    
ARTICLE

An Animation Component using C#

Posted by Mike Gold Articles | GDI+ & Graphics February 08, 2002
Sometimes its desirable to get those graphics moving a bit and this article show the control to implement it.
Reader Level:
Download Files:
 

Sometimes its desirable to get those graphics moving a bit and this control should help you do just that. The control takes advantage of the built in ImageList control and the built in Timer control. The control basically cycles through each image in the ImageList Image Collection and draws them. When it runs out of images it starts again (If Looping is set to true, that is). There is an attempt at double buffering in this control, to reduce the flicker on the screen as we shall see.

The basic use of the control is very simple. Assign an ImageList to the animator, set the timer and call Start.

animator1.TimerTick = 100; // Assign Time Interval in milliseconds (100 = 1/10 of a second)
animator1.AnimatorImages = imageList2; // assign an imagelist component to the animator
.......
animator1.Start();
 

The control paints each image based on an Invalidation event propagated from the timer event:

protected void timer1_Tick (object sender, System.EventArgs e)
{
if (TheImageList.Images.Count == 0)
{
return; // precondition, make sure there are images in the list
}
this.Invalidate(); // force the control to repaint
m_nIndex++; // increment to the next image in the list
if (m_nIndex >= TheImageList.Images.Count)
{
if (m_bLooping == true)
{
m_nIndex = 0;
// if we are looping, restart the index into the image list
}
else
{
timer1.Stop();
// not looping, just stop the timer
}
}
}

Once the OnPaint event receives the command to redraw (triggered by the Invalidate Call) we can paint our current image. This routine pulls the image out using the current image index and draws the image using DrawImage:

protected override void OnPaint(PaintEventArgs pe)
{
Graphics g = pe.Graphics;
Rectangle rect =
this.ClientRectangle;
try
{
if (TheImageList == null)
{
g.FillRectangle(Brushes.White, rect);
// if no imagelist, just paint an empty white rectangle
return;
}
if (TheImageList.Images.Count > 0) // make sure there are images in the list
{
NewBitmap = TheImageList.GetBitmap(m_nIndex);
// get the bitmap from the image list
g.DrawImage(NewBitmap, 0, 0, rect.Width, rect.Height); // Draw the bitmap to the screen to the size of the control
if (OldBitmap != null)
{
OldBitmap.Dispose();
}
OldBitmap = NewBitmap;
// save latest bitmap for double buffering in the OnPaintBackground routine
}
else
{
g.FillRectangle(Brushes.White, rect);
// if no images, just paint an empty white rectangle
}
}
catch (Exception exx)
{
System.Console.WriteLine(exx.Message.ToString());
}
}

In order to reduce screen flickering, we intercept the OnPaintBackground event and paint the last image here as well:

protected override void OnPaintBackground(PaintEventArgs pevent)
{
Graphics g = pevent.Graphics;
Rectangle rect =
this.ClientRectangle;
if (OldBitmap != null)
{
g.DrawImage(OldBitmap, 0, 0, rect.Width, rect.Height);
// Draw the last image as background, instead of allowing
} // the base class OnPaintBackground to be called
} 

Some future enhancements to this control are still in order. First, it would be nice if there was a property called Autosize that just read the first image in the sequence and determined the dimensions. Look for a new release on this control in the near future.

Login to add your contents and source code to this article
Article Extensions
Contents added by plove s on Sep 30, 2009
share this article :
post comment
 

During VS 2008 Conversion Wizard poped up a warning:
"The AnimatorExample2 project file has been customized and could present a security risk..."

Posted by josip radnik Dec 24, 2009

I have created a C# library that does this, called Transitions:
http://code.google.com/p/dot-net-transitions/

For example, you could write code like this:
  Transition t = new Transition(new TransitionType_EaseInEaseOut(1000));
  t.add(picture1, "Left", 500); 
  t.add(picture1, "Top", 600);
  t.run();

This animates the picture to position (500, 600) in 1000ms, using an ease-in-ease-out animation curve.

Richard

Posted by Richard Shepherd Jul 19, 2009

how to move a picture box control from top to bottom and left to right simultaneously?

Posted by Rama Sri Dec 26, 2007
6 Months Free & No Setup Fees ASP.NET Hosting!
Become a Sponsor
PREMIUM SPONSORS
  • Finally – a virtual platform that delivers next-generation Windows Server 2008 Hyper-V virtualization technology from a managed hosting partner you can truly depend on. Visit www.maximumasp.com/max for a FREE 30 day trial. Hurry offer ends soon. Climb aboard the MaxV platform and take advantage of High Availability, Intelligent Monitoring, Recurrent Backups, and Scalability – with no hassle or hidden fees. As a managed hosting partner focused solely on Microsoft technologies since 2000, MaximumASP is uniquely qualified to provide the superior support that our business is built on. Unparalleled expertise with Microsoft technologies lead to working directly with Microsoft as first to offer IIS 7 and SQL 2008 betas in a hosted environment; partnering in the Go Live Program for Hyper-V; and product co-launches built on WS 2008 with Hyper-V technology.
    ceTE software specializes in components for dynamic PDF generation and manipulation. The DynamicPDF™ product line allows you to dynamically generate PDF documents, merge PDF documents and new content to existing PDF documents from within your applications. Visit DynamicPDF here
Become a Sponsor