transit_example_01_explained(3)

NAME
transit_example_01_explained - elm_transit - Basic transit usage.

The full code for this example can be found at Transit example 1.

This example shows the simplest way of creating a transition and applying it to an object. Similarly to every other elementary example, we create a window, set its title, size, autodel property, and setup a callback to exit the program when finished:

 We also add a resizable white background to use behind our animation:

 And then we add a button that we will use to demonstrate the effects of our animation:

 Notice that we are not adding the button with elm_win_resize_object_add() because we don't want the window to control the size of the button. We will use the transition to change the button size, so it could conflict with something else trying to control that size.

Now, the simplest code possible to create the resize animation:

 As you can see, this code is very easy to understand. First, we create the transition itself with elm_transit_add(). Then we add the button to this transition with elm_transit_object_add(), which means that the transition will operate over this button. The effect that we want now is changing the object size from 100x50 to 300x150, and can be achieved by adding the resize effect with elm_transit_effect_resizing_add().

Finally, we set the transition time to 5 seconds and start the transition with elm_transit_go(). If we wanted more effects applied to this button, we could add them to the same transition. See the elm_transit - Combined effects and options. to watch many transitions being applied to an object.