Wednesday, November 24, 2010

Animations in Elementary

Elementary is a layer of Enlightenment Foundation Libraries (EFL), it is a library providing a bunch of widgets to the developer, pretty much like Gtk+ does, but Elementary is more optimized than Gtk+ due to using EFL in its base.
Elementary is growing fast, and now, it provide a fast way in how to do animated transitions. If you need do a simple and fast animation inside your application, you can use elementary without parse Edje API (a lower layer from EFL) to do so. 


Transit is a tool in how you can apply effects any widget from Elementary. This tool provides standards effects, but you can do your own effect with it. Most of the standards effects uses the called Map from Evas (another layer from EFL), the Map provide a optimized handling of the objects in the Canvas area (area that all objects are drawn), nor just handling widgets but raw elements like a rectangle.
Lets do a simple example in how to do a rotate effect to a generic widget, you can see the API of the elm_transit.c inside file.

First, create a transit object, passing in seconds, how long you want to last the animation:
Elm_Transit *transit = elm_transit_add(5.0);

Now, we create a context data from the effect rotation, we are saying that the object will rotate from 0 degrees to 135 degres, in clock wise.
void *effect_context = elm_transit_effect_rotation_context_new(0.0, 135.0, EINA_TRUE);

Finally, adding the effect into the transit.
elm_transit_effect_add(transit ,elm_transit_effect_rotation_op, effect_context,

The elm_transit_effect_rotation_op is a function that will perform the animation, you can pass your own function.

And you can add any widget with:
elm_transit_object_add(trans, obj);

The effect will be applied to all widgets that you add in the transit.

The rotation effect applied to a button

Transit offers standards effects like zoom, color, rotate, translation, fade, flip, blend and others, and you can mix them.
Color effect and zoom in the Genlist widget.
But it is not recommended use it if you want improve this application later, because you will not be able to separate the animation from the code, like in Edje, doing the animation inside the Theme.
Animation in the Pager and Box widgets 

The Box widget allow you to change the its layout in an animated way, the layout is how the box organize its objects, if you do an append in a vertical layout, it will append you object at the end of the box, if is an horizontal, the last objects appended will stay at the right of the box.
You can set transitions to the layouts provided by Evas (horizontal, vertical, stack, homogeneous vertical, flow vertical, etc) or pass your own layout. It will be passed by a function like in the Transit, but in the box API.

Box transition from vertical layout to horizontal.

 The pager widget allow you to change between its pages in an animated way too, and you can change how the animations work in the theme of the application. In the elementary_test you can see flip effect, fade effect, slide and others.

Pager with Flip transition.

You can see better how to deal with this kind of transition in tests from elementary_test, see test_box.c and test_pager.c code.

    And big news to me! Yesterday, I became officially a developer of EFL, you can now see me here:   \o/