|
Animation is a tool giving much "user-friendliness" to your
application - just like a Progress control. But a
Progress would not help very much in some cases:
In such cases you are better off with an Animation
control.
An Animation is technically simple: a series of (bitmap) images, one periodically painted over the other.
In terms of its communication potential, however, it is very powerful. You can
take great advantage of it.
The following sections will give you some insight into
| continual Animation | |
| single-sweep Animation | |
| start - stop Animation | |
| stepwise Animation | |
| animated Button |
After each section you will find a bookmark at the right edge of the screen (top). You can jump back to the top by clicking on it.
| Continual Animation |
 |
A continual Animation
is best for visualizing operations of
indeterminate duration. When the dialog appears on screen, the user sees the
animation running and knows that the expected operation is executed - even if
nothing else is happening on screen.
So the user feels comfortable, rather than getting confused after a while and
doing anything potentially harmful to the application.
The nice aspect for the application developer: not one line of extra code is needed
to implement a continual animation. You simply do it like in the following code
lines:
| hBmp1 = LoadBitmap (hInstance, "IDB_BROWSE"); |
| Control (stc1, "Static", DYN_LTEXT, ..., .., ..., ..., "\bImages= *%x,32,31", hBmp1, " Animate=250,1 Continual", ...), |
| stc1 | identifier of this control |
| "Static" | window class of carrier (this animation will be displayed on a Static) |
| DYN_LTEXT | DLG-specific style combination for a Static |
| \b | DLG-specific separator to introduce options |
| "Images=*%x,32,31", hBmp1 | Option to assign bitmap series to carrier. The bitmaps were loaded before as hBmp1. Each image is 32 pixels wide and 31 pixels high. |
| "Animate=250,1" | Option to treat the bitmap series as an animation.
Images will be overpainted by next image with a period of 250 milliseconds,
clocked by system timer number 1. |
| "Continual" | Option to make this animation continual:
it will run from pop-up until closing of dialog. (Though there may be manipulations to stop it, do step-by-step animation, and start continual animation again, as in the sample program.) |
The bitmap series determining the animation looks like this:
| Single-sweep Animation |
 |
A single-sweep animation is useful for visualizing an operation
over some seconds, without having to care about stopping it. All you need is to have
an idea of its maximum length. When the end of the bitmap series is encountered, the
animation will stop automatically.
This can be coded like the following lines:
| hBmp2 = LoadBitmap (GetInst(), "IDB_BITMAP4"); |
| hAnim2 = CreateCtl (..., stc2, "Static", DYN_LTEXT, ..., ..., ..., ..., "\bImages=*%x,40,40", hBmp2, " Animate=500,2", ...); |
| hAnim2 | window handle by which this animation will be manipulated |
| stc2 | identifier of this control |
| "Static" | window class of carrier (this animation will be displayed on a Static) |
| DYN_LTEXT | DLG-specific style combination for a Static |
| \b | DLG-specific separator to introduce options |
| "Images=*%x,40,40", hBmp2 | Option to assign bitmap series to carrier. The bitmaps were loaded before as hBmp2. Each image is 40 pixels wide and 40 pixels high. |
| "Animate=500,2" | Option to treat the bitmap series as an animation.
Images will be overpainted by next image with a period of 500 milliseconds,
clocked by system timer number 2. |
The bitmap series determining the animation looks like this:
If you want to start a single-sweep animation, all you need to do is this:
| StartAnimation (hAnim2, -500); |
| hAnim2 | window handle of animation to start (see CreateCtl ) |
| -500 | timing: every 500 milliseconds a bitmap will be
overpainted by the next bitmap. The minus-sign tells DLG to do a single-sweep
animation. (Default: start continual animation) |
| Start - stop Animation |
 |
