Click here to Skip to main content
11,640,599 members (59,631 online)
Click here to Skip to main content

Animator for WinForms

, 22 Feb 2013 LGPL3 62K 15K 177
Rate this:
Please Sign up or sign in to vote.
The component allows you to animate any controls on your WinForms.
   

Introduction

 
Can we make our WinForms application was animated, like WPF? Yep, of course we can!
The component Animator allows you to animate any controls on your WinForms.
 

How it works

 
Animator creates a temporary control DoubleBitmap over the target control. DoubleBitmap contains two images. First image is snapshot of background of the form, exclude target control. Second image contains snapshot of target control.

Then animator periodically transforms top image of DoubleBitmap. As result – we get animated fake of target control.

Each transformation has some dependence on the current time. And Animator changes time and call transformation for new animation frame.

The Animator supports two kinds of transforms - linear transforms (scaling, shifting, rotating) and non-linear transforms (distortions, skews, etc). Also it can change transparency of animated bitmap.

Linear transformations are performed using matrix transformations of GDI+.
Example of the transformation Rotate:
 

public static void DoRotate(TransfromNeededEventArg e, Animation animation)
{
    var rect = e.ClientRectangle;
    var center = new PointF(rect.Width / 2, rect.Height / 2);
 
    e.Matrix.Translate(center.X, center.Y);
    if (e.CurrentTime > animation.RotateLimit)
        e.Matrix.Rotate(360 * (e.CurrentTime - animation.RotateLimit) * animation.RotateCoeff);
    e.Matrix.Translate(-center.X, -center.Y);
}
 

Nonlinear transformations are little harder. First, it creates an array of pixels. And then there is a conversion each pixel in cycle. The Animator can change coordinates of the pixel, it's color and transparency. Below is an example of the transformation:
 

public static void DoBlind(NonLinearTransfromNeededEventArg e, Animation animation)
{
    if (animation.BlindCoeff == PointF.Empty)
        return;
 
    var pixels = e.Pixels;
    var sx = e.ClientRectangle.Width;
    var sy = e.ClientRectangle.Height;
    var s = e.Stride;
    var kx = animation.BlindCoeff.X;
    var ky = animation.BlindCoeff.Y;
    var a = (int)((sx * kx + sy * ky) * (1 - e.CurrentTime));
 
    for (int x = 0; x < sx; x++)
        for (int y = 0; y < sy; y++)
        {
            int i = y * s + x * bytesPerPixel;
            if (x * kx + y * ky >= a)
                pixels[i + 3] = (byte)0;
        }
}
 

The Animator creates DoubleBitmap with correct z-order. So, if some controls were under target control, then they will be under DoubleBitmap control. Similarly – controls above target control:


How to use

 
Simplest way to use Animator: dragging the Animator component onto your form.
To start animation – call method Animator.Show(targetControl) from your code.

Take to attention: the target control must be hidden (visible==false) before calling Show method. Otherwise animation will not take effect.

Similarly, you can hide the control using the method Animator.Hide(targetControl).

The Animator allows you to make animated changing of your visible control. Before updating you need to call Animator.BeginUpdate(targetControl), then update your control, and finally to call Animator.EndUpdate(targetControl). For example:

animator.BeginUpdateSync(dataGridView1, true);
dataGridView1[col, row].Value = newValue;
animator.EndUpdate(dataGridView1);
 

As result – the control will change its view with animation.

Animator has several built-in types of animation. It's Rotate, Scale, Leaf, Mosaic, Particles, Blind, etc. You can set built-in animation by property AnimationType.

In addition, Animator allows you to fine-tune the animation, as well as create custom animation.
For adjusting you can use property DefaultAnimation. Below described all properties of Animation class:
 

  • PointF SlideCoeff - Set (1,0) or (0,1) to slider effect.
  • float RotateCoeff - Adjusts rotation angle.
  • float RotateLimit - Parameter defines time of end of rotation
  • PointF ScaleCoeff - Adjusts horizontal and vertical scaling
  • float LeafCoeff - Set 1 to "leaf" effect
  • PointF MosaicCoeff - Adjusts deviation of mosaic
  • int MosaicSize - Mosaic square size (in pixels)
  • PointF MosaicShift - Shift of mosaic squares.
  • PointF BlindCoeff - Set (1,0) or (0,1) to "blind" effect.
  • float TransparencyCoeff - Set 1 if you want to make transparency of animation.
  • float TimeCoeff - Time coefficient
  • Padding Padding - Expands bounds of DoubleBitmap (it is useful for "wide" animations, like Rotate)
  • bool AnimateOnlyDifferences - Allows to animate only differences between start view of control and finish view (only for AnimationMode.Update). By default True.
 
