< Index | XML : How to animate Pictures ?

XML : How to animate Pictures ?

All what you need is implemented into the Picture widget. Then animate a loading image for example is very simple.

First create a simple screen :

<screen>
    <picture src="loading.png"/>
</screen>

In this example, the loading.png is the following image (128x16): loading.png

Now, launch your project and you will be able to see this result :

loading.png

Edit your XML screen file and add the following attributes : frameWidth and frameHeight. Here the frame width and height is 16.

Caution : frameWidth and frameHeight need to be respectively multiple of image width and height.

<screen>
    <picture src="loading.png" frameWidth="16" frameHeight="16" />
</screen>

Now, lmaunch your project and you will be able to see this result (but animated) :

loading.png

You can now play with the frameDuration attribute to change the duration of each frame (all frame have the same duration).

You can reorder or repeat a custom frame sequence by defining the frameSequence attribute. The first frame index is 0.
For example try :

<screen>
    <picture src="loading.png" frameWidth="16" frameHeight="16" frameSequence="7,6,5,4,3,2,1,0" />
</screen>

The rotation side is inverted ...