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.

For more information, see the Flip API.

Figure: Flip hierarchy

Flip hierarchy

Adding a Flip Component

To create a flip component, use the elm_flip_add() function:

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

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. The following 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

To interact 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.

    The following modes of interaction are available:

    • 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

    To set the rotation animation:

    elm_flip_interaction_set(flip, ELM_FLIP_INTERACTION_ROTATE);

  • 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, the event_info parameter is NULL.

  • "animate,begin": A flip animation is started
  • "animate,done": A flip animation is finished

To 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");
}
Note
Except as noted, this content is licensed under LGPLv2.1+.
Go to top