Mobile native Wearable native

Creating Elementary Transit Effects

This tutorial demonstrates how you can implement a variety of EFL animation effects using the APIs available in the EFL library.

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

To initialize the application layout:

  1. Create the layout with 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. The elm_naviframe component is added to act as a view manager for the window and provide 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 the window after the base GUI is set up
   evas_object_show(ad->win);
}

  2. Create the main view with the create_main_view() function. The main view 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 tutorial describes only the rotation and zoom implementations. For more information about other effects, see the transit.c file and the Transit API (in mobile or wearable applications) or use NULL instead. The following figure illustrates the rotation and zoom effects.

    Figure: Rotation and zoom

    Rotation and zoom

Implementing the Rotation Effect

When the rotation effect is selected in the list, a related callback function that implements the animation effect is called. The data is sent as an Evas_Object.

To implement the rotation effect:

  1. Use the elm_transit object with the elm_transit_add() function to add the transit effect: 
    static void
rotation_cb(void *data, Evas_Object *obj, void *event_info)
{
   Evas_Object *layout = (Evas_Object *) data;
   Elm_Transit *transit = elm_transit_add();
  2. Set the transit rotation amount and duration: 
       // 360 degree rotation effect in the clockwise direction
   elm_transit_object_add(transit, layout);
   elm_transit_effect_rotation_add(transit, 0, 360);
   elm_transit_duration_set(transit, 1);
  3. To start the transit animation, use the elm_transit_go() function: 
       elm_transit_go(transit);
}

Implementing the Zoom Effect

When the zoom effect is selected in the list, a related callback function that implements the animation effect is called. The data is sent as an Evas_Object.

To implement the zoom effect:

  1. After adding the transit object, add an Evas_Object to get the zoom effect: 
    static void
zoom_cb(void *data, Evas_Object *obj, void *event_info)
{
   Evas_Object *layout = (Evas_Object *) data;
  2. Set the zoom from the original size (1.0) to 0.4 times the original size, and set the duration: 
       // 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);
  3. Similarly, set the zoom size (0.4) back to the original size (1.0), and set the duration: 
       // 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);
  4. Set both effects to be applied in sequence, and start the animation: 
       elm_transit_chain_transit_add(transit, transit2);
   elm_transit_go(transit);
}
Go to top