forked from enlightenment/efl
Adding a new animation tutorial
Patch by: Guilherme Iscaro <iscaro@profusion.mobi> SVN revision: 69974
This commit is contained in:
parent
1772917ed5
commit
923d8ca03f
|
@ -18,6 +18,7 @@
|
||||||
* @li @ref tutorial_edje_multisense
|
* @li @ref tutorial_edje_multisense
|
||||||
* @li @ref tutorial_edje_basic2
|
* @li @ref tutorial_edje_basic2
|
||||||
* @li @ref tutorial_edje_signals_2
|
* @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
|
* edje_cc -id /path/to/the/image signalsBubble.edc
|
||||||
* @endverbatim
|
* @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
|
||||||
|
*/
|
||||||
|
|
|
@ -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;
|
||||||
|
}
|
|
@ -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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
|
@ -172,6 +172,7 @@ part of Edje's API:
|
||||||
- @ref tutorial_edje_box2
|
- @ref tutorial_edje_box2
|
||||||
- @ref tutorial_edje_color_class
|
- @ref tutorial_edje_color_class
|
||||||
- @ref tutorial_edje_animations
|
- @ref tutorial_edje_animations
|
||||||
|
- @ref tutorial_edje_animations_2
|
||||||
- @ref Example_Edje_Signals_Messages
|
- @ref Example_Edje_Signals_Messages
|
||||||
- @ref tutorial_edje_signals_2
|
- @ref tutorial_edje_signals_2
|
||||||
- @ref tutorial_edje_text
|
- @ref tutorial_edje_text
|
||||||
|
|
Loading…
Reference in New Issue