Edje Animations example

In this example we will figure out how to manipulate the animations on an Edje object.

After reading this document you will be able to manipulate the frametime, freeze, pause and stop, all animations on an Edje object.

To play with this example you will use the keyboard. Below are listed the keys and what each does.

• '+' Increase the frametime;
• '-' Decrease the frametime;
• '=' Prints the actual frametime and says if the animations is playing;
• 'f' Freezes the animations in the Edje object;
• 'F' Freezes the animations in all objects in the running program;
• 't' Thaws the animations in the Edje object;
• 'T' Thaws the animations in all objects in the running program;
• 's' Pauses the animations;
• 'p' Plays the animations previously stopped;
• 'a' Starts the animation in the Edje object;
• 'A' Stops the animations in the Edje object;

Now that we've explained how to use our example, we will see how it is made. Let's start by looking at the piece of code responsible to the actions commented above.

_on_key_down(void *data EINA_UNUSED, Evas *evas EINA_UNUSED, Evas_Object *obj, void *event_info)
{
   Evas_Event_Key_Down *ev;
   double               ft;
 
   ev = (Evas_Event_Key_Down *)event_info;
 
   if (!strcmp(ev->key, "h"))
     {
        printf(commands);
        return;
     }
   else if (!strcmp(ev->key, "plus"))
     {
        frametime *= 2.0;
        printf("Increasing frametime to: %f\n", frametime);
        edje_frametime_set(frametime);
     }
   else if (!strcmp(ev->key, "minus"))
     {
        frametime /= 2.0;
        printf("Decreasing frametime to: %f\n", frametime);
        edje_frametime_set(frametime);
     }
   else if (!strcmp(ev->key, "equal"))
     {
        ft = edje_frametime_get();
        printf("Frametime: %f\n", ft);
        if (edje_object_play_get(obj))
          printf("Object is playing\n");
        else
          printf("Object was paused\n");
        if (edje_object_animation_get(obj))
          printf("Animation is running\n");
        else
          printf("Animation was stopped\n");
     }
   else if (!strcmp(ev->key, "s"))
     {
        edje_object_play_set(obj, EINA_FALSE);
        printf("Pausing the object\n");
     }
   else if (!strcmp(ev->key, "p"))
     {
        edje_object_play_set(obj, EINA_TRUE);
        printf("Playing the object\n");
     }
   else if (!strcmp(ev->key, "f"))
       printf("Freezing object. Count: %d\n", edje_object_freeze(obj));
   else if (!strcmp(ev->key, "t"))
       printf("Thawing object. Count: %d\n", edje_object_thaw(obj));
   else if (!strcmp(ev->key, "F"))
     {
        edje_freeze();
        printf("Freezing all objects\n");
     }
   else if (!strcmp(ev->key, "T"))
     {
        edje_thaw();
        printf("Thawing all objects\n");
     }
   else if (!strcmp(ev->key, "a"))
     {
        edje_object_animation_set(obj, EINA_TRUE);
        printf("Starting the animation in the Edje object\n");
     }
   else if (!strcmp(ev->key, "A"))
     {
        edje_object_animation_set(obj, EINA_FALSE);
        printf("Stopping the animation in the Edje object\n");
     }
   else if (!strcmp(ev->key, "Escape"))
     ecore_main_loop_quit();
   else
     {
        printf("unhandled key: %s\n", ev->key);
        printf(commands);
     }

Note

The actions for the keys 'f' and 'F' will have the same effect in our example, just because there is only one object in the running program, The same happens with the keys 't' and 'T'.

As you may have seen these set of functions are pretty easy to handle. The other important part of this example is the EDC file. The animations used in the code were created there

      program {
         signal: "load";
         source: "";
         in: 2.0 0.0;
         after: "animation,state1";
      }
      program {
         name: "animation,state1";
         in: 1.0 0.0;
         action: STATE_SET "invert" 1.0;
         target: "part_one";
         target: "part_two";
         target: "part_three";
         transition: LINEAR 0.6;
         after: "animation,state2";
      }
      program {
         name: "animation,state2";
         in: 1.0 0.0;
         action: STATE_SET "default" 0.0;
         target: "part_one";
         target: "part_two";
         target: "part_three";
         transition: LINEAR 0.6;
         after: "animation,state1";
   }
}

The example's window should look like this picture:

The full example follows.

 
#ifdef HAVE_CONFIG_H
# include "config.h"
#else
# define EINA_UNUSED
#endif
 
