Mobile native Wearable native

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

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

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:

  1. Use the elm_transit object with the elm_transit_add() function to add the transit effect.
  2. Set the transit rotation amount and duration.
  3. 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:

  1. After adding the transit object, add an evas_object to get the effect.
  2. Set the zoom from the original size (1.0) to 0.4 times the original size, and set the duration.
  3. Similarly, set the zoom size (0.4) back to the original size (1.0), and set the duration.
  4. 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);
}
Go to top