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;
}
Ecore_Evas.h
Evas wrapper functions.
Edje.h
Edje Graphical Design Library.
ecore_evas_init
EAPI int ecore_evas_init(void)
Inits the Ecore_Evas system.
Definition: ecore_evas.c:602
ecore_evas_title_set
EAPI void ecore_evas_title_set(Ecore_Evas *ee, const char *t)
Sets the title of an Ecore_Evas' window.
Definition: ecore_evas.c:1527
ecore_evas_callback_delete_request_set
EAPI void ecore_evas_callback_delete_request_set(Ecore_Evas *ee, Ecore_Evas_Event_Cb func)
Sets a callback for Ecore_Evas delete request events.
Definition: ecore_evas.c:1176
ecore_evas_show
EAPI void ecore_evas_show(Ecore_Evas *ee)
Shows an Ecore_Evas' window.
Definition: ecore_evas.c:1480
ecore_evas_get
EAPI Evas * ecore_evas_get(const Ecore_Evas *ee)
Gets an Ecore_Evas's Evas.
Definition: ecore_evas.c:1300
ecore_evas_shutdown
EAPI int ecore_evas_shutdown(void)
Shuts down the Ecore_Evas system.
Definition: ecore_evas.c:666
ecore_evas_object_associate
EAPI Eina_Bool ecore_evas_object_associate(Ecore_Evas *ee, Evas_Object *obj, Ecore_Evas_Object_Associate_Flags flags)
Associates the given object to this ecore evas.
Definition: ecore_evas_util.c:223
ecore_evas_new
EAPI Ecore_Evas * ecore_evas_new(const char *engine_name, int x, int y, int w, int h, const char *extra_options)
Creates a new Ecore_Evas based on engine name and common parameters.
Definition: ecore_evas.c:1039
ecore_evas_free
EAPI void ecore_evas_free(Ecore_Evas *ee)
Frees an Ecore_Evas.
Definition: ecore_evas.c:1083
ecore_main_loop_quit
void ecore_main_loop_quit(void)
Quits the main loop once all the events currently on the queue have been processed.
Definition: ecore_main.c:1321
ecore_main_loop_begin
void ecore_main_loop_begin(void)
Runs the application main loop.
Definition: ecore_main.c:1311
edje_shutdown
int edje_shutdown(void)
Shuts down the Edje library.
Definition: edje_main.c:262
edje_init
int edje_init(void)
Initializes the Edje library.
Definition: edje_main.c:35
edje_load_error_str
const char * edje_load_error_str(Edje_Load_Error error)
Converts the given Edje file load error code into a string describing it in English.
Definition: edje_load.c:108
edje_object_add
Evas_Object * edje_object_add(Evas *evas)
Instantiates a new Edje object.
Definition: edje_smart.c:22
edje_object_load_error_get
Edje_Load_Error edje_object_load_error_get(const Eo *obj)
Gets the (last) file loading error for a given Edje object.
Definition: edje_legacy.c:15
edje_object_file_set
Eina_Bool edje_object_file_set(Evas_Object *obj, const char *file, const char *group)
Sets the EDJ file (and group within it) to load an Edje object's contents from.
Definition: edje_smart.c:467
EINA_TRUE
#define EINA_TRUE
boolean value TRUE (numerical value 1)
Definition: eina_types.h:539
EINA_UNUSED
#define EINA_UNUSED
Used to indicate that a function parameter is purposely unused.
Definition: eina_types.h:339
Evas
Eo Evas
An opaque handle to an Evas canvas.
Definition: Evas_Common.h:163
evas_object_show
EVAS_API void evas_object_show(Evas_Object *eo_obj)
Makes the given Evas object visible.
Definition: evas_object_main.c:1814
evas_object_color_set
EVAS_API void evas_object_color_set(Evas_Object *obj, int r, int g, int b, int a)
Sets the general/main color of the given Evas object to the given one.
Definition: evas_object_main.c:2024
evas_object_move
EVAS_API void evas_object_move(Evas_Object *obj, Evas_Coord x, Evas_Coord y)
Move the given Evas object to the given location inside its canvas' viewport.
Definition: evas_object_main.c:1171
Evas_Object
Efl_Canvas_Object Evas_Object
An Evas Object handle.
Definition: Evas_Common.h:185
evas_object_focus_set
EVAS_API void evas_object_focus_set(Efl_Canvas_Object *obj, Eina_Bool focus)
Indicates that this object is the keyboard event receiver on its canvas.
Definition: efl_canvas_object_eo.legacy.c:39
evas_object_resize
EVAS_API void evas_object_resize(Evas_Object *obj, Evas_Coord w, Evas_Coord h)
Changes the size of the given Evas object.
Definition: evas_object_main.c:1236
evas_object_rectangle_add
EVAS_API Evas_Object * evas_object_rectangle_add(Evas *e)
Adds a rectangle to the given evas.
Definition: evas_object_rectangle.c:78

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
    *