Adding a new animation tutorial

Patch by: Guilherme Iscaro <iscaro@profusion.mobi>

SVN revision: 69974
This commit is contained in:
Guilherme Iscaro 2012-04-09 13:50:16 +00:00 committed by Jonas M. Gastal
parent 1772917ed5
commit 923d8ca03f
4 changed files with 235 additions and 0 deletions

View File

@ -18,6 +18,7 @@
* @li @ref tutorial_edje_multisense
* @li @ref tutorial_edje_basic2
* @li @ref tutorial_edje_signals_2
* @li @ref tutorial_edje_animations_2
*/
/**
@ -1181,3 +1182,92 @@
* edje_cc -id /path/to/the/image signalsBubble.edc
* @endverbatim
*/
/**
* @page tutorial_edje_animations_2 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:
*
* @dontinclude animations2.edc
* @skipline max
* @skipline min
*
* 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:
* @skip part{
* @until type:
*
*
* 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:
* @dontinclude animations2.edc
* @skip description
* @until }
* @until }
*
* 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:
*
* @skip description
* @until }
*
* 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:
*
* @skip program {
* @until }
*
* 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:
*
* @skip program {
* @until }
*
* Now all you have to do is compile the code and run it!
*
* When you compile and run it you should see this:
* @image html signal2final.png
* @image rtf signal2final.png
* @image latex signal2final.eps width=\textwidth
*
* The .edc file:
* @include animations2.edc
*
* The source code:
* @include animations2.c
*
* To compile use this command:
* @verbatim
* 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
* @endverbatim
*/

View File

@ -0,0 +1,96 @@
#ifdef HAVE_CONFIG_H
#include "config.h"
#else
#define PACKAGE_EXAMPLES_DIR "."
#define __UNUSED__
#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)
{
ecore_main_loop_quit();
}
int
main(int argc __UNUSED__, char **argv)
{
char edje_file_path[PATH_MAX];
const char *edje_file = "animations2.edj";
Evas *evas;
Ecore_Evas *ee;
Eina_Prefix *pfx;
Evas_Object *edje_obj;
Evas_Object *bg;
if (!ecore_evas_init()) return EXIT_FAILURE;
if (!edje_init()) goto shutdown_ecore_evas;
pfx = eina_prefix_new(argv[0], main, "EDJE_EXAMPLES", "edje/examples",
edje_file, PACKAGE_BIN_DIR, PACKAGE_LIB_DIR,
PACKAGE_DATA_DIR, PACKAGE_DATA_DIR);
if (!pfx) goto shutdown_edje;
ee = ecore_evas_new(NULL, 0, 0, WIDTH, HEIGHT, NULL);
if (!ee) goto eina_prefix_free;
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);
snprintf(edje_file_path, sizeof(edje_file_path), "%s/examples/%s",
eina_prefix_data_get(pfx), edje_file);
if (!edje_object_file_set(edje_obj, edje_file_path, "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 eina_prefix_free;
}
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();
eina_prefix_free(pfx);
ecore_evas_free(ee);
edje_shutdown();
ecore_evas_shutdown();
return EXIT_SUCCESS;
eina_prefix_free: eina_prefix_free(pfx);
shutdown_edje: edje_shutdown();
shutdown_ecore_evas: ecore_evas_shutdown();
return EXIT_FAILURE;
}

View File

@ -0,0 +1,48 @@
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;
}
}
}
}

View File

@ -172,6 +172,7 @@ part of Edje's API:
- @ref tutorial_edje_box2
- @ref tutorial_edje_color_class
- @ref tutorial_edje_animations
- @ref tutorial_edje_animations_2
- @ref Example_Edje_Signals_Messages
- @ref tutorial_edje_signals_2
- @ref tutorial_edje_text