#ifndef PACKAGE_DATA_DIR
#define PACKAGE_DATA_DIR "."
#endif
 
#include <Ecore.h>
#include <Ecore_Evas.h>
#include <Edje.h>
 
#define WIDTH  (400)
#define HEIGHT (300)
 
static const char commands[] = \
  "commands are:\n"
  "\t+ - increase frametime\n"
  "\t- - decrease frametime\n"
  "\t= - status of the animation\n"
  "\ts - pause\n"
  "\tp - play\n"
  "\tf - freeze one object\n"
  "\tF - freeze all objects\n"
  "\tt - thaw one object\n"
  "\tT - thaw all objects\n"
  "\ta - start animation of one object\n"
  "\tA - stop animation of one object\n"
  "\tEsc - exit\n"
  "\th - print help\n";
 
static double frametime = 1.0 / 30.0; /* default value */
 
static void
_on_delete_cb(Ecore_Evas *ee EINA_UNUSED)
{
    ecore_main_loop_quit();
}
 
static void
_on_canvas_resize(Ecore_Evas *ee)
{
   Evas_Object *bg;
   Evas_Object *edje_obj;
   int          w;
   int          h;
 
   bg = ecore_evas_data_get(ee, "background");
   edje_obj = ecore_evas_data_get(ee, "edje_obj");
   ecore_evas_geometry_get(ee, NULL, NULL, &w, &h);
   evas_object_resize(bg, w, h);
   evas_object_resize(edje_obj, w, h);
}
 
static void
_on_key_down(void *data EINA_UNUSED, Evas *evas EINA_UNUSED, Evas_Object *obj, void *event_info)
{
   Evas_Event_Key_Down *ev;
   double               ft;
 
   ev = (Evas_Event_Key_Down *)event_info;
 
   if (!strcmp(ev->key, "h"))
     {
        printf(commands);
        return;
     }
   else if (!strcmp(ev->key, "plus"))
     {
        frametime *= 2.0;
        printf("Increasing frametime to: %f\n", frametime);
        edje_frametime_set(frametime);
     }
   else if (!strcmp(ev->key, "minus"))
     {
        frametime /= 2.0;
        printf("Decreasing frametime to: %f\n", frametime);
        edje_frametime_set(frametime);
     }
   else if (!strcmp(ev->key, "equal"))
     {
        ft = edje_frametime_get();
        printf("Frametime: %f\n", ft);
        if (edje_object_play_get(obj))
          printf("Object is playing\n");
        else
          printf("Object was paused\n");
        if (edje_object_animation_get(obj))
          printf("Animation is running\n");
        else
          printf("Animation was stopped\n");
     }
   else if (!strcmp(ev->key, "s"))
     {
        edje_object_play_set(obj, EINA_FALSE);
        printf("Pausing the object\n");
     }
   else if (!strcmp(ev->key, "p"))
     {
        edje_object_play_set(obj, EINA_TRUE);
        printf("Playing the object\n");
     }
   else if (!strcmp(ev->key, "f"))
       printf("Freezing object. Count: %d\n", edje_object_freeze(obj));
   else if (!strcmp(ev->key, "t"))
       printf("Thawing object. Count: %d\n", edje_object_thaw(obj));
   else if (!strcmp(ev->key, "F"))
     {
        edje_freeze();
        printf("Freezing all objects\n");
     }
   else if (!strcmp(ev->key, "T"))
     {
        edje_thaw();
        printf("Thawing all objects\n");
     }
   else if (!strcmp(ev->key, "a"))
     {
        edje_object_animation_set(obj, EINA_TRUE);
        printf("Starting the animation in the Edje object\n");
     }
   else if (!strcmp(ev->key, "A"))
     {
        edje_object_animation_set(obj, EINA_FALSE);
        printf("Stopping the animation in the Edje object\n");
     }
   else if (!strcmp(ev->key, "Escape"))
     ecore_main_loop_quit();
   else
     {
        printf("unhandled key: %s\n", ev->key);
        printf(commands);
     }
}
 
