previous page__: Creating a Wipe Effect
=== Elementary Animations ===
==== Transit: Implementing Elementary Transit Effects ====
This tutorial demonstrates how you can implement a variety of EFL animation effects using
the Transit API available in the Elementary library.
=== Initializing the Application Layout ===
The application uses widgets, such as elm_naviframe for
view management, layout classes, such as elm_list for the composition of the
screen.
The transit is designed to apply various animated transition effects to the
Evas_Object. The following transition effects are supported in EFL and
Elementary applications.
* Blend
* Color
* Fade
* Flip
* Rotation
* Transition
* Wipe
* Zoom
The application layout is created by adding two naviframes in order to switch
from one to another in transitions. Two lists are respectively added to the
two naviframes.
<code c>
EAPI_MAIN int
elm_main(int argc, char argv)
{
Evas_Object *navi, *navi2, *list, *list2;
win = elm_win_util_standard_add(“Elementary Animations”, “Elementary Animations Tutorial”);
elm_policy_set(ELM_POLICY_QUIT, ELM_POLICY_QUIT_LAST_WINDOW_CLOSED);
elm_win_autodel_set(win, EINA_TRUE);
if (elm_win_wm_rotation_supported_get(win))
{
int rots[4] = { 0, 90, 180, 270 };
elm_win_wm_rotation_available_rotations_set(win, (const int *)(&rots), 4);
}
Elm_Object_Item *nf_it, *nf_it2;
/* add two naviframes and two lists to switch
* from one to another in some transitions */
navi2 = elm_naviframe_add(win);
navi = elm_naviframe_add(win);
list = elm_list_add(navi);
list2 = elm_list_add(navi2);
elm_list_mode_set(list, ELM_LIST_COMPRESS);
elm_list_mode_set(list2, ELM_LIST_COMPRESS);
/* store naviframe pointeurs to pass them
* in data pointeur parameter */
Navi navis = {navi, navi2};
Navi navis2 = {navi2, navi};
/* first list items */
elm_list_item_append(list, “Blend”, NULL, NULL, blend_cb, &navis);
elm_list_item_append(list, “Color”, NULL, NULL, color_cb, &navis);
elm_list_item_append(list, “Fade”, NULL, NULL, fade_cb, &navis);
elm_list_item_append(list, “Flip”, NULL, NULL, flip_cb, &navis);
elm_list_item_append(list, “Rotation”, NULL, NULL, rotation_cb, &navis);
elm_list_item_append(list, “ResizableFlip”, NULL, NULL, resizable_flip_cb, &navis);
elm_list_item_append(list, “Translation”, NULL, NULL, translation_cb, &navis);
elm_list_item_append(list, “Wipe”, NULL, NULL, wipe_cb, &navis);
elm_list_item_append(list, “Zoom”, NULL, NULL, zoom_cb, &navis);
elm_list_item_append(list, “Custom”, NULL, NULL, custom_cb, &navis);
elm_list_go(list);
/* second list items*/
elm_list_item_append(list2, “Blend2”, NULL, NULL, blend_cb, &navis2);
elm_list_item_append(list2, “Color2”, NULL, NULL, color_cb, &navis2);
elm_list_item_append(list2, “Fade2”, NULL, NULL, fade_cb, &navis2);
elm_list_item_append(list2, “Flip2”, NULL, NULL, flip_cb, &navis2);
elm_list_item_append(list2, “Rotation2”, NULL, NULL, rotation_cb, &navis2);
elm_list_item_append(list2, “ResizableFlip2”, NULL, NULL, resizable_flip_cb, &navis2);
elm_list_item_append(list2, “Translation2”, NULL, NULL, translation_cb, &navis2);
elm_list_item_append(list2, “Wipe2”, NULL, NULL, wipe_cb, &navis2);
elm_list_item_append(list2, “Zoom2”, NULL, NULL, zoom_cb, &navis2);
elm_list_item_append(list2, “Custom2”, NULL, NULL, custom_cb, &navis2);
elm_list_go(list2);
nf_it = elm_naviframe_item_push(navi, “Transit”, NULL, NULL, list, NULL);
nf_it2 = elm_naviframe_item_push(navi2, “Transit2”, NULL, NULL, list2, NULL);
evas_object_show(navi);
evas_object_show(navi2);
evas_object_show(list);
evas_object_show(list2);
evas_object_resize(navi2, 400, 400);
evas_object_resize(navi, 400, 400);
evas_object_resize(win, 400, 400);
evas_object_show(win);
elm_run();
elm_shutdown();
return 0;
}
ELM_MAIN()
</code>
The Navi structure is used to store the naviframe pointeurs in order to pass
them in data pointeur as a parameter in callback functions.
<code c>
/* store naviframe pointeurs */
typedef struct _Navi
{
Evas_Object *navi;
Evas_Object *navi2;
} Navi;
</code>
Next the transition effects will be described, there are two kind of transit
effects, one when the effect applies on one object, the other one when the
effect is a transition between two objects.
=== Implementing the Rotation Effect ===
To implement the rotation effect:
- Use the elm_transit
object with the elm_transit_add()
function to add the transit effect.
- Set the target object with elm_transit_object_add()
function.
- Set the effect rotation indication the rotation amount with elm_transit_effect_rotation_add()
function.
- Set the transit duration with elm_transit_duration_set()
- To start the transit animation, use the elm_transit_go()
function.
<code c>
static void
rotation_cb(void *data, Evas_Object *obj, void *event_info)
{
Navi *navis = data;
Evas_Object *navi=navis->navi;
Elm_Transit *transit = elm_transit_add();
360 degree rotation effect in the clock-wise direction
elm_transit_object_add(transit, navi);
elm_transit_effect_rotation_add(transit, 0, 360);
elm_transit_duration_set(transit, 1);
elm_transit_go(transit);
}
</code>
For the transition with one effect, it will be very similar to this one so it
will be not detailed excepted particular callbacks as the next one for the
zoom effect.
=== Implementing the Zoom Effect ===
For the zoom effect, two transitions are set, one for zooming in the other one
for zooming out.
The elm_transit_chain_transit_add()
function allows to chain the
transitions:
<code c>
static void
zoom_cb(void *data, Evas_Object *obj, void *event_info)
{
Navi *navis = data;
Evas_Object *navi=navis->navi;
Zoom out to scale 0.6
Elm_Transit *transit = elm_transit_add();
elm_transit_smooth_set(transit, EINA_FALSE);
elm_transit_object_add(transit, navi);
elm_transit_effect_zoom_add(transit, 1.0, 0.4);
elm_transit_duration_set(transit, 0.5);
Zoom in to the original size
Elm_Transit *transit2 = elm_transit_add();
elm_transit_smooth_set(transit2, EINA_FALSE);
elm_transit_object_add(transit2, navi);
elm_transit_effect_zoom_add(transit2, 0.4, 1.0);
elm_transit_duration_set(transit2, 0.5);
elm_transit_chain_transit_add(transit, transit2);
elm_transit_go(transit);
}
</code>
=== Implementing the Wipe Effect ===
Similarly to the rotation effect but with the elm_transit_effect_wipe_add()
function by indicating the wipe type and the wiping direction.
<code c>
static void
wipe_cb(void *data, Evas_Object *obj, void *event_info)
{
Navi *navis = data;
Evas_Object *navi=navis->navi;
Elm_Transit *transit = elm_transit_add();
elm_transit_object_add(transit, navi);
elm_transit_effect_wipe_add(transit, ELM_TRANSIT_EFFECT_WIPE_TYPE_HIDE, ELM_TRANSIT_EFFECT_WIPE_DIR_RIGHT);
elm_transit_duration_set(transit, 3.0);
elm_transit_go(transit);
}
</code>
=== Implementing the Translation Effect ===
Similarly to the rotation effect but with the elm_transit_effect_translation_add()
function by indicating the position when effect begins and end.
<code c>
static void
translation_cb(void *data, Evas_Object *obj, void *event_info)
{
Navi *navis = data;
Evas_Object *navi=navis->navi;
Elm_Transit *transit = elm_transit_add();
elm_transit_object_add(transit, navi);
elm_transit_effect_translation_add(transit, 0, 0, 50, 100);
elm_transit_duration_set(transit, 3.0);
elm_transit_go(transit);
}
</code>
=== Implementing the Color Effect ===
Similarly to the rotation effect but with the elm_transit_effect_color_add()
function by indicating the RGBA color when effect begins and end.
<code c>
static void
color_cb(void *data, Evas_Object *obj, void *event_info)
{
Navi *navis = data;
Evas_Object *navi=navis->navi;
Elm_Transit *transit = elm_transit_add();
elm_transit_object_add(transit, navi);
elm_transit_effect_color_add(transit,0,0,0,0,255,255,0,255);
elm_transit_duration_set(transit, 3.0);
elm_transit_go(transit);
}
</code>
=== Implementing the Blend Effect ===
This time, the blend effect is a transition between the two naviframes. So,
the two naviframes are added to the Elm_transit
. Moreover, the
elm_transit_objects_final_state_keep_set()
function allows to set the
state of the final state of the transition (it could be used for the precedent
effects too):
<code c>
static void
blend_cb(void *data, Evas_Object *obj, void *event_info)
{
Navi *navis = data;
Evas_Object *navi=navis->navi;
Evas_Object *navi2=navis->navi2;
Elm_Transit *transit = elm_transit_add();
elm_transit_object_add(transit, navi);
elm_transit_object_add(transit, navi2);
elm_transit_effect_blend_add(transit);
elm_transit_duration_set(transit, 3.0);
elm_transit_objects_final_state_keep_set(transit, EINA_TRUE);
elm_transit_go(transit);
}
</code>
=== Implementing the Fade Effect ===
Similarly to the blend effect but with the elm_transit_effect_fade_add()
:
<code c>
static void
fade_cb(void *data, Evas_Object *obj, void *event_info)
{
Navi *navis = data;
Evas_Object *navi=navis->navi;
Evas_Object *navi2=navis->navi2;
Elm_Transit *transit = elm_transit_add();
elm_transit_object_add(transit, navi);
elm_transit_object_add(transit, navi2);
elm_transit_effect_fade_add(transit);
elm_transit_duration_set(transit, 3.0);
elm_transit_objects_final_state_keep_set(transit, EINA_TRUE);
elm_transit_go(transit);
}
</code>
=== Implementing the Flip Effect ===
Similarly to the blend effect but with the elm_transit_effect_flip_add()
by indicating the flipping axis and the flipping direction (EINA_TRUE
is
clock-wise):
<code c>
static void
flip_cb(void *data, Evas_Object *obj, void *event_info)
{
Navi *navis = data;
Evas_Object *navi=navis->navi;
Evas_Object *navi2=navis->navi2;
Elm_Transit *transit = elm_transit_add();
elm_transit_object_add(transit, navi);
elm_transit_object_add(transit, navi2);
elm_transit_effect_flip_add(transit, ELM_TRANSIT_EFFECT_FLIP_AXIS_X, EINA_TRUE);
elm_transit_duration_set(transit, 3.0);
elm_transit_objects_final_state_keep_set(transit, EINA_TRUE);
elm_transit_go(transit);
}
</code>
=== Implementing the Resizable Flip Effect ===
Similarly to the blend effect but with the elm_transit_effect_flip_add()
by indicating the flipping axis and the flipping direction (EINA_TRUE
is
clock-wise):
<code c>
static void
resizable_flip_cb(void *data, Evas_Object *obj, void *event_info)
{
Navi *navis = data;
Evas_Object *navi=navis->navi;
Evas_Object *navi2=navis->navi2;
Elm_Transit *transit = elm_transit_add();
elm_transit_object_add(transit, navi);
elm_transit_object_add(transit, navi2);
elm_transit_effect_resizable_flip_add(transit, ELM_TRANSIT_EFFECT_FLIP_AXIS_Y, EINA_TRUE);
elm_transit_duration_set(transit, 3.0);
elm_transit_objects_final_state_keep_set(transit, EINA_TRUE);
elm_transit_go(transit);
}
</code>
The whole code__: **transit.c