Edje animations example 2

In this example we will make an animation of a bouncing ball.

Our focus now will be in the .edc file, because in the C source code we just load the edje object and do nothing else.

We want to give the freedom to the object to use the whole canvas of our program, so lets define the min, max of our group:

      max: 700 700;
      min: 700 700;

You will notice that in our .c file the canvas will have this size

Now we will define our part that's going to be our image, the ball:

              part{
                   name: "part_bubble";
                   type: IMAGE;

At the description block bellow we are saying that this part has an image, defining the max and min size and it's position on the edje_object. The default state is the first state of the part, this means that when the edje object is loaded this one is going to be showed to you.

Here it is:

                   description{
                       state: "default" 0.0;
                       max: 63 63;
                       min: 63 63;
                       image{
                            normal: "bubble.png";
                       }
                       rel1.relative: 0.0 0.0;
                       rel2.relative: 0.0 0.0;
                    }

Now in the next description block we are saying where the ball is going to stop. Note that we have the "inherit" property. This means we are inheriting everything from default, except rel1 and rel2, because we are redefining it.

Check the code:

                    description {
                       state: "down-state" 1.0;
                       inherit: "default" 0.0;
                       rel1.relative: 0.0 1.0;
                       rel2.relative: 0.0 0.0;
                     }

We defined how our object will look like and it's position during the animation, now we need to define how it's going to act during the time. To do this we will use the programs block

The first program block will start the animation, it will wait for the 'load' signal. This signal is generated when the edje object is loaded. The 'after' property is saying to this program block exactly this: "When you finish, call the program 'animation,state1' ". The 'in' property is saying, wait 0.5 seconds until you execute this program block.

Here is the code:

       program {
         signal: "load";
         source: "";
         in: 0.5 0.0;
         after: "animation,state1";
       }

Now lets make the ball move and bounce it. In the second program block we are defining what we need to do with the action property. So we are saying change to the state "down-state" using the transition BOUNCE and apply this to the part "part_bubble". You can notice that BOUNCE has three parameters, the first one is saying how much time the transition will last, the second one is the factor of curviness and the last one is saying how many times and object will bounce.

The code is very easy:

       program {
         name: "animation,state1";
         source: "";
         action: STATE_SET "down-state" 1.0;
         target: "part_bubble";
         transition: BOUNCE 2.5 0.0 5.0;
      }

Now all you have to do is compile the code and run it!

When you compile and run it you should see this:

The .edc file:

collections {
   group {
      name: "animation_group";
      max: 700 700;
      min: 700 700;
     images{
         image: "bubble.png" COMP;
     }
    parts{
              part{
                   name: "part_bubble";
                   type: IMAGE;
                   description{
                       state: "default" 0.0;
                       max: 63 63;
                       min: 63 63;
                       image{
                            normal: "bubble.png";
                       }
                       rel1.relative: 0.0 0.0;
                       rel2.relative: 0.0 0.0;
                    }
                    description {
                       state: "down-state" 1.0;
                       inherit: "default" 0.0;
                       rel1.relative: 0.0 1.0;
                       rel2.relative: 0.0 0.0;
                     }
         }
 
    }
    programs{
       program {
         signal: "load";
         source: "";
         in: 0.5 0.0;
         after: "animation,state1";
       }
       program {
         name: "animation,state1";
         source: "";
         action: STATE_SET "down-state" 1.0;
         target: "part_bubble";
         transition: BOUNCE 2.5 0.0 5.0;
      }
    }
   }
}

The source code:

//Compile with:
// edje_cc animations2.edc && gcc -o animations2 animations2.c `pkg-config --libs --cflags ecore ecore-evas edje evas`
 
#ifdef HAVE_CONFIG_H
#include "config.h"
#else
#define PACKAGE_EXAMPLES_DIR "."
#define EINA_UNUSED
#endif
 
#ifndef PACKAGE_DATA_DIR
#define PACKAGE_DATA_DIR "."
#endif
 
#include <Ecore.h>
#include <Ecore_Evas.h>
#include <Edje.h>
#include <stdio.h>
 
#define WIDTH     (700)
#define HEIGHT    (700)
 
static void
_on_delete(Ecore_Evas *ee EINA_UNUSED)
{
   ecore_main_loop_quit();
}
 
int
main(int argc EINA_UNUSED, char **argv EINA_UNUSED)
{
   const char *edje_file = PACKAGE_DATA_DIR"/animations2.edj";
   Evas *evas;
   Ecore_Evas *ee;
   Evas_Object *edje_obj;
   Evas_Object *bg;
 
   if (!ecore_evas_init()) return EXIT_FAILURE;
 
   if (!edje_init()) goto shutdown_ecore_evas;
 
   ee = ecore_evas_new(NULL, 0, 0, WIDTH, HEIGHT, NULL);
 
   if (!ee) goto shutdown_edje;
 
   ecore_evas_callback_delete_request_set(ee, _on_delete);
   ecore_evas_title_set(ee, "Animations");
 
   evas = ecore_evas_get(ee);
 
   bg = evas_object_rectangle_add(evas);
   evas_object_color_set(bg, 255, 255, 255, 255);
   evas_object_move(bg, 0, 0);
   evas_object_resize(bg, WIDTH, HEIGHT);
   evas_object_show(bg);
 
   ecore_evas_object_associate(ee, bg, ECORE_EVAS_OBJECT_ASSOCIATE_BASE);
   evas_object_focus_set(bg, EINA_TRUE);
 
   edje_obj = edje_object_add(evas);
 
   fprintf(stderr, "loading edje file; %s\n", edje_file);
 
   if (!edje_object_file_set(edje_obj, edje_file, "animation_group"))
     {
        int err = edje_object_load_error_get(edje_obj);
        const char *errmsg = edje_load_error_str(err);
        fprintf(stderr, "Could not load the edje file - reason:%s\n", errmsg);
        goto shutdown_edje;
     }
 
   evas_object_resize(edje_obj, 700, 700);
   evas_object_move(edje_obj, 50, 50);
   evas_object_show(edje_obj);
 
   ecore_evas_show(ee);
 
   ecore_main_loop_begin();
 
   ecore_evas_free(ee);
   edje_shutdown();
   ecore_evas_shutdown();
 
   return EXIT_SUCCESS;
 
   shutdown_edje: edje_shutdown();
 
   shutdown_ecore_evas: ecore_evas_shutdown();
 
   return EXIT_FAILURE;
}

To compile use this command:

* gcc -o animations2 animations2.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  animations2.edc
*