[UI Sample] Animator Sample Overview

The Animator sample demonstrates how to display rectangles with an animation effect using EFL animator and timer functions. Creating an animation requires information, such as how long the animation runs, and having a callback that executes the animation.

The following figure illustrates the result of the Animator sample.

Figure: Animator screen

Implementation

The create_base_gui() function draws 2 different rectangles and calls the ecore_animator_frametime_set(), ecore_animator_timeline_add(), ecore_animator_add(), and ecore_timer_add() functions to give animation effects.

#include "animator.h"
#include "dbg.h"

typedef struct appdata 
{
   Evas_Object *win;
   Evas_Object *rect;
   Evas_Object *rect2;
   Ecore_Animator *anim;
} appdata_s;

static void create_base_gui(appdata_s *ad)
{
   Evas_Object *bg;
   Evas *evas;

   // Window 
   ad->win = elm_win_util_standard_add(PACKAGE, PACKAGE);
   elm_win_autodel_set(ad>>win, EINA_TRUE);

   evas_object_smart_callback_add(ad->win, "delete,request", win_delete_request_cb, NULL);
   eext_object_event_callback_add(ad->win, EEXT_CALLBACK_BACK, win_back_cb, ad);
   // Main part of the animator function
   evas = evas_object_evas_get(ad->win);
   bg = evas_object_rectangle_add(evas);
   evas_object_resize(bg, 300, 400);
   evas_object_show(bg);
   ad->rect = evas_object_rectangle_add(evas);
   evas_object_color_set(ad->rect, 0, 0, 255, 255);
   evas_object_resize(ad->rect, 50, 50);
   evas_object_show(ad->rect);
   ad->rect2 = evas_object_rectangle_add(evas);
   evas_object_color_set(ad->rect2, 0, 55, 0, 255);
   evas_object_resize(ad->rect2, 50, 50);
   evas_object_show(ad->rect2);
   ecore_animator_frametime_set(1. / 50);
   ecore_animator_timeline_add(5, _advance_frame, ad->rect);
   ad->anim = ecore_animator_add(_advance_frame3, ad->rect2);
   ecore_timer_add(10, _start_second_anim, ad->rect);
   ecore_timer_add(5, _freeze_third_anim, ad->anim);
   ecore_timer_add(10, _thaw_third_anim, ad->anim);
   // Show the window after the base GUI is set up
   evas_object_show(ad->win);
}

The _advance_frame(), _advance_frame2(), and _advance_frame3() functions are callbacks that give animation effects by resizing the rectangle for a different time frame, moving the rectangle location and changing the color.

static Eina_Bool _advance_frame(void *data, double pos)
{
   double frame = pos;
   frame = ecore_animator_pos_map(pos, ECORE_POS_MAP_SPRING, 1.2, 15);
   evas_object_resize(data, 50 * (1 + frame), 50 * (1 + frame));
   evas_object_move(data, 100 * frame, 100 * frame);
   evas_object_color_set(data, 255 * frame, 0, 255 * (1 - frame), 255);

   return EINA_TRUE;
}

static Eina_Bool _advance_frame2(void *data, double pos)
{
   double frame = pos;
   frame = ecore_animator_pos_map(pos, ECORE_POS_MAP_BOUNCE, 1.2, 50);
   evas_object_resize(data, 100 - (50 * frame), 100 - (50 * frame));
   evas_object_move(data, 100 * (1 - frame), 100 * (1 - frame));
   evas_object_color_set(data, 255 * (1 - frame), 0, 255 * frame, 255);

   return EINA_TRUE;
}

static Eina_Bool _advance_frame3(void *data)
{
   static int x = 0;
   if (x >= 250)
      x = 0;
   evas_object_move(data, ++x, 350);

   return EINA_TRUE;
}

The _start_second_anim(), _freeze_third_anim, and _thaw_third_anim functions call the timer, stop the animation, and resume the animation.

static Eina_Bool _start_second_anim(void *data)
{
   ecore_animator_frametime_set(1. / 10);
   ecore_animator_timeline_add(20, _advance_frame2, data);

   return EINA_FALSE;
}

static Eina_Bool _freeze_third_anim(void *data)
{
   ecore_animator_freeze(data);

   return EINA_FALSE;
}

static Eina_Bool _thaw_third_anim(void *data)
{
   ecore_animator_thaw(data);

   return EINA_FALSE;
}