Mobile native

Flip

This feature is supported in mobile applications only.

The flip component can hold two Evas_Objects and allows the user flip between them using several pre-defined animations.

Figure: Flip hierarchy

Flip hierarchy

Adding a Flip Component

The following example shows how to create a flip component.

Evas_Object *flip, *parent, *content1, *content2;
flip = elm_flip_add(parent);

You can add content to the flip component. content1 is set to the front content and content2 is set to the back mode.

elm_object_part_content_set(flip, "front", content1);
elm_object_part_content_set(flip, "back", content2);

Configuring Flip Animation

Now you can run an flip animation.

elm_flip_go(flip, ELM_FLIP_CUBE_UP);

This animation flips up the front content object as if it was on a side of a cube, letting the down facing side of the cube appear with the back content object. Several animations are available:

  • ELM_FLIP_ROTATE_X_CENTER_AXIS: Rotate the content around a horizontal axis.
  • ELM_FLIP_ROTATE_Y_CENTER_AXIS: Rotate the content around a vertical axis.
  • ELM_FLIP_ROTATE_XZ_CENTER_AXIS: Rotate the content around a diagonal axis.
  • ELM_FLIP_ROTATE_YZ_CENTER_AXIS: Rotate the content around a diagonal axis.
  • ELM_FLIP_CUBE_LEFT: Rotate the content left as if it was on a side of a cube.
  • ELM_FLIP_CUBE_RIGHT: Rotate the content right as if it was on a side of a cube.
  • ELM_FLIP_CUBE_UP: Rotate the content up as if it was on a side of a cube.
  • ELM_FLIP_CUBE_DOWN: Rotate the content down as if it was on a side of a cube.
  • ELM_FLIP_PAGE_LEFT: Move the content to the left as if the flip was a book.
  • ELM_FLIP_PAGE_RIGHT: Move the content to the right as if the flip was a book.
  • ELM_FLIP_PAGE_UP: Move the content up as if the flip was a book.
  • ELM_FLIP_PAGE_DOWN: Move the content down as if the flip was a book.

Interacting With the User

By default, the user cannot interact with the flip. You can set the interaction to be possible, but you have to choose which animation appears on the interaction (rotation has been selected in the following example).

elm_flip_interaction_set(flip, ELM_FLIP_INTERACTION_ROTATE);

The available modes of interaction are

  • ELM_FLIP_INTERACTION_NONE: No interaction is allowed
  • ELM_FLIP_INTERACTION_ROTATE: Interaction causes a rotating animation
  • ELM_FLIP_INTERACTION_CUBE: Interaction causes a cube animation
  • ELM_FLIP_INTERACTION_PAGE: Interaction causes a page animation

You must also choose which interaction directions are enabled. Only right and left are enabled in the following example.

elm_flip_interaction_direction_enabled_set(flip, ELM_FLIP_DIRECTION_LEFT, EINA_TRUE);
elm_flip_interaction_direction_enabled_set(flip, ELM_FLIP_DIRECTION_RIGHT, EINA_TRUE);

You can also set the amount of the flip that is sensitive to user interaction. In the following example, it is set to the entire flip (1) to make the flip easy to interact with.

elm_flip_interaction_direction_hitsize_set(flip, ELM_FLIP_DIRECTION_LEFT, 1);
elm_flip_interaction_direction_hitsize_set(flip, ELM_FLIP_DIRECTION_RIGHT, 1);

Using the Flip Callbacks

Two signals are emitted by the flip: one when an animation starts and one when it ends. For these signals, event_info parameter is NULL.

"animate,begin" - A flip animation is started
"animate,done" - A flip animation is finished

You can register a callback on the "animation,begin" signal.

{
   evas_object_smart_callback_add(entry, "animate,begin", anim_start_cb, data);
}

// Callback function for the "animate,begin" signal
// This callback is called when the flip animation starts
void anim_start_cb(void *data, Evas_Object *obj, void *event_info)
{
   dlog_print(DLOG_INFO, LOG_TAG, "Animation starts\n");
}