Transit: Implementing Elementary Transit Effects
This tutorial demonstrates how you can implement a variety of EFL animation effects using the APIs available in the EFL library.
Warm-up
Become familiar with the Ecore, Elementary, and Evas API basics by learning about:
-
Initializing the Application Layout
Initialize the application layout for use.
-
Implementing the Rotation Effect
Implement the rotation effect to the UI layout.
-
Implementing the Zoom Effect
Implement the zooming effect to the UI layout.
Initializing the Application Layout
The application uses UI components, such as elm_conformant and elm_naviframe for view management, layout classes, such as elm_list for the composition of the screen, and UI components, such as elm_button and elm_image for the content inside the view.
The transit is designed to apply various animated transition effects to the Evas_Object. The following transition effects are supported in the Tizen native applications:
- Blend
- Color
- Fade
- Flip
- Rotation
- Transition
- Wipe
- Zoom
The application layout is created by the create_base_gui() function. First, a window is created and the elm_conformant component is added to it to decorate the window with an indicator. It then adds the elm_naviframe component, which acts as a view manager for the window and provides the window title functionality.
static void create_base_gui(appdata_s *ad) { // Window ad->win = elm_win_util_standard_add(PACKAGE, PACKAGE); elm_win_autodel_set(ad->win, EINA_TRUE); if (elm_win_wm_rotation_supported_get(ad->win)) { int rots[4] = { 0, 90, 180, 270 }; elm_win_wm_rotation_available_rotations_set(ad->win, (const int *)(&rots), 4); } evas_object_smart_callback_add(ad->win, "delete,request", win_delete_request_cb, NULL); // Conformant ad->conform = elm_conformant_add(ad->win); evas_object_size_hint_weight_set(ad->conform, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND); elm_win_resize_object_add(ad->win, ad->conform); evas_object_show(ad->conform); // Naviframe ad->nf = create_main_view(ad); elm_object_content_set(ad->conform, ad->nf); // Show window after the base GUI is set up evas_object_show(ad->win); ecore_event_handler_add(ECORE_EVENT_KEY_DOWN, keydown_cb, ad); }
The create_main_view() function creates the main content. It consists of a naviframe containing a list. This function returns a list of naviframe object pointers for the content set.
static Evas_Object* create_main_view(appdata_s *ad) { Elm_Object_Item *nf_it; Evas_Object *navi, *list; navi = elm_naviframe_add(ad->conform); list = elm_list_add(navi); elm_list_mode_set(list, ELM_LIST_COMPRESS); elm_list_item_append(list, "Blend", NULL, NULL, blend_cb, navi); elm_list_item_append(list, "Color", NULL, NULL, color_cb, navi elm_list_item_append(list, "Fade", NULL, NULL, fade_cb, navi); elm_list_item_append(list, "Flip", NULL, NULL, flip_cb, navi); elm_list_item_append(list, "Rotation", NULL, NULL, rotation_cb, navi); elm_list_item_append(list, "ResizableFlip", NULL, NULL, resizable_flip_cb, navi); elm_list_item_append(list, "Translation", NULL, NULL, translation_cb, navi); elm_list_item_append(list, "Wipe", NULL, NULL, wipe_cb, navi); elm_list_item_append(list, "Zoom", NULL, NULL, zoom_cb, navi); elm_list_item_append(list, "Custom", NULL, NULL, custom_cb, navi); elm_list_go(list); nf_it = elm_naviframe_item_push(navi, "Transit", NULL, NULL, list, NULL); return navi; }
This document describes only the rotation and zoom implementations. For more information about other effects, see the transit.c file and the elm_transit document. The following figure illustrates the rotation and zoom effects.
Figure: Rotation and zoom
Implementing the Rotation Effect
If the list item named by rotation includes the touch event, the callback function for this event is called.
The data is sent as an Evas_Object. This implements the animation effect.
To implement the rotation effect:
- Use the elm_transit object with the elm_transit_add() function to add the transit effect.
- Set the transit rotation amount and duration.
- To start the transit animation, use the elm_transit_go() function.
static void rotation_cb(void *data, Evas_Object *obj, void *event_info) { Evas_Object *layout = (Evas_Object *) data; Elm_Transit *transit = elm_transit_add(); // 360 degree rotation effect in the clock-wise direction elm_transit_object_add(transit, layout); elm_transit_effect_rotation_add(transit, 0, 360); elm_transit_duration_set(transit, 1); elm_transit_del_cb_set(transit, transit_del_cb, NULL); elm_transit_go(transit); }
Implementing the Zoom Effect
If the list item named by zoom includes the touch event, the callback function for this event is called.
The data is sent as an Evas_Object. This implements the animation effect.
There are 2 transit functions: one is for the zoom effect and the other is for returning to the original effect:
- After adding the transit object, add an evas_object to get the effect.
- Set the zoom from the original size (1.0) to 0.4 times the original size, and set the duration.
- Similarly, set the zoom size (0.4) back to the original size (1.0), and set the duration.
- Set both of effects to be applied in sequence.
static void zoom_cb(void *data, Evas_Object *obj, void *event_info) { Evas_Object *layout = (Evas_Object *) data; // Zoom out to scale 0.6 Elm_Transit *transit = elm_transit_add(); elm_transit_smooth_set(transit, EINA_FALSE); elm_transit_object_add(transit, layout); 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, layout); elm_transit_effect_zoom_add(transit2, 0.4, 1.0); elm_transit_duration_set(transit2, 0.5); elm_transit_del_cb_set(transit2, transit_del_cb, NULL); elm_transit_chain_transit_add(transit, transit2); elm_transit_go(transit); }