int
main(int argc EINA_UNUSED, char *argv[] EINA_UNUSED)
{
   const char  *edje_file = PACKAGE_DATA_DIR"/animations.edj";
   Ecore_Evas  *ee;
   Evas        *evas;
   Evas_Object *bg;
   Evas_Object *edje_obj;
 
   if (!ecore_evas_init())
     return EXIT_FAILURE;
 
   if (!edje_init())
     goto shutdown_ecore_evas;
 
   /* this will give you a window with an Evas canvas under the first
    * engine available */
   ee = ecore_evas_new(NULL, 0, 0, WIDTH, HEIGHT, NULL);
   if (!ee) goto shutdown_edje;
 
   ecore_evas_callback_delete_request_set(ee, _on_delete_cb);
   ecore_evas_callback_resize_set(ee, _on_canvas_resize);
   ecore_evas_title_set(ee, "Edje Animations Example");
 
   evas = ecore_evas_get(ee);
 
   bg = evas_object_rectangle_add(evas);
   evas_object_color_set(bg, 255, 255, 255, 255); /* white bg */
   evas_object_move(bg, 0, 0); /* at canvas' origin */
   evas_object_resize(bg, WIDTH, HEIGHT); /* covers full canvas */
   evas_object_show(bg);
   ecore_evas_data_set(ee, "background", bg);
 
   edje_obj = edje_object_add(evas);
 
   edje_object_file_set(edje_obj, edje_file, "animations_group");
   evas_object_move(edje_obj, 0, 0);
   evas_object_resize(edje_obj, WIDTH, HEIGHT);
   evas_object_show(edje_obj);
   ecore_evas_data_set(ee, "edje_obj", edje_obj);
 
   evas_object_event_callback_add(edje_obj, EVAS_CALLBACK_KEY_DOWN,
                                  _on_key_down, NULL);
   evas_object_focus_set(edje_obj, EINA_TRUE);
 
   printf(commands);
 
   ecore_evas_show(ee);
 
   ecore_main_loop_begin();
 
   ecore_evas_free(ee);
   ecore_evas_shutdown();
   edje_shutdown();
 
   return EXIT_SUCCESS;
 
 shutdown_edje:
   edje_shutdown();
 shutdown_ecore_evas:
   ecore_evas_shutdown();
 
   return EXIT_FAILURE;
}

collections {
   group {
      name: "animations_group";
      min: 100 80;
 
      parts {
         part {
            name: "part_one";
            type: RECT;
            scale: 1;
            description {
               min: 50 50;
               state: "default" 0.0;
               color: 0 0 0 255; /* black */
               rel1.relative: 0.0 0.0;
               rel2.relative: 0.33 1.0;
            }
            description {
               state: "invert" 1.0;
               inherit: "default" 0.0;
               rel1.relative: 0.0 0.0;
               rel2.relative: 1.0 0.33;
            }
         }
 
         part {
            name: "part_two";
            type: RECT;
            scale: 1;
            description {
               min: 50 50;
               state: "default" 0.0;
               color: 255 255 0 255; /* yellow */
               rel1.relative: 0.33 0.0;
               rel2.relative: 0.66 1.0;
            }
            description {
               state: "invert" 1.0;
               inherit: "default" 0.0;
               rel1.relative: 0.0 0.66;
               rel2.relative: 1.0 1.0;
            }
         }
 
         part {
            name: "part_three";
            type: RECT;
            description {
               state: "default" 0.0;
               color: 255 0 0 255; /* red */
               rel1.relative: 0.66 0.0;
               rel2.relative: 1.0 1.0;
            }
            description {
               state: "invert" 1.0;
               inherit: "default" 0.0;
               rel1.relative: 0.0 0.33;
               rel2.relative: 1.0 0.66;
            }
         }
      }
 
      program {
         signal: "load";
         source: "";
         in: 2.0 0.0;
         after: "animation,state1";
      }
      program {
         name: "animation,state1";
         in: 1.0 0.0;
         action: STATE_SET "invert" 1.0;
         target: "part_one";
         target: "part_two";
         target: "part_three";
         transition: LINEAR 0.6;
         after: "animation,state2";
      }
      program {
         name: "animation,state2";
         in: 1.0 0.0;
         action: STATE_SET "default" 0.0;
         target: "part_one";
         target: "part_two";
         target: "part_three";
         transition: LINEAR 0.6;
         after: "animation,state1";
   }
}

To compile use this command:

* gcc -o edje-animations edje-animations.c -DPACKAGE_BIN_DIR=\"/Where/enlightenment/is/installed/bin\"
* -DPACKAGE_LIB_DIR=\"/Where/enlightenment/is/installed/lib\"
* -DPACKAGE_DATA_DIR=\"/Where/enlightenment/is/installed/share\"
* `pkg-config --cflags --libs evas ecore ecore-evas edje`
*
* edje_cc animations.edc
*