To create custom animation, you need to handle events TransfromNeeded and/or NonLinearTransfromNeeded. The example see in demo application.
 

Animator has a good set of techniques to control the animation. Each method is asynchronous and synchronous versions. Asynchronous methods starts animation and returns immediately. Synchronous methods starts animation and wait while animation will be completed.

In addition the Animator supports queue of animated controls. You can use methods AddToQueue() and ClearQueue() for it.

Also, the Animator has methods to wait for all outstanding animations and methods to wait for the particular animation.

Moreover, the Animator has events AnimationCompleted and AllAnimationsCompleted that are invoked after any/all animation was completed.

Extended controls

The library contains extended TabControl. It is usual TabControl, but its tabs are animated:

The TabControlEx conatins property Animation, where you can adjust animation of tabs.

Demo app

You can use the demo app for that would evaluate the possibilities of Animator:


Decoration sample (BottomMirror mode):

Restrictions

The Animator does not work with OLE-based controls (WebBrowser, RichTextBox). These controls do not paint itself when window is not visible. So we can not to grab bitmap from it.
 

History

 
19 Feb 2013 - First release.
20 Feb 2013 - TabControlEx was added, ClipRectangle is available for Update mode.
22 Feb 2013 - Performance was increased. Some bugs was fixed. Decoration sample was added.
 

License

This article, along with any associated source code and files, is licensed under The GNU Lesser General Public License (LGPLv3)

Share

About the Author

Pavel Torgashov
Software Developer Freelancer
Ukraine Ukraine
I am Pavеl Tоrgаshоv, and I live in Kyiv, Ukraine.
I've been developing software since 1998.
Main activities: processing of large volumes of data, statistics, computer vision and graphics.

My contact email is p_torgashov[at]ukr.net

You may also be interested in...