Many operations have clearly defined start and end points.
But the time in between is hard to predict.
For example, take a search operation: in order to predict its time for completion
you would need to know how many objects have to be inspected. This, however, you cannot
know before they were actually visited. Thus a Progress control could easily conjure up
false expectations by the user.
Better you start an Animation.
Then you don't need to care about its exact duration. When it is completed, you
simply stop it.
This was done in the example whose screenshot you see above - an animation
visualizing a lengthy buildup operation. From the rubble at the bottom, one layer
appears on top of the other.
It was coded like the following lines:
| hBmp3 = LoadBitmap (GetInst(), "IDB_BUILDUP"); |
| hAnim3 = CreateCtl (..., stc3, "Display", 0, ..., ..., ..., ..., "\bImages=*%x, 40,40", hBmp3, " Animate=500,3 Continual", " BkColor=%x", RGB_WHITE, ...); |
| hAnim3 | window handle by which this animation will be manipulated |
| stc3 | identifier of this control |
| "Display" | DLG-specific window class of carrier (this animation will be displayed on a Display, see Dlg 1.10) |
| 0 | (a Display has no special window style) |
| \b | DLG-specific separator to introduce options |
| "Images=*%x,40,40", hBmp3 | Option to assign bitmap series to carrier. The bitmaps were loaded before as hBmp3. Each image is 40 pixels wide and 40 pixels high. |
| "Animate=500,3" | Option to treat the bitmap series as an animation.
Images will be overpainted by next image with a period of 500 milliseconds,
clocked by system timer number 3. |
| "Continual" | Option to make this animation continual:
by default it will run from pop-up until closing of dialog. (Though there can be manipulations to stop it, do step-by-step animation, and start continual animation again, as in the sample program.) |
The bitmap series determining the animation looks like this:
Note: the bitmaps are painted on gray background. Thus they are displayed in "transparent" mode, i.e. the background color of the carrier (Static, Button, Display) replaces the gray pixels.
In order to handle a start-stop animation you need the following code lines:
| StartAnimation (hAnim3); |
| StopAnimation (hAnim3); |
| hAnim3 | window handle of animation to start/stop (see CreateCtl ) |
| Stepwise Animation |
Stepwise Animation will normally be used for debugging only.
If you employ an animation planfully, you will want to be able to inspect every
bitmap of the series individually. Thus you can do final corrections before you
release the application.
In this context it's useful that you need one single line of code only to convert a
stepwise to a start-stop or a continual animation. Therefore you can have all
of them in your code, just out-comment the lines you want to disable.
In the sample program, each one of the animations presented before was implemented
also for step-by-step execution. So there is no special case to be presented here.
To execute one animation step you just need the following code line:
| StepAnimation (hAnim); |
| hAnim | window handle of animation to be executed by one step |
| Animated Button |
 |
In some applications you will want to use a knack: seemingly
a continual or a start-stop animation, it behaves like a stepwise animation if a
hidden switch is clicked. An animation can be displayed on a Static,
Display or Button
as well. So if you display it on a button, you have that "hidden switch": If the
animation itself is clicked, the next of its bitmaps is displayed.
Just create a button with the animation among its options, like in the following
code lines:
| hBmp4 = LoadBitmap (GetInst(), "IDB_BITMAP6"); |
| hAnim4 = CreateCtl (..., psh4, "Button", DYN_BUTTON, ..., ..., ..., ..., "\bImages=*%x,12,47", hBmp4, " Animate=500,4", ...); |
| hAnim4 | window handle by which this animation will be manipulated |
| psh4 | identifier of this control (you can use this 'id' to receive the Windows-message when the button is clicked) |
| "Button" | window class of carries (this animation will be displayed on a button) |
| DYN_BUTTON | DLG-specific style combination |
| \b | DLG-specific separator to introduce options |
| "Images=*%x,12,47", hBmp4 | Option to assign bitmap series to carrier. The bitmaps were loaded before as hBmp4. Each image is 12 pixels wide and 47 pixels high. |
| "Animate=500,4" | Option to treat the bitmap series as an animation.
Images will be overpainted by next image with a period of 500 milliseconds,
clocked by system timer number 4. |
The bitmap series determining the animation looks like this:
To react when the "hidden switch" is clicked, you just need the following code line:
| case psh4: StepAnimation (hAnim4); |
| psh4 | identifier of button on which animation will be displayed (see CreateCtl ) |
| hAnim4 | window handle of animation to be executed when button is clicked |