Comments and Discussions

 
QuestionGood Job Pin
Bhavesh Patel22-Jul-15 21:43
memberBhavesh Patel22-Jul-15 21:43 
GeneralGreat Work Pin
bilal _hassan15-Jun-15 4:24
memberbilal _hassan15-Jun-15 4:24 
QuestionAnimationCompleted event Pin
chi2king21-Apr-15 1:10
memberchi2king21-Apr-15 1:10 
AnswerRe: AnimationCompleted event Pin
chi2king21-Apr-15 1:38
memberchi2king21-Apr-15 1:38 
GeneralRe: AnimationCompleted event Pin
chi2king21-Apr-15 1:42
memberchi2king21-Apr-15 1:42 
QuestionGreat! Pin
Member 1048720919-Mar-15 16:01
memberMember 1048720919-Mar-15 16:01 
QuestionVery Cool Pin
Brian Kinnish22-Feb-15 16:33
memberBrian Kinnish22-Feb-15 16:33 
GeneralMy vote of 5 Pin
majid torfi30-Oct-14 6:12
membermajid torfi30-Oct-14 6:12 
Questionanimation show and hide in one method Pin
Member 997106728-Oct-14 1:37
memberMember 997106728-Oct-14 1:37 
QuestionUseful Project Pin
yasir haris27-Oct-14 20:15
memberyasir haris27-Oct-14 20:15 
GeneralMessy code Pin
heartbreaka17-Sep-14 0:20
memberheartbreaka17-Sep-14 0:20 
GeneralRe: Messy code Pin
Pavel Torgashov17-Sep-14 0:29
mvpPavel Torgashov17-Sep-14 0:29 
GeneralRe: Messy code Pin
heartbreaka23-Sep-14 2:01
memberheartbreaka23-Sep-14 2:01 
GeneralRe: Messy code Pin
Pavel Torgashov23-Sep-14 6:55
mvpPavel Torgashov23-Sep-14 6:55 
QuestionVery Cool and how to... Pin
Member 46985967-Jul-14 22:54
memberMember 46985967-Jul-14 22:54 
AnswerRe: Very Cool and how to... Pin
Pavel Torgashov8-Jul-14 22:04
mvpPavel Torgashov8-Jul-14 22:04 
QuestionExcellent, but cannot work on ToolStrip and StatusStrip items. Hope will add this function. Pin
UnclePig23-May-14 2:27
professionalUnclePig23-May-14 2:27 
Question5+ Pin
Adam Zgagacz7-Jan-14 6:55
memberAdam Zgagacz7-Jan-14 6:55 
Questiondouble bitmap Pin
Bee Tran6-Dec-13 7:41
memberBee Tran6-Dec-13 7:41 
QuestionOpen Source Project Pin
Member 1039114322-Nov-13 15:11
memberMember 1039114322-Nov-13 15:11 
Questionbackground image Pin
Bee Tran20-Nov-13 8:24
memberBee Tran20-Nov-13 8:24 
QuestionBeautiful! Wish it could operate on a grid cell. Pin
Member 103911439-Nov-13 18:51
memberMember 103911439-Nov-13 18:51 
AnswerRe: Beautiful! Wish it could operate on a grid cell. Pin
Member 103911439-Nov-13 21:28
memberMember 103911439-Nov-13 21:28 
GeneralRe: Beautiful! Wish it could operate on a grid cell. Pin
Member 1039114310-Nov-13 6:22
memberMember 1039114310-Nov-13 6:22 
QuestionColored shape behind animation Pin
mimco993-Nov-13 8:01
membermimco993-Nov-13 8:01 
QuestionAnimate after swaping picture is not working well Pin
Ernad Hodzic29-Oct-13 13:08
memberErnad Hodzic29-Oct-13 13:08 
AnswerRe: Animate after swaping picture is not working well Pin
Pavel Torgashov29-Oct-13 13:34
memberPavel Torgashov29-Oct-13 13:34 
GeneralRe: Animate after swaping picture is not working well Pin
Ernad Hodzic29-Oct-13 14:42
memberErnad Hodzic29-Oct-13 14:42 
GeneralRe: Animate after swaping picture is not working well Pin
Pavel Torgashov29-Oct-13 23:25
memberPavel Torgashov29-Oct-13 23:25 
GeneralRe: Animate after swaping picture is not working well Pin
ererwwwtttt4-Nov-13 8:42
memberererwwwtttt4-Nov-13 8:42 
QuestionMy vote of 5 Pin
abbaspirmoradi2-Sep-13 3:39
professionalabbaspirmoradi2-Sep-13 3:39 
GeneralMy vote of 5 Pin
rrossenbg29-Aug-13 22:40
memberrrossenbg29-Aug-13 22:40 
GeneralMy vote of 5 Pin
adriancs20-Aug-13 16:30
mvpadriancs20-Aug-13 16:30 
GeneralMy vote of 5 Pin
Amir Mohammad Nasrollahi27-Jul-13 6:36
professionalAmir Mohammad Nasrollahi27-Jul-13 6:36 
QuestionNicely done! Pin
Ravi Bhavnani18-Jul-13 8:22
professionalRavi Bhavnani18-Jul-13 8:22 
GeneralMy vote of 5 Pin
Alhoot20049-Jul-13 13:37
memberAlhoot20049-Jul-13 13:37 
GeneralMy vote of 5 Pin
demouser7436-Jul-13 8:36
memberdemouser7436-Jul-13 8:36 
QuestionMy vote > 5 Pin
hackerspk6-Jun-13 2:18
memberhackerspk6-Jun-13 2:18 
GeneralMy vote of 5 Pin
Virtualization22-Apr-13 2:41
memberVirtualization22-Apr-13 2:41 
GeneralMy vote of 5 Pin
maunilgajjar12-Apr-13 8:21
membermaunilgajjar12-Apr-13 8:21 
QuestionWoW! Pin
nandixxp1-Apr-13 2:33
membernandixxp1-Apr-13 2:33 
GeneralExcellent Pin
C# learning user26-Mar-13 8:37
memberC# learning user26-Mar-13 8:37 
GeneralMy vote of 5 Pin
bobfox19-Mar-13 18:05
memberbobfox19-Mar-13 18:05 
Cool!
GeneralMy vote of 5 Pin
Hasibul Haque13-Mar-13 18:21
memberHasibul Haque13-Mar-13 18:21 
QuestionMy Vote of 5 Pin
RaviRanjankr13-Mar-13 6:26
memberRaviRanjankr13-Mar-13 6:26 
GeneralMy vote of 5 Pin
Renju Vinod12-Mar-13 20:27
memberRenju Vinod12-Mar-13 20:27 
GeneralMy vote of 5 Pin
Mihai MOGA11-Mar-13 21:44
memberMihai MOGA11-Mar-13 21:44 
Questionamazing demo Pin
smartls10-Mar-13 3:13
membersmartls10-Mar-13 3:13 
GeneralMy vote of 5 Pin
ridoy7-Mar-13 23:33
memberridoy7-Mar-13 23:33 
GeneralMy vote of 5 Pin
MayurrDabhi7-Mar-13 20:20
memberMayurrDabhi7-Mar-13 20:20 

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 | Terms of Use | Mobile
Web02 | 2.8.150731.1 | Last Updated 22 Feb 2013
Article Copyright 2013 by Pavel Torgashov
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid