cedric pushed a commit to branch master.
http://git.enlightenment.org/website/www-content.git/commit/?id=391e5c41dc099c2d56c05908b87ef74f30a5d9b2
commit 391e5c41dc099c2d56c05908b87ef74f30a5d9b2
Author: Clément Bénier <clement.ben...@openwide.fr>
Date: Wed Jul 15 13:52:30 2015 +0200
Wiki pages effects_tutorial created with 3 different tutos: ecore_animator,
edje_animation and elementary_animations + gif images + code_c, edc
Signed-off-by: Clément Bénier <clement.ben...@openwide.fr>
Signed-off-by: Pierre Le Magourou <pierre.lemagou...@openwide.fr>
---
media/code_c/tutorial/effects/ecore_animator.c | 177 ++++++++++
media/code_c/tutorial/effects/edje_animation.c | 37 ++
media/code_c/tutorial/effects/edje_animation.edc | 238 +++++++++++++
.../tutorial/effects/elementary_animations.c | 376 +++++++++++++++++++++
media/code_c/tutorial/effects/transit.c | 248 ++++++++++++++
media/ecore_animator.gif | Bin 0 -> 231687 bytes
media/ecore_animator_3D.gif | Bin 0 -> 70507 bytes
media/ecore_animator_rotate.gif | Bin 0 -> 81846 bytes
media/ecore_animator_start.gif | Bin 0 -> 465302 bytes
media/ecore_animator_zoom.gif | Bin 0 -> 113023 bytes
media/edje_animation_grow.gif | Bin 0 -> 201893 bytes
media/edje_animation_reset.gif | Bin 0 -> 65545 bytes
media/edje_animation_rotate.gif | Bin 0 -> 155107 bytes
media/edje_animation_start.gif | Bin 0 -> 194019 bytes
media/elementary_animations_blend.gif | Bin 0 -> 37666 bytes
media/elementary_animations_fade.gif | Bin 0 -> 71480 bytes
media/elementary_animations_flip.gif | Bin 0 -> 51779 bytes
media/elementary_animations_flipy.gif | Bin 0 -> 79955 bytes
media/elementary_animations_resize.gif | Bin 0 -> 165763 bytes
media/elementary_animations_rotate.gif | Bin 0 -> 190677 bytes
media/elementary_animations_wipe.gif | Bin 0 -> 38679 bytes
media/elementary_animations_zoom.gif | Bin 0 -> 85750 bytes
media/transit_color.gif | Bin 0 -> 256233 bytes
media/transit_fade.gif | Bin 0 -> 266148 bytes
media/transit_flip.gif | Bin 0 -> 273856 bytes
media/transit_resizeflip.gif | Bin 0 -> 427354 bytes
media/transit_rotate.gif | Bin 0 -> 550245 bytes
media/transit_translation.gif | Bin 0 -> 181474 bytes
media/transit_wipe.gif | Bin 0 -> 69992 bytes
media/transit_zoom.gif | Bin 0 -> 170441 bytes
pages/docs.txt | 1 +
.../effects/ecore_animator/3d_rotation.txt | 75 ++++
.../effects/ecore_animator/drop_bounce.txt | 62 ++++
pages/tutorial/effects/ecore_animator/rotation.txt | 125 +++++++
.../tutorial/effects/ecore_animator/setting_up.txt | 81 +++++
pages/tutorial/effects/ecore_animator/zoom.txt | 72 ++++
pages/tutorial/effects/edje_animation/on_click.txt | 312 +++++++++++++++++
pages/tutorial/effects/edje_animation/start_up.txt | 187 ++++++++++
.../effects/elementary_animations/blend.txt | 53 +++
.../effects/elementary_animations/fade.txt | 53 +++
.../effects/elementary_animations/flip.txt | 61 ++++
.../effects/elementary_animations/flipy.txt | 52 +++
.../effects/elementary_animations/rotation.txt | 62 ++++
.../effects/elementary_animations/setting_up.txt | 255 ++++++++++++++
.../effects/elementary_animations/transit.txt | 362 ++++++++++++++++++++
.../effects/elementary_animations/wipe.txt | 61 ++++
.../effects/elementary_animations/zoom.txt | 54 +++
pages/tutorial/effects_tutorial.txt | 68 ++++
48 files changed, 3072 insertions(+)
diff --git a/media/code_c/tutorial/effects/ecore_animator.c
b/media/code_c/tutorial/effects/ecore_animator.c
new file mode 100644
index 0000000..0ce87b9
--- /dev/null
+++ b/media/code_c/tutorial/effects/ecore_animator.c
@@ -0,0 +1,177 @@
+#include <Elementary.h>
+
+static Eina_Bool
+_do_rotate(void *data, double pos)
+{
+ // Get the animation target
+ Evas_Object *obj = data;
+ // Declaration of an `Evas_Map`
+ Evas_Map *m;
+ // Variables to store the target size and position
+ int x, y, w, h;
+
+ // Getting the size and position of the target
+ evas_object_geometry_get(obj, &x, &y, &w, &h);
+ // Creation of an `Evas_Map` of 4 points
+ m = evas_map_new(4);
+ // Populate source and destination map points to match exactly object.
+ evas_map_util_points_populate_from_object(m, obj);
+ // Create a rotation of 360° with x+(w/2) "x" center and y +(h/2) "y"
center.
+ evas_map_util_rotate(m, 360.0 * pos, x + (w / 2), y + (h / 2));
+ // Setting the object to "animate" in the `Evas_Map`
+ evas_object_map_set(obj, m);
+ // Starting the Animation
+ evas_object_map_enable_set(obj, EINA_TRUE);
+ // Free used memory
+ evas_map_free(m);
+
+ return EINA_TRUE;
+}
+
+static void
+_btn_rotate_cb(void *data, Evas_Object *btn, void *ev)
+{
+ Evas_Object *target = data;
+ ecore_animator_timeline_add(1, _do_rotate, target);
+}
+
+static Eina_Bool
+_do_zoom(void *data, double pos)
+{
+ Evas_Object *obj = data;
+ Evas_Map *m;
+ int x, y, w, h;
+
+ evas_object_geometry_get(obj, &x, &y, &w, &h);
+ m = evas_map_new(4);
+ evas_map_util_points_populate_from_object(m, obj);
+ evas_map_util_zoom(m, 2 * pos, 2 * pos, x , y);
+ evas_object_map_set(obj, m);
+ evas_object_map_enable_set(obj, EINA_TRUE);
+ evas_map_free(m);
+
+ return EINA_TRUE;
+}
+
+static void _btn_zoom_cb(void *data, Evas_Object *btn, void *ev)
+{
+ Evas_Object *target = data;
+ ecore_animator_timeline_add(1, _do_zoom, target);
+}
+
+static Eina_Bool
+_do_3d(void *data, double pos)
+{
+ Evas_Object *obj = data;
+ Evas_Map *m;
+ int x, y, w, h;
+
+ evas_object_geometry_get(obj, &x, &y, &w, &h);
+ m = evas_map_new(4);
+ evas_map_util_points_populate_from_object(m, obj);
+ evas_map_util_3d_rotate(m, pos * 360, pos * 360, pos * 360, x + (w / 3), y
+ 60, 0);
+ evas_object_map_set(obj, m);
+ evas_object_map_enable_set(obj, EINA_TRUE);
+ evas_map_free(m);
+
+ return EINA_TRUE;
+}
+
+static void
+_btn_3d_cb(void *data, Evas_Object *btn, void *ev)
+{
+ Evas_Object *target = data;
+ ecore_animator_timeline_add(1, _do_3d, target);
+}
+
+static Eina_Bool
+_do_drop(void *data, double pos)
+{
+ Evas_Object *obj = data;
+ int x, y, w, h;
+ double frame = pos;
+ frame = ecore_animator_pos_map(pos, ECORE_POS_MAP_BOUNCE, 2, 4);
+
+ evas_object_geometry_get(obj, &x, &y, &w, &h);
+ evas_object_move(obj, x, 600 * frame);
+
+ return EINA_TRUE;
+}
+
+EAPI_MAIN int
+elm_main(int argc, char **argv)
+{
+ Evas_Object *win, *label, *bt1, *bt2, *bt3, *target;
+ win = elm_win_util_standard_add("Ecore Animator", "Ecore Animator
Tutorial");
+ elm_policy_set(ELM_POLICY_QUIT, ELM_POLICY_QUIT_LAST_WINDOW_CLOSED);
+ elm_win_autodel_set(win, EINA_TRUE);
+
+ if (elm_win_wm_rotation_supported_get(win))
+ {
+ int rots[4] = { 0, 90, 180, 270 };
+ elm_win_wm_rotation_available_rotations_set(win, (const int *)(&rots),
4);
+ }
+
+ // Application title
+ label = elm_label_add(win);
+ elm_object_text_set(label, "Ecore Animator Tutorial");
+ evas_object_size_hint_weight_set(label, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+ elm_win_resize_object_add(win, label);
+ evas_object_show(label);
+
+ // Animation target
+ // Setting the image path
+ char buf[PATH_MAX];
+ snprintf(buf, sizeof(buf), "icon.png");
+ // Adding the image
+ target = elm_image_add(win);
+ // Setting the image path
+ if (!elm_image_file_set(target, buf, NULL))
+ printf("error: could not load image \"%s\"\n", buf);
+ evas_object_size_hint_weight_set(target, EVAS_HINT_FILL, EVAS_HINT_FILL);
+ //Moving the image
+ evas_object_move(target, 130, 100);
+ //Resizing the image
+ evas_object_resize(target, 200, 100);
+ //Showing the image
+ evas_object_show(target);
+
+ // Button 1 : Rotation effect
+ bt1 = elm_button_add(win);
+ elm_object_text_set(bt1, "Rotate");
+ evas_object_size_hint_weight_set(bt1, EVAS_HINT_FILL, EVAS_HINT_FILL);
+ evas_object_move(bt1, 25, 0);
+ evas_object_resize(bt1, 90, 70);
+ evas_object_smart_callback_add(bt1, "clicked", _btn_rotate_cb, target);
+ evas_object_show(bt1);
+
+ // Button 2 : Zoom Effect
+ bt2 = elm_button_add(win);
+ elm_object_text_set(bt2, "Zoom");
+ evas_object_size_hint_weight_set(bt2, EVAS_HINT_FILL, EVAS_HINT_FILL);
+ evas_object_move(bt2, 315, 0);
+ evas_object_resize(bt2, 90, 70);
+ evas_object_smart_callback_add(bt2, "clicked", _btn_zoom_cb, target);
+ evas_object_show(bt2);
+
+ // Button 3 : 3D Rotation Effect
+ bt3 = elm_button_add(win);
+ elm_object_text_set(bt3, "3D");
+ evas_object_size_hint_weight_set(bt3, EVAS_HINT_FILL, EVAS_HINT_FILL);
+ evas_object_move(bt3, 170, 0);
+ evas_object_resize(bt3, 90, 70);
+ evas_object_smart_callback_add(bt3, "clicked", _btn_3d_cb, target);
+ evas_object_show(bt3);
+
+ //drop and bounce effects
+ ecore_animator_timeline_add(2, _do_drop, bt1);
+ ecore_animator_timeline_add(2.3, _do_drop, bt2);
+ ecore_animator_timeline_add(2.5, _do_drop, bt3);
+
+ evas_object_resize(win, 480, 800);
+ evas_object_show(win);
+ elm_run();
+ elm_shutdown();
+ return EXIT_SUCCESS;
+}
+ELM_MAIN()
diff --git a/media/code_c/tutorial/effects/edje_animation.c
b/media/code_c/tutorial/effects/edje_animation.c
new file mode 100644
index 0000000..5a3101e
--- /dev/null
+++ b/media/code_c/tutorial/effects/edje_animation.c
@@ -0,0 +1,37 @@
+#include <Elementary.h>
+
+EAPI_MAIN int
+elm_main(int argc, char **argv)
+{
+ Evas_Object *win, *layout, *button, *btn_up;
+ win = elm_win_util_standard_add("Edje Animation", "Edje Animation
Tutorial");
+ elm_policy_set(ELM_POLICY_QUIT, ELM_POLICY_QUIT_LAST_WINDOW_CLOSED);
+ elm_win_autodel_set(win, EINA_TRUE);
+
+ layout = elm_layout_add(win);
+
+ elm_layout_file_set(layout, "edje_animation.edj", "my_layout");
+
+ // Creation button in the app window
+ button = elm_button_add(win);
+ elm_object_text_set(button, "Rotate");
+ // Add the button to the edje layout container called "btn/rotate"
+ elm_object_part_content_set(layout, "btn/rotate", button);
+ evas_object_show(button);
+
+ // Creation a up button in the app window
+ btn_up = elm_button_add(win);
+ // Add the button to the edje layout container called "btn/grow"
+ elm_object_text_set(btn_up, "Grow");
+ elm_object_part_content_set(layout, "btn/grow", btn_up);
+ evas_object_show(btn_up);
+
+ evas_object_resize(layout, 400, 400);
+ evas_object_show(layout);
+ evas_object_resize(win, 400, 400);
+ evas_object_show(win);
+ elm_run();
+ elm_shutdown();
+ return 0;
+}
+ELM_MAIN()
diff --git a/media/code_c/tutorial/effects/edje_animation.edc
b/media/code_c/tutorial/effects/edje_animation.edc
new file mode 100644
index 0000000..8d10674
--- /dev/null
+++ b/media/code_c/tutorial/effects/edje_animation.edc
@@ -0,0 +1,238 @@
+collections {
+ images
+ {
+ image: "image1.png" COMP;
+ image: "image2.png" COMP;
+ }
+ group {
+ name: "my_layout";
+ parts {
+ // An image using image1
+ part
+ {
+ name: "image";
+ type: IMAGE;
+ description
+ {
+ state: "default" 0.0;
+ max: 63 63;
+ min: 63 63;
+ image { normal: "icon.png"; }
+ rel1.relative: 0.2 0.0;
+ rel2.relative: 0.0 0.0;
+ }
+
+ description
+ {
+ state: "down-state" 1.0;
+ inherit: "default" 0.0;
+ rel1.relative: 0.2 0.92;
+ rel2.relative: 0.05 0.9;
+ }
+ }
+ part
+ {
+ name: "txt_title";
+ type: TEXT;
+ mouse_events: 0;
+
+ // The default State
+ description
+ {
+ state: "default" 0.0;
+ align: 0.0 0.0;
+ rel1 { relative: 0.5 0.0; }
+ rel2 { relative: 1.0 0.5; }
+ text
+ {
+ font: "Sans";
+ size: 22;
+ text: "edje animation";
+ }
+ color: 0 0 0 255;
+ }
+
+ // The "Bigger" state
+ description
+ {
+ state: "Bigger" 0.0;
+ align: 0.0 0.0;
+ rel1 { relative: 0.0 0.0; }
+ rel2 { relative: 1.0 0.2; }
+ text
+ {
+ size: 26;
+ text: "animation terminated";
+ }
+ color: 0 0 0 255;
+ }
+ }
+ // Container for the rotate button
+ part
+ {
+ type: SWALLOW;
+ name: "btn/rotate";
+ description
+ {
+ state: "default" 0.0;
+ rel1.relative: 0.30 0.9;
+ rel2.relative: 0.50 0.99;
+ }
+ }
+ // Container for the grow button
+ part
+ {
+ type: SWALLOW;
+ name: "btn/grow";
+ description
+ {
+ state: "default" 0.0;
+ rel1.relative: 1.02 0;
+ rel1.to: "btn/rotate";
+ rel2.relative: 2.02 1;
+ rel2.to: "btn/rotate";
+ }
+ }
+ // The animation target
+ part
+ {
+ name: "atarget";
+ type: IMAGE;
+
+ // Default state
+ description
+ {
+ state: "default" 0.0;
+ image { normal: "c1.svg"; }
+ color: 255 0 0 255; /* red */
+ rel1 { relative: 0.3 0.3; }
+ rel2 { relative: 0.7 0.7; }
+ }
+ // The rotate state
+ description
+ {
+ state: "rotate" 0.0;
+ inherit: "default" 0.0;
+
+ map
+ {
+ //Enable Map on the part
+ on: 1;
+ //Enable smooth rendering
+ smooth: 1;
+ //Enable perspective
+ perspective_on: 1;
+
+ //Apply rotations on the part
+ rotation.x: 0;
+ rotation.y: 0;
+ rotation.z: 0;
+ }
+ color: 0 255 0 255; /* green */
+ }
+ description
+ {
+ state: "rotate" 1.0;
+ inherit: "rotate" 0.0;
+ map.rotation.z: 360;
+ }
+ // The grow state
+ description {
+ state: "grow" 0.0;
+ inherit: "default" 0.0;
+ color: 0 0 255 255; /* blue */
+ rel1
+ {
+ relative: 0.2 0.2;
+ offset: 0.3 0.3;
+ }
+ rel2
+ {
+ relative: 0.7 0.4;
+ offset: 0.3 0.3;
+ }
+ }
+ }
+ }
+ programs {
+ // Icon drop animation
+ program
+ {
+ name: "animation,state1";
+ source: "";
+ signal: "load";
+ action: STATE_SET "down-state" 1.0;
+ target: "image";
+ transition: BOUNCE 2.5 0.0 5.0;
+ }
+ // Make the title bigger
+ program
+ {
+ name: "animation,bigtitle";
+ source: "";
+ signal: "load";
+ action: STATE_SET "Bigger" 1.0;
+ target: "txt_title";
+ transition: LINEAR 5.0;
+ }
+ // Make the title go back to normal
+ program
+ {
+ name: "animation,normaltitle";
+ source: "image";
+ signal: "mouse,clicked,*";
+ action: STATE_SET "default" 1.0;
+ target: "txt_title";
+ transition: LINEAR 0.5;
+ }
+ // Change the color of target to green
+ program
+ {
+ name: "rotate,target";
+ source: "btn/rotate";
+ signal: "mouse,clicked,*";
+ action: STATE_SET "rotate" 0.0;
+ target: "atarget";
+ transition: SIN 0.2;
+ after: "rotate,target,2";
+ }
+ // Rotate 360°
+ program
+ {
+ name: "rotate,target,2";
+ action: STATE_SET "rotate" 1.0;
+ target: "atarget";
+ transition: SIN 0.7;
+ after: "rotate,end";
+ }
+ // Go back to the normal.
+ program
+ {
+ name: "rotate,end";
+ action: STATE_SET "rotate" 0.0;
+ target: "atarget";
+ transition: LINEAR 0.2;
+ }
+ // Grow the target and go back to normal state
+ program
+ {
+ name: "grow,target";
+ source: "btn/grow";
+ signal: "mouse,clicked,*";
+ action: STATE_SET "grow" 1.0;
+ after: "go,default";
+ target: "atarget";
+ transition: SINUSOIDAL 1.0;
+ }
+ // Go back to normal (default) state
+ program
+ {
+ name: "go,default";
+ action: STATE_SET "default" 1.0;
+ target: "atarget";
+ transition: SIN 1.0;
+ }
+ }
+ }
+}
+
diff --git a/media/code_c/tutorial/effects/elementary_animations.c
b/media/code_c/tutorial/effects/elementary_animations.c
new file mode 100644
index 0000000..e395757
--- /dev/null
+++ b/media/code_c/tutorial/effects/elementary_animations.c
@@ -0,0 +1,376 @@
+#include <Elementary.h>
+
+typedef struct _Animations
+{
+ Evas_Object *button;
+ Evas_Object *buttonbck;
+ float *rt_angle;
+ float *zto;
+ float *zfrom;
+} Animations;
+
+/**************
+ * Resize
+ *************/
+static void
+_resize_effect(Evas_Object *obj)
+{
+ // Elementary Transition declaration and creation
+ Elm_Transit *trans = elm_transit_add();
+
+ // Adding the transition target object
+ elm_transit_object_add(trans, obj);
+
+ // Setting the resize effect
+ elm_transit_effect_resizing_add(trans, 100, 50, 300, 150);
+
+ // Setting the transition duration
+ elm_transit_duration_set(trans, 3.0);
+
+ // Starting the transition
+ elm_transit_go(trans);
+}
+
+static void
+_btn_resize_cb(void *data, Evas_Object *btn, void *ev)
+{
+ Animations *anim = (Animations *)data;
+
+ // Starting the rotation effect 360 degrees
+ //evas_object_resize(button, 100, 50);
+ elm_object_text_set(anim->button, "Resize");
+ _resize_effect(anim->button);
+}
+
+/*************
+ * Rotation
+ *************/
+static void
+_rotation_effect(Evas_Object *obj, float angle)
+{
+ Elm_Transit *trans = elm_transit_add();
+ elm_transit_object_add(trans, obj);
+
+ // rotates the object from its original angle to given degrees to the right
+ elm_transit_effect_rotation_add(trans, 0.0, angle);
+ elm_transit_duration_set(trans, 2.0);
+ elm_transit_go(trans);
+}
+
+static void
+_btn_rotate_cb(void *data, Evas_Object *btn, void *ev)
+{
+ Animations *anim = (Animations *)data;
+
+ // Setting the button text
+ elm_object_text_set(anim->button, "Rotate");
+ _rotation_effect(anim->button, *(anim->rt_angle));
+}
+
+/**************
+ * Zoom
+ *************/
+static void
+_zoom_effect(Evas_Object *obj, float from, float to)
+{
+ Elm_Transit *trans = elm_transit_add();
+ elm_transit_object_add(trans, obj);
+
+ elm_transit_effect_zoom_add(trans, from, to);
+ elm_transit_duration_set(trans, 2.0);
+ elm_transit_go(trans);
+}
+
+static void
+_btn_zoom_cb(void *data, Evas_Object *btn, void *ev)
+{
+ Animations *anim = (Animations *)data;
+
+ // Starting the rotation effect 360 degrees
+ //evas_object_resize(anim->button, 100, 50);
+ elm_object_text_set(anim->button, "Zoom");
+ _zoom_effect(anim->button, *(anim->zfrom), *(anim->zto));
+}
+
+/**************
+ * Flip
+ *************/
+static void
+_flip_effect(Evas_Object *obj, Evas_Object *obj2)
+{
+ Elm_Transit *trans;
+
+ trans = elm_transit_add();
+ elm_transit_object_add(trans, obj);
+ elm_transit_object_add(trans, obj2);
+ elm_transit_effect_flip_add(trans, ELM_TRANSIT_EFFECT_FLIP_AXIS_X,
EINA_TRUE);
+
+ elm_transit_duration_set(trans, 3.0);
+ elm_transit_go(trans);
+}
+
+static void
+_btn_flip_cb(void *data, Evas_Object *btn, void *ev)
+{
+ Animations *anim = (Animations *)data;
+
+ // Setting the button text
+ elm_object_text_set(anim->button, "Flip");
+ _flip_effect(anim->button, anim->buttonbck);
+}
+
+/**************
+ * Blend
+ *************/
+static void
+_blend_effect(Evas_Object *obj, Evas_Object *obj2)
+{
+ Elm_Transit *trans;
+
+ trans = elm_transit_add();
+ elm_transit_object_add(trans, obj);
+ elm_transit_object_add(trans, obj2);
+ elm_transit_effect_blend_add(trans);
+ elm_transit_duration_set(trans, 3.0);
+ elm_transit_go(trans);
+}
+
+static void
+_btn_blend_cb(void *data, Evas_Object *btn, void *ev)
+{
+ Animations *anim = (Animations *)data;
+
+ // Setting the button text
+ elm_object_text_set(anim->button, "Blend");
+ _blend_effect(anim->button, anim->buttonbck);
+}
+
+/**************
+ * Fade
+ *************/
+static void
+_fade_effect(Evas_Object *obj, Evas_Object *obj2)
+{
+ Elm_Transit *trans;
+
+ trans = elm_transit_add();
+ elm_transit_object_add(trans, obj);
+ elm_transit_object_add(trans, obj2);
+ elm_transit_effect_fade_add(trans);
+ elm_transit_duration_set(trans, 3.0);
+ elm_transit_go(trans);
+}
+
+static void
+_btn_fade_cb(void *data, Evas_Object *btn, void *ev)
+{
+ Animations *anim = (Animations *)data;
+
+
+ // Setting the button text
+ elm_object_text_set(anim->button, "Fade");
+ _fade_effect(anim->button, anim->buttonbck);
+}
+
+/**************
+ * FlipY
+ *************/
+static void
+_flip_y_effect(Evas_Object *obj, Evas_Object *obj2)
+{
+ Elm_Transit *trans;
+
+ trans = elm_transit_add();
+ elm_transit_object_add(trans, obj);
+ elm_transit_object_add(trans, obj2);
+ elm_transit_effect_flip_add(trans, ELM_TRANSIT_EFFECT_FLIP_AXIS_Y,
EINA_TRUE);
+ elm_transit_duration_set(trans, 3.0);
+ elm_transit_go(trans);
+}
+
+static void
+_btn_flip_y_cb(void *data, Evas_Object *btn, void *ev)
+{
+ Animations *anim = (Animations *)data;
+
+
+ // Setting the button text
+ elm_object_text_set(anim->button, "Flip 2");
+ _flip_y_effect(anim->button, anim->buttonbck);
+}
+
+/**************
+ * Wipe
+ *************/
+static void
+_wipe_effect(Evas_Object *obj)
+{
+ Elm_Transit *trans;
+
+ trans = elm_transit_add();
+ elm_transit_object_add(trans, obj);
+ elm_transit_effect_wipe_add(trans, ELM_TRANSIT_EFFECT_WIPE_TYPE_HIDE,
ELM_TRANSIT_EFFECT_WIPE_DIR_RIGHT);
+ elm_transit_duration_set(trans, 3.0);
+ elm_transit_go(trans);
+}
+
+static void
+_btn_wipe_cb(void *data, Evas_Object *btn, void *ev)
+{
+ Animations *anim = (Animations *)data;
+
+ // Starting the rotation effect 360 degrees
+ //evas_object_resize(anim->button, 100, 50);
+ // Setting the button text
+ elm_object_text_set(anim->button, "Wipe");
+ _wipe_effect(anim->button);
+}
+
+EAPI_MAIN int
+elm_main(int argc, char **argv)
+{
+ Evas_Object *win, *label, *hbox, *left_vbox, *center_vbox, *right_vbox;
+ Evas_Object *button, *buttonbck;
+ float rt_angle, zto, zfrom;
+
+ win = elm_win_util_standard_add("Elementary Animations", "Elementary
Animations Tutorial");
+ elm_policy_set(ELM_POLICY_QUIT, ELM_POLICY_QUIT_LAST_WINDOW_CLOSED);
+ elm_win_autodel_set(win, EINA_TRUE);
+ if (elm_win_wm_rotation_supported_get(win))
+ {
+ int rots[4] = { 0, 90, 180, 270 };
+ elm_win_wm_rotation_available_rotations_set(win, (const int *)(&rots),
4);
+ }
+
+ //set the values for animations
+ rt_angle = 360.0;
+ zfrom = 1.0;
+ zto = 2.0;
+
+ /* Label*/
+ label = elm_label_add(win);
+ elm_object_text_set(label, "Effects Tutorial");
+ evas_object_size_hint_weight_set(label, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+ evas_object_move(label, 100, 0);
+ evas_object_resize(label, 200, 50);
+ evas_object_show(label);
+
+ /* Creation a button in the app window*/
+ button = elm_button_add(win);
+ evas_object_move(button, 100, 100); // Moving the button to x=50 y=100
+ evas_object_resize(button, 200, 50); // Resizing the button 100x50
+ evas_object_show(button); // Showing the button
+ /* Creation a back button in the app window*/
+ buttonbck = elm_button_add(win);
+ elm_object_text_set(buttonbck, "Button back");
+ evas_object_move(buttonbck, 100, 100);
+ evas_object_resize(buttonbck, 200, 50);
+
+ /*set the structure of pointeurs*/
+ Animations anim = { button, buttonbck, &rt_angle, &zto, &zfrom };
+
+
/***********************************************************************************************************************
+ *Boxes*
+
***********************************************************************************************************************/
+ // Creation of the main container box
+ hbox = elm_box_add(win);
+ elm_box_horizontal_set(hbox, EINA_TRUE);
+ elm_box_homogeneous_set(hbox, EINA_TRUE);
+ evas_object_move(hbox, 130, 200);
+ evas_object_show(hbox);
+
+ // Creation of the first column
+ left_vbox = elm_box_add(hbox);
+ elm_box_horizontal_set(left_vbox, EINA_FALSE);
+ elm_box_homogeneous_set(left_vbox, EINA_TRUE);
+ evas_object_show(left_vbox);
+ elm_box_pack_start(hbox, left_vbox);
+
+ // Creation of the second column
+ center_vbox = elm_box_add(hbox);
+ elm_box_horizontal_set(center_vbox, EINA_FALSE);
+ elm_box_homogeneous_set(center_vbox, EINA_TRUE);
+ evas_object_show(center_vbox);
+ elm_box_pack_end(hbox, center_vbox);
+
+ // Creation of the last column
+ right_vbox = elm_box_add(hbox);
+ elm_box_horizontal_set(right_vbox, EINA_FALSE);
+ elm_box_homogeneous_set(right_vbox, EINA_TRUE);
+ evas_object_show(right_vbox);
+ elm_box_pack_end(hbox, right_vbox);
+
+
/***********************************************************************************************************************
+ *Buttons*
+
***********************************************************************************************************************/
+ // The resize button
+ Evas_Object *btn_resize = elm_button_add(win);
+ elm_object_text_set(btn_resize, "Resize");
// Setting the button text
+ evas_object_size_hint_weight_set(btn_resize, EVAS_HINT_FILL,
EVAS_HINT_FILL); // Setting the hint weight policy
+ evas_object_show(btn_resize);
// Showing the button
+ evas_object_smart_callback_add(btn_resize, "clicked", _btn_resize_cb,
&anim); // Setting the "clicked" callback
+ elm_box_pack_end(left_vbox, btn_resize);
// Adding the button to the first column
+
+ // The rotation button
+ Evas_Object *btn_rotate = elm_button_add(win);
+ elm_object_text_set(btn_rotate, "Rotate");
+ evas_object_size_hint_weight_set(btn_rotate, EVAS_HINT_FILL,
EVAS_HINT_FILL);
+ evas_object_show(btn_rotate);
+ evas_object_smart_callback_add(btn_rotate, "clicked", _btn_rotate_cb,
&anim);
+ elm_box_pack_end(center_vbox, btn_rotate);
+
+ // The zoom button
+ Evas_Object *btn_zoom = elm_button_add(win);
+ elm_object_text_set(btn_zoom, "Zoom");
+ evas_object_size_hint_weight_set(btn_zoom, EVAS_HINT_FILL, EVAS_HINT_FILL);
+ evas_object_show(btn_zoom);
+ evas_object_smart_callback_add(btn_zoom, "clicked", _btn_zoom_cb, &anim);
+ elm_box_pack_end(right_vbox, btn_zoom);
+
+ // The flip button
+ Evas_Object *btn_flip = elm_button_add(win);
+ elm_object_text_set(btn_flip, "Flip x");
+ evas_object_size_hint_weight_set(btn_flip, EVAS_HINT_FILL, EVAS_HINT_FILL);
+ evas_object_show(btn_flip);
+ evas_object_smart_callback_add(btn_flip, "clicked", _btn_flip_cb, &anim);
+ elm_box_pack_end(left_vbox, btn_flip);
+
+ // The blend button
+ Evas_Object *btn_blend = elm_button_add(win);
+ elm_object_text_set(btn_blend, "Blend");
+ evas_object_size_hint_weight_set(btn_blend, EVAS_HINT_FILL, EVAS_HINT_FILL);
+ evas_object_show(btn_blend);
+ evas_object_smart_callback_add(btn_blend, "clicked", _btn_blend_cb, &anim);
+ elm_box_pack_end(center_vbox, btn_blend);
+
+ // The fade button
+ Evas_Object *btn_fade = elm_button_add(win);
+ elm_object_text_set(btn_fade, "Fade");
+ evas_object_size_hint_weight_set(btn_fade, EVAS_HINT_FILL, EVAS_HINT_FILL);
+ evas_object_show(btn_fade);
+ evas_object_smart_callback_add(btn_fade, "clicked", _btn_fade_cb, &anim);
+ elm_box_pack_end(right_vbox, btn_fade);
+
+ // The flip y button
+ Evas_Object *btn_flip_y = elm_button_add(win);
+ elm_object_text_set(btn_flip_y, "Flip y");
+ evas_object_size_hint_weight_set(btn_flip_y, EVAS_HINT_FILL,
EVAS_HINT_FILL);
+ evas_object_show(btn_flip_y);
+ evas_object_smart_callback_add(btn_flip_y, "clicked", _btn_flip_y_cb,
&anim);
+ elm_box_pack_end(left_vbox, btn_flip_y);
+
+ // The wipe button
+ Evas_Object *btn_wipe = elm_button_add(win);
+ elm_object_text_set(btn_wipe, "Wipe");
+ evas_object_size_hint_weight_set(btn_wipe, EVAS_HINT_FILL, EVAS_HINT_FILL);
+ evas_object_show(btn_wipe);
+ evas_object_smart_callback_add(btn_wipe, "clicked", _btn_wipe_cb, &anim);
+ elm_box_pack_end(right_vbox, btn_wipe);
+
+ evas_object_resize(win, 400, 400);
+ evas_object_show(win);
+ elm_run();
+ elm_shutdown();
+ return 0;
+}
+ELM_MAIN()
diff --git a/media/code_c/tutorial/effects/transit.c
b/media/code_c/tutorial/effects/transit.c
new file mode 100644
index 0000000..6cc74c9
--- /dev/null
+++ b/media/code_c/tutorial/effects/transit.c
@@ -0,0 +1,248 @@
+#include <Elementary.h>
+
+/* store naviframe pointeurs */
+typedef struct _Navi
+{
+ Evas_Object *navi;
+ Evas_Object *navi2;
+} Navi;
+
+static void
+rotation_cb(void *data, Evas_Object *obj, void *event_info)
+{
+ Navi *navis = data;
+ Evas_Object *navi=navis->navi;
+ Elm_Transit *transit = elm_transit_add();
+
+ // 360 degree rotation effect in the clock-wise direction
+ elm_transit_object_add(transit, navi);
+ elm_transit_effect_rotation_add(transit, 0, 360);
+ elm_transit_duration_set(transit, 1);
+ elm_transit_go(transit);
+}
+
+static void
+zoom_cb(void *data, Evas_Object *obj, void *event_info)
+{
+ Navi *navis = data;
+ Evas_Object *navi=navis->navi;
+ // Zoom out to scale 0.6
+ Elm_Transit *transit = elm_transit_add();
+ elm_transit_smooth_set(transit, EINA_FALSE);
+ elm_transit_object_add(transit, navi);
+ elm_transit_effect_zoom_add(transit, 1.0, 0.4);
+ elm_transit_duration_set(transit, 0.5);
+
+ // Zoom in to the original size
+ Elm_Transit *transit2 = elm_transit_add();
+ elm_transit_smooth_set(transit2, EINA_FALSE);
+ elm_transit_object_add(transit2, navi);
+ elm_transit_effect_zoom_add(transit2, 0.4, 1.0);
+ elm_transit_duration_set(transit2, 0.5);
+
+ elm_transit_chain_transit_add(transit, transit2);
+ elm_transit_go(transit);
+}
+
+static void
+blend_cb(void *data, Evas_Object *obj, void *event_info)
+{
+ Navi *navis = data;
+ Evas_Object *navi=navis->navi;
+ Evas_Object *navi2=navis->navi2;
+ Elm_Transit *transit = elm_transit_add();
+
+ elm_transit_object_add(transit, navi);
+ elm_transit_object_add(transit, navi2);
+ elm_transit_effect_blend_add(transit);
+ elm_transit_duration_set(transit, 3.0);
+ elm_transit_objects_final_state_keep_set(transit, EINA_TRUE);
+ elm_transit_go(transit);
+
+}
+
+static void
+fade_cb(void *data, Evas_Object *obj, void *event_info)
+{
+ Navi *navis = data;
+ Evas_Object *navi=navis->navi;
+ Evas_Object *navi2=navis->navi2;
+ Elm_Transit *transit = elm_transit_add();
+
+ elm_transit_object_add(transit, navi);
+ elm_transit_object_add(transit, navi2);
+ elm_transit_effect_fade_add(transit);
+ elm_transit_duration_set(transit, 3.0);
+ elm_transit_objects_final_state_keep_set(transit, EINA_TRUE);
+ elm_transit_go(transit);
+
+}
+
+static void
+flip_cb(void *data, Evas_Object *obj, void *event_info)
+{
+ Navi *navis = data;
+ Evas_Object *navi=navis->navi;
+ Evas_Object *navi2=navis->navi2;
+ Elm_Transit *transit = elm_transit_add();
+
+ elm_transit_object_add(transit, navi);
+ elm_transit_object_add(transit, navi2);
+ elm_transit_effect_flip_add(transit, ELM_TRANSIT_EFFECT_FLIP_AXIS_X,
EINA_TRUE);
+ elm_transit_duration_set(transit, 3.0);
+ elm_transit_objects_final_state_keep_set(transit, EINA_TRUE);
+ elm_transit_go(transit);
+}
+
+static void
+resizable_flip_cb(void *data, Evas_Object *obj, void *event_info)
+{
+ Navi *navis = data;
+ Evas_Object *navi=navis->navi;
+ Evas_Object *navi2=navis->navi2;
+ Elm_Transit *transit = elm_transit_add();
+
+ elm_transit_object_add(transit, navi);
+ elm_transit_object_add(transit, navi2);
+ elm_transit_effect_resizable_flip_add(transit,
ELM_TRANSIT_EFFECT_FLIP_AXIS_Y, EINA_TRUE);
+ elm_transit_duration_set(transit, 3.0);
+ elm_transit_objects_final_state_keep_set(transit, EINA_TRUE);
+ elm_transit_go(transit);
+}
+
+static void
+wipe_cb(void *data, Evas_Object *obj, void *event_info)
+{
+ Navi *navis = data;
+ Evas_Object *navi=navis->navi;
+ Elm_Transit *transit = elm_transit_add();
+
+ elm_transit_object_add(transit, navi);
+ elm_transit_effect_wipe_add(transit, ELM_TRANSIT_EFFECT_WIPE_TYPE_HIDE,
ELM_TRANSIT_EFFECT_WIPE_DIR_RIGHT);
+ elm_transit_duration_set(transit, 3.0);
+ elm_transit_go(transit);
+}
+
+static void
+translation_cb(void *data, Evas_Object *obj, void *event_info)
+{
+ Navi *navis = data;
+ Evas_Object *navi=navis->navi;
+ Elm_Transit *transit = elm_transit_add();
+
+ elm_transit_object_add(transit, navi);
+ elm_transit_effect_translation_add(transit, 0, 0, 50, 100);
+ elm_transit_duration_set(transit, 3.0);
+ elm_transit_go(transit);
+}
+
+static void
+color_cb(void *data, Evas_Object *obj, void *event_info)
+{
+ Navi *navis = data;
+ Evas_Object *navi=navis->navi;
+ Elm_Transit *transit = elm_transit_add();
+
+ elm_transit_object_add(transit, navi);
+ elm_transit_effect_color_add(transit,0,0,0,0,255,255,0,255);
+ elm_transit_duration_set(transit, 3.0);
+ elm_transit_go(transit);
+}
+
+static void
+custom_cb(void *data, Evas_Object *obj, void *event_info)
+{
+ Navi *navis = data;
+ Evas_Object *navi=navis->navi;
+ Evas_Object *navi2=navis->navi2;
+ Elm_Transit *transit = elm_transit_add();
+
+ elm_transit_object_add(transit, navi);
+ elm_transit_object_add(transit, navi2);
+ elm_transit_effect_color_add(transit,0,0,0,0,255,255,0,255);
+ elm_transit_effect_flip_add(transit, ELM_TRANSIT_EFFECT_FLIP_AXIS_Y,
EINA_TRUE);
+ elm_transit_duration_set(transit, 3.0);
+
+ Elm_Transit *transit2 = elm_transit_add();
+ elm_transit_object_add(transit2, navi2);
+ elm_transit_object_add(transit2, navi);
+ elm_transit_effect_color_add(transit2,0,0,0,0,180,255,0,255);
+ elm_transit_effect_zoom_add(transit2, 1.0, 0.1);
+ elm_transit_duration_set(transit2, 3.0);
+
+ elm_transit_chain_transit_add(transit, transit2);
+ elm_transit_go(transit);
+}
+
+EAPI_MAIN int
+elm_main(int argc, char **argv)
+{
+ Evas_Object *win, *navi, *navi2, *list, *list2;
+
+ win = elm_win_util_standard_add("Transition", "Transition Tutorial");
+ elm_policy_set(ELM_POLICY_QUIT, ELM_POLICY_QUIT_LAST_WINDOW_CLOSED);
+ elm_win_autodel_set(win, EINA_TRUE);
+ if (elm_win_wm_rotation_supported_get(win))
+ {
+ int rots[4] = { 0, 90, 180, 270 };
+ elm_win_wm_rotation_available_rotations_set(win, (const int *)(&rots),
4);
+ }
+
+ Elm_Object_Item *nf_it, *nf_it2;
+
+ /* add two naviframes and two lists to switch
+ * from one to another in some transitions */
+ navi2 = elm_naviframe_add(win);
+ navi = elm_naviframe_add(win);
+ list = elm_list_add(navi);
+ list2 = elm_list_add(navi2);
+ elm_list_mode_set(list, ELM_LIST_COMPRESS);
+ elm_list_mode_set(list2, ELM_LIST_COMPRESS);
+
+ /* store naviframe pointeurs to pass them
+ * in data pointeur parameter */
+ Navi navis = {navi, navi2};
+ Navi navis2 = {navi2, navi};
+
+ /* first list items */
+ elm_list_item_append(list, "Blend", NULL, NULL, blend_cb, &navis);
+ elm_list_item_append(list, "Color", NULL, NULL, color_cb, &navis);
+ elm_list_item_append(list, "Fade", NULL, NULL, fade_cb, &navis);
+ elm_list_item_append(list, "Flip", NULL, NULL, flip_cb, &navis);
+ elm_list_item_append(list, "Rotation", NULL, NULL, rotation_cb, &navis);
+ elm_list_item_append(list, "ResizableFlip", NULL, NULL, resizable_flip_cb,
&navis);
+ elm_list_item_append(list, "Translation", NULL, NULL, translation_cb,
&navis);
+ elm_list_item_append(list, "Wipe", NULL, NULL, wipe_cb, &navis);
+ elm_list_item_append(list, "Zoom", NULL, NULL, zoom_cb, &navis);
+ elm_list_item_append(list, "Custom", NULL, NULL, custom_cb, &navis);
+ elm_list_go(list);
+
+ /* second list items*/
+ elm_list_item_append(list2, "Blend2", NULL, NULL, blend_cb, &navis2);
+ elm_list_item_append(list2, "Color2", NULL, NULL, color_cb, &navis2);
+ elm_list_item_append(list2, "Fade2", NULL, NULL, fade_cb, &navis2);
+ elm_list_item_append(list2, "Flip2", NULL, NULL, flip_cb, &navis2);
+ elm_list_item_append(list2, "Rotation2", NULL, NULL, rotation_cb, &navis2);
+ elm_list_item_append(list2, "ResizableFlip2", NULL, NULL,
resizable_flip_cb, &navis2);
+ elm_list_item_append(list2, "Translation2", NULL, NULL, translation_cb,
&navis2);
+ elm_list_item_append(list2, "Wipe2", NULL, NULL, wipe_cb, &navis2);
+ elm_list_item_append(list2, "Zoom2", NULL, NULL, zoom_cb, &navis2);
+ elm_list_item_append(list2, "Custom2", NULL, NULL, custom_cb, &navis2);
+ elm_list_go(list2);
+
+ nf_it = elm_naviframe_item_push(navi, "Transit", NULL, NULL, list, NULL);
+ nf_it2 = elm_naviframe_item_push(navi2, "Transit2", NULL, NULL, list2,
NULL);
+
+ evas_object_show(navi);
+ evas_object_show(navi2);
+ evas_object_show(list);
+ evas_object_show(list2);
+ evas_object_resize(navi2, 400, 400);
+ evas_object_resize(navi, 400, 400);
+ evas_object_resize(win, 400, 400);
+ evas_object_show(win);
+ elm_run();
+ elm_shutdown();
+ return 0;
+}
+ELM_MAIN()
diff --git a/media/ecore_animator.gif b/media/ecore_animator.gif
new file mode 100644
index 0000000..a937776
Binary files /dev/null and b/media/ecore_animator.gif differ
diff --git a/media/ecore_animator_3D.gif b/media/ecore_animator_3D.gif
new file mode 100644
index 0000000..df3b734
Binary files /dev/null and b/media/ecore_animator_3D.gif differ
diff --git a/media/ecore_animator_rotate.gif b/media/ecore_animator_rotate.gif
new file mode 100644
index 0000000..8b6c9af
Binary files /dev/null and b/media/ecore_animator_rotate.gif differ
diff --git a/media/ecore_animator_start.gif b/media/ecore_animator_start.gif
new file mode 100644
index 0000000..085e586
Binary files /dev/null and b/media/ecore_animator_start.gif differ
diff --git a/media/ecore_animator_zoom.gif b/media/ecore_animator_zoom.gif
new file mode 100644
index 0000000..be495ed
Binary files /dev/null and b/media/ecore_animator_zoom.gif differ
diff --git a/media/edje_animation_grow.gif b/media/edje_animation_grow.gif
new file mode 100644
index 0000000..f86711e
Binary files /dev/null and b/media/edje_animation_grow.gif differ
diff --git a/media/edje_animation_reset.gif b/media/edje_animation_reset.gif
new file mode 100644
index 0000000..8b55cfb
Binary files /dev/null and b/media/edje_animation_reset.gif differ
diff --git a/media/edje_animation_rotate.gif b/media/edje_animation_rotate.gif
new file mode 100644
index 0000000..579e510
Binary files /dev/null and b/media/edje_animation_rotate.gif differ
diff --git a/media/edje_animation_start.gif b/media/edje_animation_start.gif
new file mode 100644
index 0000000..a9330b7
Binary files /dev/null and b/media/edje_animation_start.gif differ
diff --git a/media/elementary_animations_blend.gif
b/media/elementary_animations_blend.gif
new file mode 100644
index 0000000..f67dafb
Binary files /dev/null and b/media/elementary_animations_blend.gif differ
diff --git a/media/elementary_animations_fade.gif
b/media/elementary_animations_fade.gif
new file mode 100644
index 0000000..22f94e1
Binary files /dev/null and b/media/elementary_animations_fade.gif differ
diff --git a/media/elementary_animations_flip.gif
b/media/elementary_animations_flip.gif
new file mode 100644
index 0000000..d3e82c9
Binary files /dev/null and b/media/elementary_animations_flip.gif differ
diff --git a/media/elementary_animations_flipy.gif
b/media/elementary_animations_flipy.gif
new file mode 100644
index 0000000..cbb3a5a
Binary files /dev/null and b/media/elementary_animations_flipy.gif differ
diff --git a/media/elementary_animations_resize.gif
b/media/elementary_animations_resize.gif
new file mode 100644
index 0000000..051e18a
Binary files /dev/null and b/media/elementary_animations_resize.gif differ
diff --git a/media/elementary_animations_rotate.gif
b/media/elementary_animations_rotate.gif
new file mode 100644
index 0000000..3f7a1fb
Binary files /dev/null and b/media/elementary_animations_rotate.gif differ
diff --git a/media/elementary_animations_wipe.gif
b/media/elementary_animations_wipe.gif
new file mode 100644
index 0000000..9c6b17b
Binary files /dev/null and b/media/elementary_animations_wipe.gif differ
diff --git a/media/elementary_animations_zoom.gif
b/media/elementary_animations_zoom.gif
new file mode 100644
index 0000000..d90147c
Binary files /dev/null and b/media/elementary_animations_zoom.gif differ
diff --git a/media/transit_color.gif b/media/transit_color.gif
new file mode 100644
index 0000000..ecb0e8c
Binary files /dev/null and b/media/transit_color.gif differ
diff --git a/media/transit_fade.gif b/media/transit_fade.gif
new file mode 100644
index 0000000..8fbb34a
Binary files /dev/null and b/media/transit_fade.gif differ
diff --git a/media/transit_flip.gif b/media/transit_flip.gif
new file mode 100644
index 0000000..04a9fe1
Binary files /dev/null and b/media/transit_flip.gif differ
diff --git a/media/transit_resizeflip.gif b/media/transit_resizeflip.gif
new file mode 100644
index 0000000..13db5a0
Binary files /dev/null and b/media/transit_resizeflip.gif differ
diff --git a/media/transit_rotate.gif b/media/transit_rotate.gif
new file mode 100644
index 0000000..d131a4e
Binary files /dev/null and b/media/transit_rotate.gif differ
diff --git a/media/transit_translation.gif b/media/transit_translation.gif
new file mode 100644
index 0000000..6cf84fd
Binary files /dev/null and b/media/transit_translation.gif differ
diff --git a/media/transit_wipe.gif b/media/transit_wipe.gif
new file mode 100644
index 0000000..22b68cd
Binary files /dev/null and b/media/transit_wipe.gif differ
diff --git a/media/transit_zoom.gif b/media/transit_zoom.gif
new file mode 100644
index 0000000..af49078
Binary files /dev/null and b/media/transit_zoom.gif differ
diff --git a/pages/docs.txt b/pages/docs.txt
index 133c781..9e89660 100644
--- a/pages/docs.txt
+++ b/pages/docs.txt
@@ -50,6 +50,7 @@ Go check the current available version of EFL on each
distro/platform:
* [[tutorial/popup_tutorial|Popup Tutorial]]
* [[tutorial/gl_2d_tutorial|GL 2D Tutorial]]
* [[tutorial/preference_tutorial|Preference Tutorial]]
+ * [[tutorial/effects_tutorial|Effects Tutorial]]
----
diff --git a/pages/tutorial/effects/ecore_animator/3d_rotation.txt
b/pages/tutorial/effects/ecore_animator/3d_rotation.txt
new file mode 100644
index 0000000..212b4c4
--- /dev/null
+++ b/pages/tutorial/effects/ecore_animator/3d_rotation.txt
@@ -0,0 +1,75 @@
+~~Title: 3D Rotation Effect - Ecore Animator~~
+//**__previous page__: **//[[/tutorial/effects/ecore_animator/zoom|Creating a
zoom effect]]
+==== Creating a 3D Rotation Effect ====
+
+The last animation is a 3D rotation. For this one, we are going to rotate the
+Evas object on all three axes (X, Y, Z).
+
+{{ :ecore_animator_3D.gif }}
+
+First, create the button and its callback function:
+
+<code c>
+// Button 3 : 3D Rotation Effect
+bt3 = elm_button_add(win);
+elm_object_text_set(bt3, "3D");
+evas_object_size_hint_weight_set(bt3, EVAS_HINT_FILL, EVAS_HINT_FILL);
+evas_object_move(bt3, 170, 0);
+evas_object_resize(bt3, 90, 70);
+evas_object_smart_callback_add(bt3, "clicked", _btn_3d_cb, target);
+evas_object_show(bt3);
+
+
+static void _btn_3d_cb(void *data, Evas_Object *btn, void *ev)
+{
+ Evas_Object *target = data;
+ ecore_animator_timeline_add(1, _do_3d, target);
+}
+</code>
+
+Next, we create the ''_do_3d()'' animation callback function, which is very
+similar to the rotate and zoom callback functions. To create the animation, we
+use the ''evas_map_util_3d_rotate()'' function, which allows you to rotate any
+Evas object on all three axes.
+
+<code c>
+static Eina_Bool
+_do_3d(void *data, double pos)
+{
+ Evas_Object *obj = data;
+ Evas_Map *m;
+ int x, y, w, h;
+
+ evas_object_geometry_get(obj, &x, &y, &w, &h);
+ m = evas_map_new(4);
+ evas_map_util_points_populate_from_object(m, obj);
+ evas_map_util_3d_rotate(m, pos * 360, pos * 360, pos * 360, x + (w / 3), y
+ 60, 0);
+ evas_object_map_set(obj, m);
+ evas_object_map_enable_set(obj, EINA_TRUE);
+ evas_map_free(m);
+
+ return EINA_TRUE;
+}
+</code>
+
+The ''evas_map_util_3d_rotate()'' function takes the following arguments:
+
+ * The map to change
+ * The angle (0-360°) to rotate around the X axis
+ * The angle (0-360°) to rotate around the Y axis
+ * The angle (0-360°) to rotate around the Z axis
+ * The X coordinate of the rotation center
+ * The Y coordinate of the rotation center
+ * The Z coordinate of the rotation center
+
+Here, we rotate 360 degrees around each axis. The horizontal (X) rotation
+center is the X position of the target plus its width divided by 2. The
+vertical (Y) rotation center is the Y position of the target plus 60. The Z
+rotation center is 0.
+
+As with the rotation and zoom animations, we multiply the angles by the
+timeline position to gently rotate the target on each call to the ''_do_3d()''
+callback function along the timeline.
+
+\\
+//**__next page__: **//[[/tutorial/effects/ecore_animator/drop_bounce|Creating
drop and bounce effects]]
diff --git a/pages/tutorial/effects/ecore_animator/drop_bounce.txt
b/pages/tutorial/effects/ecore_animator/drop_bounce.txt
new file mode 100644
index 0000000..fe0c33f
--- /dev/null
+++ b/pages/tutorial/effects/ecore_animator/drop_bounce.txt
@@ -0,0 +1,62 @@
+~~Title: Drop and Bounce Effects - Ecore Animator~~
+//**__previous page__: **//[[/tutorial/effects/ecore_animator/zoom|Creating a
zoom effect]]
+==== Creating Drop and Bounce Effects ====
+
+To finish, we add drop and bounce effects to our buttons at application start.
+
+{{ :ecore_animator_start.gif }}
+
+To do this, we create one timeline per button after creating the buttons in
+''elm_main()'':
+
+<code c>
+//drop and bounce effects
+ecore_animator_timeline_add(2, _do_drop, bt1);
+ecore_animator_timeline_add(2.3, _do_drop, bt2);
+ecore_animator_timeline_add(2.5, _do_drop, bt3);
+</code>
+
+We call the same ''_do_drop()'' animation callback function for each timeline.
+In this callback, instead of using an Evas Map, we simply change the position
+of the target using the ''evas_object_move()'' function:
+
+<code c>
+static Eina_Bool
+_do_drop(void *data, double pos)
+{
+ Evas_Object *obj = data;
+ int x, y, w, h;
+ double frame = pos;
+ frame = ecore_animator_pos_map(pos, ECORE_POS_MAP_BOUNCE, 2, 4);
+
+ evas_object_geometry_get(obj, &x, &y, &w, &h);
+ evas_object_move(obj, x, 600 * frame);
+
+ return EINA_TRUE;
+}
+</code>
+
+To get the bounce effect, we use the ''ecore_animator_pos_map()'' function,
+which maps an input position from 0.0 to 1.0 along the timeline to a position
+on a different curve. The curve can be of different types, such as ''LINEAR'',
+''SINUSOIDAL'', and ''BOUNCE''. This function takes the following arguments:
+
+ * The input position to map
+ * The mapping to use (''LINEAR'', ''SINUSOIDAL'', and so on)
+ * v1, which is the first parameter used by the mapping
+ * v2, which is the second parameter used by the mapping
+
+The ''ECORE_POS_MAP_BOUNCE'' map we use starts at 0.0, then drops like a ball
+bouncing to the ground at 1.0, bouncing v2 times with a decay factor of v1.
+Here, we bounce 4 times with a decay factor of 2:
+
+<code c>
+frame = ecore_animator_pos_map(pos, ECORE_POS_MAP_BOUNCE, 2, 4);
+</code>
+This frame is used in the move function to create the animation. The value
+increases on each ''_do_drop()'' call along the timeline, which produces a
+nice drop of the buttons from their initial position to 600 pixels on the
+vertical axis.
+
+\\
+//**__The whole code__: **//{{code_c/tutorial/effects/ecore_animator.c}}
diff --git a/pages/tutorial/effects/ecore_animator/rotation.txt
b/pages/tutorial/effects/ecore_animator/rotation.txt
new file mode 100644
index 0000000..8fdbf33
--- /dev/null
+++ b/pages/tutorial/effects/ecore_animator/rotation.txt
@@ -0,0 +1,125 @@
+~~Title: Rotation Effect - Ecore Animator~~
+//**__previous page__:
**//[[/tutorial/effects/ecore_animator/setting_up|Setting up the application]]
+==== Creating a Rotation Effect ====
+
+{{ :ecore_animator_rotate.gif }}
+
+After the animation target is created, the first button and associated
+rotation can be created:
+
+<code c>
+// Button 1 : Rotation effect
+bt1 = elm_button_add(win);
+elm_object_text_set(bt1, "Rotate");
+evas_object_size_hint_weight_set(bt1, EVAS_HINT_FILL, EVAS_HINT_FILL);
+evas_object_move(bt1, 25, 0);
+evas_object_resize(bt1, 90, 70);
+evas_object_smart_callback_add(bt1, "clicked", _btn_rotate_cb, target);
+evas_object_show(bt1);
+</code>
+
+The button is used for triggering the rotation effect. The button is placed
+and resized, and associated with the ''_btn_rotate_cb()'' callback function.
+This callback function calls the animation on the animation target.
+
+<code c>
+static void
+_btn_rotate_cb(void *data, Evas_Object *btn, void *ev)
+{
+ Evas_Object *target = data;
+ ecore_animator_timeline_add(1, _do_rotate, target);
+}
+</code>
+
+In this callback function, an Ecore animator timeline is created using the
+''ecore_animator_timeline_add()'' function. This function adds an animator that
+runs for a limited time the ''_do_rotate()'' animation callback function
+for 1 second on the ''target'' Evas object.
+
+Next, we write the animation callback function that actually runs the
+animation. This callback is an ''Ecore_Timeline_Cb'' function, meaning it
returns
+an ''Eina_Bool'' value and takes as arguments some ''data'' and the current
position
+along the animation timeline (''pos'').
+
+To create the rotation animation, an Evas Map is used. The map handles the
+necessary map points and allows you to manipulate the target Evas object on
+the X, Y, and Z axes.
+
+<code c>
+static Eina_Bool
+_do_rotate(void *data, double pos)
+{
+ // Get the animation target
+ Evas_Object *obj = data;
+ // Declaration of an `Evas_Map`
+ Evas_Map *m;
+ // Variables to store the target size and position
+ int x, y, w, h;
+
+ // Getting the size and position of the target
+ evas_object_geometry_get(obj, &x, &y, &w, &h);
+ // Creation of an `Evas_Map` of 4 points
+ m = evas_map_new(4);
+ // Populate source and destination map points to match exactly object.
+ evas_map_util_points_populate_from_object(m, obj);
+ // Create a rotation of 360° with x+(w/2) "x" center and y +(h/2) "y"
center.
+ evas_map_util_rotate(m, 360.0 * pos, x + (w / 2), y + (h / 2));
+ // Setting the object to "animate" in the `Evas_Map`
+ evas_object_map_set(obj, m);
+ // Starting the Animation
+ evas_object_map_enable_set(obj, EINA_TRUE);
+ // Free used memory
+ evas_map_free(m);
+
+ return EINA_TRUE;
+}
+</code>
+
+In the animation callback function, we first declare the ''Evas Map''. To
+implement the rotation, an X and Y center needs to be set, so we create 4
+integer variables to store the size and position of the target. This
+information is provided by the ''evas_object_geometry_get()'' function, which
+returns the X and Y coordinates and the weight and height of the target Evas
+object. Now we have all the required data to build the animation.
+
+An Evas Map is consisted of four points, and these points are populated with
+the animation target:
+
+<code c>
+// Creation of an `Evas_Map` of 4 points
+m = evas_map_new(4);
+// Populate source and destination map points to match exactly object.
+evas_map_util_points_populate_from_object(m, obj);
+</code>
+
+Now the ''evas_map_util_rotate()'' function defines the rotation:
+
+<code c>
+// Create a rotation of 360° with x+(w/2) "x" center and y +(h/2) "y" center.
+evas_map_util_rotate(m, 360.0 * pos, x + (w / 2), y + (h / 2));
+</code>
+
+The animation callback function will be called at several points along the
+timeline, which is why the rotation angle (360°) is multiplied by the timeline
+position (pos) to get the actual animation angle. If we do not do this, we
+will never see the animation take place. Then the target objet is joined to
+the map and we start the animation.
+
+<code c>
+// Setting the object to "animate" in the `Evas_Map`
+evas_object_map_set(obj, m);
+// Starting the Animation
+evas_object_map_enable_set(obj, EINA_TRUE);
+</code>
+
+Each call to the animation callback function will rotate the object (360 *
+timeline position) degrees.
+
+Finally, the memory allocated to the Evas Map is freed up:
+<code c>
+// Free used memory
+evas_map_free(m);
+</code>
+
+\\
+//**__next page__: **//[[/tutorial/effects/ecore_animator/zoom|Creating a zoom
effect]]
diff --git a/pages/tutorial/effects/ecore_animator/setting_up.txt
b/pages/tutorial/effects/ecore_animator/setting_up.txt
new file mode 100644
index 0000000..20179ef
--- /dev/null
+++ b/pages/tutorial/effects/ecore_animator/setting_up.txt
@@ -0,0 +1,81 @@
+~~Title: Setting Up - Ecore Animator~~
+==== Setting up the application ====
+
+In this part of the tutorial, we create a simple application that manipulates
+and animates an Evas object. We use a "Basic UI Application" as the basis for
+the application.
+
+First, we set up the widgets we are going to use in the application:
+
+<code c>
+EAPI_MAIN int
+elm_main(int argc, char **argv)
+{
+ //Main window
+ Evas_Object *win;
+ //Application Title
+ Evas_Object *label;
+
+ //buttons
+ Evas_Object *bt1, *bt2, *bt3;
+ //Animation target
+ Evas_Object *target;
+
+ elm_run();
+ elm_shutdown();
+ return EXIT_SUCCESS;
+}
+ELM_MAIN()
+</code>
+
+Then the actual widgets are created, starting with the main window and
+application title:
+
+<code c>
+//Main window
+win = elm_win_util_standard_add("Ecore Animator", "Ecore Animator Tutorial");
+elm_policy_set(ELM_POLICY_QUIT, ELM_POLICY_QUIT_LAST_WINDOW_CLOSED);
+elm_win_autodel_set(win, EINA_TRUE);
+
+if (elm_win_wm_rotation_supported_get(win))
+ {
+ int rots[4] = { 0, 90, 180, 270 };
+ elm_win_wm_rotation_available_rotations_set(win, (const int *)(&rots), 4);
+ }
+
+// Application title
+label = elm_label_add(win);
+elm_object_text_set(label, "Ecore Animator Tutorial");
+evas_object_size_hint_weight_set(label, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+elm_win_resize_object_add(win, label);
+evas_object_show(label);
+</code>
+
+Next, we create the animation target, which is an Evas object of type
+Elm_Image.
+
+<code c>
+// Animation target
+// Setting the image path
+char buf[PATH_MAX];
+snprintf(buf, sizeof(buf), "icon.png");
+// Adding the image
+target = elm_image_add(win);
+// Setting the image path
+if (!elm_image_file_set(target, buf, NULL))
+ printf("error: could not load image \"%s\"\n", buf);
+evas_object_size_hint_weight_set(target, EVAS_HINT_FILL, EVAS_HINT_FILL);
+//Moving the image
+evas_object_move(target, 130, 100);
+//Resizing the image
+evas_object_resize(target, 200, 100);
+//Showing the image
+evas_object_show(target);
+</code>
+
+The image path is set by calling the ''elm_image_file_set()'' function. This
+function takes as arguments the ''target'' Evas object and the path of the
+image file, built with the ''snprintf()'' function and stored in a buffer.
+
+\\
+//**__next page__: **//[[/tutorial/effects/ecore_animator/rotation|Creating a
rotation effect]]
diff --git a/pages/tutorial/effects/ecore_animator/zoom.txt
b/pages/tutorial/effects/ecore_animator/zoom.txt
new file mode 100644
index 0000000..704ab47
--- /dev/null
+++ b/pages/tutorial/effects/ecore_animator/zoom.txt
@@ -0,0 +1,72 @@
+~~Title: Zoom Effect - Ecore Animator~~
+//**__previous page__:
**//[[/tutorial/effects/ecore_animator/rotation|Creating a rotation effect]]
+==== Creating a Zoom Effect ====
+
+The next animation is a zoom, for which an Evas Map is also used.
+
+{{ :ecore_animator_zoom.gif }}
+
+First, the button is created in ''elm_main()'':
+
+<code c>
+// Button 2 : Zoom Effect
+bt2 = elm_button_add(win);
+elm_object_text_set(bt2, "Zoom");
+evas_object_size_hint_weight_set(bt2, EVAS_HINT_FILL, EVAS_HINT_FILL);
+evas_object_move(bt2, 315, 0);
+evas_object_resize(bt2, 90, 70);
+evas_object_smart_callback_add(bt2, "clicked", _btn_zoom_cb, target);
+evas_object_show(bt2);
+</code>
+
+Then, the button callback function is created with a new timeline:
+
+<code c>
+static void _btn_zoom_cb(void *data, Evas_Object *btn, void *ev)
+{
+ Evas_Object *target = data;
+ ecore_animator_timeline_add(1, _do_zoom, target);
+}
+</code>
+
+Next, we write the ''_do_zoom()'' animation callback function, which is almost
+identical to the ''_do_rotate()'' callback function, except that we use the
+''evas_map_util_zoom()'' function to create the animation:
+
+<code c>
+static Eina_Bool
+_do_zoom(void *data, double pos)
+{
+ Evas_Object *obj = data;
+ Evas_Map *m;
+ int x, y, w, h;
+
+ evas_object_geometry_get(obj, &x, &y, &w, &h);
+ m = evas_map_new(4);
+ evas_map_util_points_populate_from_object(m, obj);
+ evas_map_util_zoom(m, 2 * pos, 2 * pos, x , y);
+ evas_object_map_set(obj, m);
+ evas_object_map_enable_set(obj, EINA_TRUE);
+ evas_map_free(m);
+
+ return EINA_TRUE;
+}
+</code>
+The ''evas_map_util_zoom()'' function takes the following arguments:
+
+ * The map to change
+ * The horizontal zoom factor
+ * The vertical zoom factor
+ * The horizontal position (X coordinate) of the zooming center
+ * The vertical position (Y coordinate) of the zooming center
+
+Here, a horizontal and vertical zoom factor of 2 is used, and the X and Y
+coordinates of the target as the horizontal and vertical center coordinates.
+
+The ''_do_zoom()'' callback function is called at several points along the
+animation timeline, which is why we multiply the horizontal and vertical zoom
+factor values by the timeline position. Each call will zoom more than the
+previous one, thereby creating the animation effect.
+
+\\
+//**__next page__: **//[[/tutorial/effects/ecore_animator/3d_rotation|Creating
a 3D rotation effect]]
diff --git a/pages/tutorial/effects/edje_animation/on_click.txt
b/pages/tutorial/effects/edje_animation/on_click.txt
new file mode 100644
index 0000000..269a0c9
--- /dev/null
+++ b/pages/tutorial/effects/edje_animation/on_click.txt
@@ -0,0 +1,312 @@
+~~Title: On Click - Edje Animation~~
+//**__previous page__:
**//[[/tutorial/effects/edje_animation/start_up|Animating on Application
Start-up]]
+==== Animating Object on Click ====
+
+All the previous animations are automatic and do not have any relation with
+the user's actions.
+
+=== Title go back ===
+
+Next animate a part by clicking on another one. Make the
+title restore its default aspect when clicking on the small image.
+
+{{ :edje_animation_reset.gif }}
+
+The parts and the states are already defined. The animation goes back to the
+default state, there is no need to add any parts or states: only add a program
+which makes the transition when clicking on logo part.
+
+<code c>
+// Make the title go back to normal
+program
+{
+ name: "animation,normaltitle";
+ source: "image";
+ signal: "mouse,clicked,*";
+ action: STATE_SET "default" 1.0;
+ target: "txt_title";
+ transition: LINEAR 0.5;
+}
+</code>
+
+This program starts when the application receives the signal
+''mouse,clicked,*'' (any button of the mouse is clicked) from the part called
+image, (''source''). It performs the ''STATE_SET'' action and sets the default
+state on the target ''txt_file'' part with a ''LINEAR'' transition.
+
+When clicking any mouse button on the small logo, the title goes back to its
+original state.
+
+=== Rotating Parts ===
+
+Next add two more buttons to the application and create programs to animate a
+target.
+
+It is possible to create a button with Edje from scratch, but to save time,
+the ''SWALLOW'' part is used in this example to store Elementary widgets.
+
+First create the ''SWALLOW'' parts, and then the ''Elementary'' widgets in the
+''.c'' file.
+
+<code c>
+// Container for the rotate button
+part
+{
+ type: SWALLOW;
+ name: "btn/rotate";
+ description
+ {
+ state: "default" 0.0;
+ rel1.relative: 0.30 0.9;
+ rel2.relative: 0.50 0.99;
+ }
+}
+</code>
+
+This part is called ''btn/rotate'', it only has a ''SWALLOW'' type and a
+default state with its position being on the bottom left of the screen.
+
+<code c>
+// Container for the grow button
+part
+{
+ type: SWALLOW;
+ name: "btn/grow";
+ description
+ {
+ state: "default" 0.0;
+ rel1.relative: 1.02 0;
+ rel1.to: "btn/rotate";
+ rel2.relative: 2.02 1;
+ rel2.to: "btn/rotate";
+ }
+}
+</code>
+
+This second ''SWALLOW'' part is very similar to the first one. It is placed
+relatively to ''btn/rotate'', in order to remain next to it.
+
+Next create the actual widgets. This is done in the ''.c'' file and is very
+similar to what is done for the buttons in the first chapter.
+
+This code is added in ''elm_main()''.
+
+<code c>
+// Creation button in the app window
+button = elm_button_add(win);
+elm_object_text_set(button, "Rotate");
+// Add the button to the edje layout container called "btn/rotate"
+elm_object_part_content_set(layout, "btn/rotate", button);
+evas_object_show(button);
+
+// Creation a up button in the app window
+btn_up = elm_button_add(win);
+// Add the button to the edje layout container called "btn/grow"
+elm_object_text_set(btn_up, "Grow");
+elm_object_part_content_set(layout, "btn/grow", btn_up);
+evas_object_show(btn_up);
+</code>
+
+In the default Basic EDC UI Application, the Edje layout is loaded by default.
+Create two Elementary buttons and add them to the ''SWALLOW'' containers,
+without having to setup sizes or positions as this is done in the ''SWALLOW''
+container.
+
+Note that the part name is very important because it is used to be merged the
+Elementary widget and the ''SWALLOW'' part.
+
+When the buttons placed and set, create the animation target. It is done in
+the EDC file.
+
+Add the animation target part.
+
+The part initialization and the default ''state'':
+
+<code c>
+// The animation target
+part
+{
+ name: "atarget";
+ type: IMAGE;
+
+ // Default state
+ description
+ {
+ state: "default" 0.0;
+ image { normal: "image2.png"; }
+ color: 255 0 0 255; /* red */
+ rel1 { relative: 0.3 0.3; }
+ rel2 { relative: 0.7 0.7; }
+ }
+}
+</code>
+
+This ''part'' is an image displaying a big logo, centered on the top of the
+screen.
+
+Create a state to change the color and add the ''map'' statement.
+
+<code c>
+// The rotate state
+description
+{
+ state: "rotate" 0.0;
+ inherit: "default" 0.0;
+
+ map
+ {
+ //Enable Map on the part
+ on: 1;
+ //Enable smooth rendering
+ smooth: 1;
+ //Enable perspective
+ perspective_on: 1;
+
+ //Apply rotations on the part
+ rotation.x: 0;
+ rotation.y: 0;
+ rotation.z: 0;
+ }
+ color: 0 255 0 255; /* green */
+}
+</code>
+
+This part changes the color to green and defines the ''map''. This statement
+makes rotations possible on an Edje ''part''. Rotations are done around the x,
+y or z axes. In this example, the map is enabled and a 0° rotation is applied
+around each axis.
+
+Add a state with a rotation around the z axis of 360°.
+
+<code c>
+description
+{
+ state: "rotate" 1.0;
+ inherit: "rotate" 0.0;
+ map.rotation.z: 360;
+}
+</code>
+
+This ''state'' inherits from the default state parameters and add a rotation
+around the z axis.
+
+Finally add a state to the other button animation grow. Change the size of the
+animation target and add an offset.
+
+
+<code c>
+// The grow state
+description {
+ state: "grow" 0.0;
+ inherit: "default" 0.0;
+ color: 0 0 255 255; /* blue */
+ rel1
+ {
+ relative: 0.2 0.2;
+ offset: 0.3 0.3;
+ }
+ rel2
+ {
+ relative: 0.7 0.4;
+ offset: 0.3 0.3;
+ }
+}
+</code>
+
+The last step is to create the programs to make all these states animate.
+
+{{ :edje_animation_rotate.gif }}
+
+To make the rotation animation smoother, create and chain several ''programs''
+with different durations.
+
+First create the main one: it goes from the default state to the rotate 0.0
+state in 0.2 seconds.
+
+Note that the states are all named the same way (rotate) but not with the same
+version. This version allows you to have more than one state with the same
+name, in fact the actual name of the state is the name plus the version.
+
+<code c>
+// Change the color of target to green
+program
+{
+ name: "rotate,target";
+ source: "btn/rotate";
+ signal: "mouse,clicked,*";
+ action: STATE_SET "rotate" 0.0;
+ target: "atarget";
+ transition: SIN 0.2;
+ after: "rotate,target,2";
+}
+</code>
+
+The program starts when the ''btn/rotate'' part is clicked with any mouse
+button. When the animation ends, it calls the next one called
+''rotate,target,2''.
+
+<code c>
+// Rotate 360°
+program
+{
+ name: "rotate,target,2";
+ action: STATE_SET "rotate" 1.0;
+ target: "atarget";
+ transition: SIN 0.7;
+ after: "rotate,end";
+}
+</code>
+
+This program sets the part state to ''rotate 1.0'' in 0.7 seconds, and when
done
+calls the next one ''rotate,end''.
+
+<code c>
+// Go back to the normal.
+program
+{
+ name: "rotate,end";
+ action: STATE_SET "rotate" 0.0;
+ target: "atarget";
+ transition: LINEAR 0.2;
+}
+</code>
+
+''rotate,end'' is the last program of the rotation effect: it sets the state
+to ''rotate 0.0'' very fast.
+
+The last program of this example is the grow effect, it switches from one
+state to another.
+
+{{ :edje_animation_grow.gif }}
+
+<code c>
+// Grow the target and go back to normal state
+program
+{
+ name: "grow,target";
+ source: "btn/grow";
+ signal: "mouse,clicked,*";
+ action: STATE_SET "grow" 1.0;
+ after: "go,default";
+ target: "atarget";
+ transition: SINUSOIDAL 1.0;
+}
+</code>
+
+It starts when the ''btn/grow'' part is clicked, it goes from the current
+state to ''grow 1.0'' in one second. It then calls the go,default program. In
+this program, both size and color change during the transition.
+
+The ''go,default'' program sets the status back default for the animation
+target.
+
+<code c>
+// Go back to normal (default) state
+program
+{
+ name: "go,default";
+ action: STATE_SET "default" 1.0;
+ target: "atarget";
+ transition: SIN 1.0;
+}
+</code>
diff --git a/pages/tutorial/effects/edje_animation/start_up.txt
b/pages/tutorial/effects/edje_animation/start_up.txt
new file mode 100644
index 0000000..f6c9962
--- /dev/null
+++ b/pages/tutorial/effects/edje_animation/start_up.txt
@@ -0,0 +1,187 @@
+~~Title: Start Up - Edje Animation~~
+==== Animating on Application Start-up ====
+
+The goal of this tutorial is to create an animation target and buttons to
+start animations, all of this is in an EDC (Edje Data Collection) file.
+
+{{ :edje_animation_start.gif }}
+
+First create an application using Basic EDC UI Application:
+
+<code c>
+#include <Elementary.h>
+
+EAPI_MAIN int
+elm_main(int argc, char **argv)
+{
+ Evas_Object *win, *layout;
+ win = elm_win_util_standard_add("Edje Animation", "Edje Animation
Tutorial");
+ elm_policy_set(ELM_POLICY_QUIT, ELM_POLICY_QUIT_LAST_WINDOW_CLOSED);
+ elm_win_autodel_set(win, EINA_TRUE);
+
+ layout = elm_layout_add(win);
+
+ elm_layout_file_set(layout, "edje_animation.edj", "my_layout");
+
+ evas_object_resize(layout, 300, 300);
+ evas_object_show(layout);
+ evas_object_resize(win, 400, 400);
+ evas_object_show(win);
+ elm_run();
+ elm_shutdown();
+ return 0;
+}
+ELM_MAIN()
+</code>
+
+Animations can be run at application startup. By default the Basic EDC UI
+Application model produces an empty window with a title.
+
+In this example an image is added to the window and the behavior of the window
title is
+changed.
+
+Add the image to the Edje images collection.
+<code c>
+images
+{
+ image: "image1.png" COMP;
+ image: "image2.png" COMP;
+}
+</code>
+
+Then add an Edje part using the small image: this part has two states. This is
+the first important notion for animations. The ''STATE'' describes the
+appearance of a part: size, position, color, etc.
+
+In this example, the part has two states, default and down-state:
+
+<code c>
+part
+{
+ name: "image1";
+ type: IMAGE;
+ description
+ {
+ state: "default" 0.0;
+ max: 63 63;
+ min: 63 63;
+ image { normal: "image1.png"; }
+ rel1.relative: 0.2 0.0;
+ rel2.relative: 0.0 0.0;
+ }
+
+ description
+ {
+ state: "down-state" 1.0;
+ inherit: "default" 0.0;
+ rel1.relative: 0.2 0.92;
+ rel2.relative: 0.05 1.0;
+ }
+}
+</code>
+
+The logo part has the IMAGE type. The default state contains in the first
+description of the part sets:
+
+ * the maximum and minimum size using the min and max statements
+ * the image to use in this part
+ * the default position.
+
+The second state, ''"down-state"'', inherits all of the default's attributes,
and
+only changes the position to put the image at the bottom of the application
+window.
+
+These two states are the start and end states of the animation. To actually
+create the animation, add a program to the Edge ''programs'' collection.
+
+<code c>
+// Icon drop animation
+program
+{
+ name: "animation,state1";
+ source: "";
+ signal: "load";
+ action: STATE_SET "down-state" 1.0;
+ target: "logo";
+ transition: BOUNCE 2.5 0.0 5.0;
+}
+</code>
+
+This program is named ''animation,state1'' and is started when the application
+receives the ''load'' signal immediately on startup. It runs the ''STATE_SET''
+action so it changes the object state from ''"default"'' to ''"down-state"''.
The target
+of the program is the image ''part''.
+
+In order to switch from one state to another, it uses a ''transition'' of the
+''BOUNCE'' type with 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.
+
+This produces an falling and bouncing effect.
+
+Also add an animation for the window title to make it move from the right to
+the left with a bounce effect while growing the font size.
+
+Create a new state on the part called "txt_title" inside which both the font
+size and position are changed.
+
+<code c>
+part
+{
+ name: "txt_title";
+ type: TEXT;
+ mouse_events: 0;
+
+ // The default State
+ description
+ {
+ state: "default" 0.0;
+ align: 0.0 0.0;
+ rel1 { relative: 0.5 0.0; }
+ rel2 { relative: 1.0 0.5; }
+ text
+ {
+ font: "Sans";
+ size: 22;
+ text: "edje animation";
+ }
+ color: 0 0 0 255;
+ }
+
+ // The "Bigger" state
+ description
+ {
+ state: "Bigger" 0.0;
+ align: 0.0 0.0;
+ rel1 { relative: 0.0 0.0; }
+ rel2 { relative: 1.0 0.2; }
+ text
+ {
+ size: 26;
+ text: "animation terminated";
+ }
+ color: 0 0 0 255;
+ }
+}
+</code>
+
+Create a program to animate this part on startup, just like the small image.
+
+<code c>
+// Make the title bigger
+program
+{
+ name: "animation,bigtitle";
+ source: "";
+ signal: "load";
+ action: STATE_SET "Bigger" 1.0;
+ target: "txt_title";
+ transition: LINEAR 5.0;
+}
+</code>
+This program goes from the default state to the bigger state in five seconds
+with a ''LINEAR'' effect, automatically running on the application startup.
+
+\\
+//**__next page__: **//[[/tutorial/effects/edje_animation/on_click|Animating
Object on Click]]
+
diff --git a/pages/tutorial/effects/elementary_animations/blend.txt
b/pages/tutorial/effects/elementary_animations/blend.txt
new file mode 100644
index 0000000..672164f
--- /dev/null
+++ b/pages/tutorial/effects/elementary_animations/blend.txt
@@ -0,0 +1,53 @@
+~~Title: Elementary Animations - Creating a Blend Transition~~
+//**__previous page__:
**//[[/tutorial/effects/elementary_animations/flip|Creating a Flip Effect]]
+=== Elementary Animations ===
+==== Creating a Blend Transition ====
+
+The blend effect also works the same way as the flip, but without the axes or
+direction information.
+
+{{ :elementary_animations_blend.gif }}
+
+Use the back button here as well. To create the blend
+effect button:
+
+<code c>
+// The blend button
+Evas_Object *btn_blend = elm_button_add(win);
+elm_object_text_set(btn_blend, "Blend");
+evas_object_size_hint_weight_set(btn_blend, EVAS_HINT_FILL, EVAS_HINT_FILL);
+evas_object_show(btn_blend);
+evas_object_smart_callback_add(btn_blend, "clicked", _btn_blend_cb, &anim);
+elm_box_pack_end(center_vbox, btn_blend);
+</code>
+
+The blend transition callback is:
+<code c>
+static void _btn_blend_cb(void *data, Evas_Object *btn, void *ev)
+{
+ Animations *anim = (Animations *)data;
+
+ // Setting the button text
+ elm_object_text_set(anim->button, "Blend");
+ _blend_effect(anim->button, anim->buttonbck);
+}
+</code>
+
+Create and start the blend animation. This animation is created by adding it
+to and ''Elm_Transit'' with ''elm_transit_effect_blend_add''. Add two objects,
+as for the flip.
+<code c>
+static void _blend_effect(Evas_Object *obj, Evas_Object *obj2)
+{
+ Elm_Transit *trans;
+
+ trans = elm_transit_add();
+ elm_transit_object_add(trans, obj);
+ elm_transit_object_add(trans, obj2);
+ elm_transit_effect_blend_add(trans);
+ elm_transit_duration_set(trans, 3.0);
+ elm_transit_go(trans);
+}
+</code>
+\\
+//**__next page__: **//
[[/tutorial/effects/elementary_animations/fade|Creating a Fade Effect]]
diff --git a/pages/tutorial/effects/elementary_animations/fade.txt
b/pages/tutorial/effects/elementary_animations/fade.txt
new file mode 100644
index 0000000..a8592ac
--- /dev/null
+++ b/pages/tutorial/effects/elementary_animations/fade.txt
@@ -0,0 +1,53 @@
+~~Title: Elementary Animations - Creating a Fade Effect~~
+//**__previous page__:
**//[[/tutorial/effects/elementary_animations/blend|Creating a Blend
Transition]]
+=== Elementary Animations ===
+==== Creating a Fade Effect ====
+
+The fade effect works exactly the same way as the blend effect.
+
+{{ :elementary_animations_fade.gif }}
+
+First create the button:
+
+<code c>
+ // The fade button
+ Evas_Object *btn_fade = elm_button_add(win);
+ elm_object_text_set(btn_fade, "Fade");
+ evas_object_size_hint_weight_set(btn_fade, EVAS_HINT_FILL, EVAS_HINT_FILL);
+ evas_object_show(btn_fade);
+ evas_object_smart_callback_add(btn_fade, "clicked", _btn_fade_cb, &anim);
+ elm_box_pack_end(right_vbox, btn_fade);
+</code>
+
+Then add the button's callback:
+
+<code c>
+static void _btn_fade_cb(void *data, Evas_Object *btn, void *ev)
+{
+ Animations *anim = (Animations *)data;
+
+
+ // Setting the button text
+ elm_object_text_set(anim->button, "Fade");
+ _fade_effect(anim->button, anim->buttonbck);
+}
+</code>
+
+The animation function calls ''elm_transit_effect_fade_add'' instead of
+''elm_transit_effect_blend_add''.
+
+<code c>
+static void _fade_effect(Evas_Object *obj, Evas_Object *obj2)
+{
+ Elm_Transit *trans;
+
+ trans = elm_transit_add();
+ elm_transit_object_add(trans, obj);
+ elm_transit_object_add(trans, obj2);
+ elm_transit_effect_fade_add(trans);
+ elm_transit_duration_set(trans, 3.0);
+ elm_transit_go(trans);
+}
+</code>
+\\
+//**__next page__:
**//[[/tutorial/effects/elementary_animations/flipy|Creating a Flip on y Axis]]
diff --git a/pages/tutorial/effects/elementary_animations/flip.txt
b/pages/tutorial/effects/elementary_animations/flip.txt
new file mode 100644
index 0000000..1536b19
--- /dev/null
+++ b/pages/tutorial/effects/elementary_animations/flip.txt
@@ -0,0 +1,61 @@
+~~Title: Elementary Animations - Creating a Zoom Effect~~
+//**__previous page__:
**//[[/tutorial/effects/elementary_animations/zoom|Creating a Zoom Effect]]
+=== Elementary Animations ===
+==== Creating a Flip Effect ====
+
+This effect is applied to a pair of objects, in the order they are added, to
+the ''Elm_Transit'' transition. In this example, add the animation target
+button and the button called ''buttonbck'' which represents the back of the
target
+button.
+
+{{ :elementary_animations_flip.gif }}
+
+Create the action button for the flip effect:
+
+<code c>
+// The flip button
+Evas_Object *btn_flip = elm_button_add(win);
+elm_object_text_set(btn_flip, "Flip x");
+evas_object_size_hint_weight_set(btn_flip, EVAS_HINT_FILL, EVAS_HINT_FILL);
+evas_object_show(btn_flip);
+evas_object_smart_callback_add(btn_flip, "clicked", _btn_flip_cb, &anim);
+elm_box_pack_end(left_vbox, btn_flip);
+</code>
+
+The corresponding callback to create and start the animation with the two
+objects (target button and back button) to animate is like follows.
+
+<code c>
+static void
+_btn_flip_cb(void *data, Evas_Object *btn, void *ev)
+{
+ Animations *anim = (Animations *)data;
+
+ // Setting the button text
+ elm_object_text_set(anim->button, "Flip");
+ _flip_effect(anim->button, anim->buttonbck);
+}
+</code>
+
+Create the function which runs the animation. This flip animation is created
+using ''elm_transit_effect_flip_add''. The second parameter is the axis of the
+flip: in this example it is the X axis, so the button flips down to top to
+show the back button. The last parameter is the flip direction: ''EINA_TRUE''
+means clockwise.
+
+<code c>
+_flip_effect(Evas_Object *obj, Evas_Object *obj2)
+{
+ Elm_Transit *trans;
+
+ trans = elm_transit_add();
+ elm_transit_object_add(trans, obj);
+ elm_transit_object_add(trans, obj2);
+ elm_transit_effect_flip_add(trans, ELM_TRANSIT_EFFECT_FLIP_AXIS_X,
EINA_TRUE);
+
+ elm_transit_duration_set(trans, 3.0);
+ elm_transit_go(trans);
+}
+</code>
+\\
+//**__next page__:
**//[[/tutorial/effects/elementary_animations/blend|Creating a Blend
Transition]]
diff --git a/pages/tutorial/effects/elementary_animations/flipy.txt
b/pages/tutorial/effects/elementary_animations/flipy.txt
new file mode 100644
index 0000000..5cfed99
--- /dev/null
+++ b/pages/tutorial/effects/elementary_animations/flipy.txt
@@ -0,0 +1,52 @@
+~~Title: Elementary Animations - Creating a Flip on y Axis~~
+//**__previous page__:
**//[[/tutorial/effects/elementary_animations/fade|Creating a Fade Effect]]
+=== Elementary Animations ===
+==== Creating a Flip on y Axis ====
+
+This is same as the flip transition, but on y axis.
+
+{{ :elementary_animations_flipy.gif }}
+
+To create a flip on y axis:
+
+<code c>
+// The flip y button
+Evas_Object *btn_flip_y = elm_button_add(win);
+elm_object_text_set(btn_flip_y, "Flip y");
+evas_object_size_hint_weight_set(btn_flip_y, EVAS_HINT_FILL, EVAS_HINT_FILL);
+evas_object_show(btn_flip_y);
+evas_object_smart_callback_add(btn_flip_y, "clicked", _btn_flip_y_cb, &anim);
+elm_box_pack_end(left_vbox, btn_flip_y);
+</code>
+
+The flip on y button callback looks like:
+<code c>
+static void
+_btn_flip_y_cb(void *data, Evas_Object *btn, void *ev)
+{
+ Animations *anim = (Animations *)data;
+
+
+ // Setting the button text
+ elm_object_text_set(anim->button, "Flip 2");
+ _flip_y_effect(anim->button, anim->buttonbck);
+}
+</code>
+
+The animation function:
+<code c>
+static void
+_flip_y_effect(Evas_Object *obj, Evas_Object *obj2)
+{
+ Elm_Transit *trans;
+
+ trans = elm_transit_add();
+ elm_transit_object_add(trans, obj);
+ elm_transit_object_add(trans, obj2);
+ elm_transit_effect_flip_add(trans, ELM_TRANSIT_EFFECT_FLIP_AXIS_Y,
EINA_TRUE);
+ elm_transit_duration_set(trans, 3.0);
+ elm_transit_go(trans);
+}
+</code>
+\\
+//**__next page__: **//[[/tutorial/effects/elementary_animations/wipe|Creating
a Wipe Effect]]
diff --git a/pages/tutorial/effects/elementary_animations/rotation.txt
b/pages/tutorial/effects/elementary_animations/rotation.txt
new file mode 100644
index 0000000..63df325
--- /dev/null
+++ b/pages/tutorial/effects/elementary_animations/rotation.txt
@@ -0,0 +1,62 @@
+~~Title: Elementary Animations - Creating a Rotation Effect~~
+//**__previous page__:
**//[[/tutorial/effects/elementary_animations/setting_up|Setting Up the
Application]]
+=== Elementary Animations ===
+==== Creating a Rotation Effect ====
+
+This effect rotates the animation target button with an angle of 360°. A
+pointer to this angle is stored in the application data as ''anim->rt_angle''.
+
+{{ :elementary_animations_rotate.gif }}
+
+Create the button and add it to the center column.
+
+<code c>
+// The rotation button
+Evas_Object *btn_rotate = elm_button_add(win);
+elm_object_text_set(btn_rotate, "Rotate");
+evas_object_size_hint_weight_set(btn_rotate, EVAS_HINT_FILL, EVAS_HINT_FILL);
+evas_object_show(btn_rotate);
+evas_object_smart_callback_add(btn_rotate, "clicked", _btn_rotate_cb, &anim);
+elm_box_pack_end(center_vbox, btn_rotate);
+</code>
+
+In the rotate button callback, call the effect function with the target button
+as first parameter and the rotation angle as the second one.
+
+<code c>
+static void
+_btn_rotate_cb(void *data, Evas_Object *btn, void *ev)
+{
+ Animations *anim = (Animations *)data;
+
+ // Setting the button text
+ elm_object_text_set(anim->button, "Rotate");
+ _rotation_effect(anim->button, *(anim->rt_angle));
+}
+</code>
+
+The animation function rotates the animation target by adding a rotation
+effect with ''elm_transit_effect_rotation_add''. This function takes three
+parameters:
+
+ * ''Elm_Transit''
+ * the rotation position at which the effect begins
+ * the rotation position at which the effect ends
+
+Rotation starts at 0° to finish at 360°. The animation lasts two seconds.
+
+<code c>
+static void
+_rotation_effect(Evas_Object *obj, float angle)
+{
+ Elm_Transit *trans = elm_transit_add();
+ elm_transit_object_add(trans, obj);
+
+ // rotates the object from its original angle to given degrees to the right
+ elm_transit_effect_rotation_add(trans, 0.0, angle);
+ elm_transit_duration_set(trans, 2.0);
+ elm_transit_go(trans);
+}
+</code>
+\\
+//**__next page__: **//[[/tutorial/effects/elementary_animations/zoom|Creating
a Zoom Effect]]
diff --git a/pages/tutorial/effects/elementary_animations/setting_up.txt
b/pages/tutorial/effects/elementary_animations/setting_up.txt
new file mode 100644
index 0000000..218adc3
--- /dev/null
+++ b/pages/tutorial/effects/elementary_animations/setting_up.txt
@@ -0,0 +1,255 @@
+~~Title: Elementary Animations - Setting Up the Application~~
+=== Elementary Animations ===
+==== Setting Up the Application ====
+
+ In this example, one single object is animated with different type of
+animations.
+
+Create the structure of our animation represented by a struct named
+''Animations''.
+
+<code c>
+typedef struct _Animations{
+ Evas_Object *button;
+ Evas_Object *buttonbck;
+ float *rt_angle;
+ float *zto;
+ float *zfrom;
+} Animations;
+</code>
+
+Then create a basic application with the widgets we need:
+<code c>
+EAPI_MAIN int
+elm_main(int argc, char **argv)
+{
+ Evas_Object *win, *label, *hbox, *left_vbox, *center_vbox, *right_vbox;
+ Evas_Object *button, *buttonbck;
+ float rt_angle, zto, zfrom;
+
+ win = elm_win_util_standard_add("Elementary Animations", "Elementary
Animations Tutorial");
+ elm_policy_set(ELM_POLICY_QUIT, ELM_POLICY_QUIT_LAST_WINDOW_CLOSED);
+ elm_win_autodel_set(win, EINA_TRUE);
+ if (elm_win_wm_rotation_supported_get(win))
+ {
+ int rots[4] = { 0, 90, 180, 270 };
+ elm_win_wm_rotation_available_rotations_set(win, (const int *)(&rots),
4);
+ }
+
+ //here will come the animation code
+
+ evas_object_resize(win, 400, 400);
+ evas_object_show(win);
+ elm_run();
+ elm_shutdown();
+ return 0;
+}
+ELM_MAIN()
+
+</code>
+
+Here the main widgets of the application:
+
+ * ''win'': the main window
+ * ''label'': the title label
+ * ''button'': a button object, the target of the animations
+ * ''buttonbck'': a button representing the back of the target button
+ * ''left_vbox'': a vertical box to place the first buttons column
+ * ''center_vbox'': a vertical box to store the second buttons column
+ * ''right_vbox'': a vertical box to store the last buttons column
+ * ''hbox'': a horizontal box to store the vertical boxes
+ * ''rt_angle'', ''zto'', ''zfrom'': these variables are used to store
values for animations
+
+Place the widgets on the application's canvas, first create widgets on the
+main window:
+
+Set up the needed values like the rotation angle, the original zoom value
+(''zfrom''), and the destination zoom value (''zto'').
+
+<code c>
+//set the values for animations
+rt_angle = 360.0;
+zfrom = 1.0;
+zto = 2.0;
+</code>
+
+Add a label title to the main window, then create the animation target button
+and the back button.
+
+<code c>
+/* Label*/
+label = elm_label_add(win);
+elm_object_text_set(label, "Effects Tutorial");
+evas_object_size_hint_weight_set(label, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+evas_object_move(label, 100, 0);
+evas_object_resize(label, 200, 50);
+evas_object_show(label);
+
+/* Creation a button in the app window*/
+button = elm_button_add(win);
+evas_object_move(button, 100, 100); // Moving the button to x=50 y=100
+evas_object_resize(button, 200, 50); // Resizing the button 100x50
+evas_object_show(button); // Showing the button
+/* Creation a back button in the app window*/
+buttonbck = elm_button_add(win);
+elm_object_text_set(buttonbck, "Button back");
+evas_object_move(buttonbck, 100, 100);
+evas_object_resize(buttonbck, 200, 50);
+
+/*set the structure of pointeurs*/
+Animations anim = { button, buttonbck, &rt_angle, &zto, &zfrom };
+</code>
+
+Now you can create boxes to add a set of buttons to them that starts
+animations on the target.
+
+Create the structure of the box of buttons with three columns (vertical boxes)
+and one horizontal for the main container.
+
+<code c>
+// Creation of the main container box
+hbox = elm_box_add(win);
+elm_box_horizontal_set(hbox, EINA_TRUE);
+elm_box_homogeneous_set(hbox, EINA_TRUE);
+evas_object_move(hbox, 130, 200);
+evas_object_show(hbox);
+
+// Creation of the first column
+left_vbox = elm_box_add(hbox);
+elm_box_horizontal_set(left_vbox, EINA_FALSE);
+elm_box_homogeneous_set(left_vbox, EINA_TRUE);
+evas_object_show(left_vbox);
+elm_box_pack_start(hbox, left_vbox);
+
+// Creation of the second column
+center_vbox = elm_box_add(hbox);
+elm_box_horizontal_set(center_vbox, EINA_FALSE);
+elm_box_homogeneous_set(center_vbox, EINA_TRUE);
+evas_object_show(center_vbox);
+elm_box_pack_end(hbox, center_vbox);
+
+// Creation of the last column
+right_vbox = elm_box_add(hbox);
+elm_box_horizontal_set(right_vbox, EINA_FALSE);
+elm_box_homogeneous_set(right_vbox, EINA_TRUE);
+evas_object_show(right_vbox);
+elm_box_pack_end(hbox, right_vbox);
+</code>
+
+Then create the first action button for the resize effect.
+
+<code c>
+// The resize button
+Evas_Object *btn_resize = elm_button_add(win);
+elm_object_text_set(btn_resize, "Resize");
// Setting the button text
+evas_object_size_hint_weight_set(btn_resize, EVAS_HINT_FILL, EVAS_HINT_FILL);
// Setting the hint weight policy
+evas_object_show(btn_resize);
// Showing the button
+evas_object_smart_callback_add(btn_resize, "clicked", _btn_resize_cb, &anim);
// Setting the "clicked" callback
+elm_box_pack_end(left_vbox, btn_resize);
// Adding the button to the first column
+</code>
+
+''evas_object_smart_callback_add'' defines the callback function that is to be
+called when the button is clicked. In this example, set a ''_btn_resize_cb''
+function and pass the application data ''anim'' to this callback function.
+
+The callback by itself only sets a new text for the animation target button,
+and calls a function which will actually animate the button.
+
+<code c>
+static void
+_btn_resize_cb(void *data, Evas_Object *btn, void *ev)
+{
+ Animations *anim = (Animations *)data;
+
+ // Starting the rotation effect 360 degrees
+ //evas_object_resize(button, 100, 50);
+ elm_object_text_set(anim->button, "Resize");
+ _resize_effect(anim->button);
+}
+</code>
+
+This function is an ''evas_object_smart_callback'' and thus needs to have its
+specific prototype: it does not return anything and receives three parameters:
+
+ * ''data'': data to be passed
+ * ''btn'': the object the callback is being called about
+ * ''ev'': the actual event, seldom used
+
+In this case, use ''data'' to pass the application data to the callback.
However,
+the parameter's type is ''void *'' and not ''Animation *''. Initialize a
variable of
+the correct type with the pointer.
+
+<code c>
+Animation * anim = (Animation *)data;
+</code>
+
+Then use the application data in the callback function. At this point create
+the animation directly in the callback function, but it is more
+straightforward to encapsulate the animation process into a dedicated
+function. ''_resize_effect'' implements the animation code:
+
+<code c>
+static void
+_resize_effect(Evas_Object *obj)
+{
+ // Elementary Transition declaration and creation
+ Elm_Transit *trans = elm_transit_add();
+
+ // Adding the transition target object
+ elm_transit_object_add(trans, obj);
+
+ // Setting the resize effect
+ elm_transit_effect_resizing_add(trans, 100, 50, 300, 150);
+
+ // Setting the transition duration
+ elm_transit_duration_set(trans, 3.0);
+
+ // Starting the transition
+ elm_transit_go(trans);
+}
+</code>
+
+Create an ''Elm_Transit *'' object representing the transition.
+
+<code c>
+Elm_Transit *trans = elm_transit_add();
+</code>
+
+Then add the target object to the transition
+
+<code c>
+elm_transit_object_add(trans, obj);
+</code>
+
+Add a resizing transition to the object with the origin and destination width
+and height in pixels.
+
+<code c>
+elm_transit_effect_resizing_add(trans, 100, 50, 300, 150);
+</code>
+
+100 and 50 are respectively the object's width and height when the effect
+begins, whereas 300 and 150 are respectively the object's width and height
+when the effect ends: the object grows from 100×50 to 300×150.
+
+After that set the transition duration with ''elm_transit_duration_set''.
+
+<code c>
+elm_transit_duration_set(trans, 3.0);
+</code>
+
+The animation lasts three seconds. The duration parameter is a double.
+
+Now start the animation by calling ''elm_transit_go'' with the ''Elm_Transit''
object.
+
+<code c>
+elm_transit_go(trans);
+</code>
+
+When the resize button is clicked, the animation target button grows.
+
+All the action buttons are created exactly the same way as the resize button,
+with a callback and an animation function.
+
+\\
+//**__next page__:
**//[[/tutorial/effects/elementary_animations/rotation|Creating a Rotation
Effect]]
diff --git a/pages/tutorial/effects/elementary_animations/transit.txt
b/pages/tutorial/effects/elementary_animations/transit.txt
new file mode 100644
index 0000000..6a0a160
--- /dev/null
+++ b/pages/tutorial/effects/elementary_animations/transit.txt
@@ -0,0 +1,362 @@
+~~Title: Elementary Animations - Transit~~
+//**__previous page__:
**//[[/tutorial/effects/elementary_animations/wipe|Creating a Wipe Effect]]
+=== Elementary Animations ===
+==== Transit: Implementing Elementary Transit Effects ====
+
+This tutorial demonstrates how you can implement a variety of EFL animation
effects using
+the Transit API available in the Elementary library.
+
+=== Initializing the Application Layout ===
+
+The application uses widgets, such as elm_naviframe for
+view management, layout classes, such as elm_list for the composition of the
+screen.
+
+The transit is designed to apply various animated transition effects to the
+Evas_Object. The following transition effects are supported in EFL and
+Elementary applications.
+
+ * Blend
+ * Color
+ * Fade
+ * Flip
+ * Rotation
+ * Transition
+ * Wipe
+ * Zoom
+
+The application layout is created by adding two naviframes in order to switch
+from one to another in transitions. Two lists are respectively added to the
+two naviframes.
+
+<code c>
+EAPI_MAIN int
+elm_main(int argc, char **argv)
+{
+ Evas_Object *navi, *navi2, *list, *list2;
+
+ win = elm_win_util_standard_add("Elementary Animations", "Elementary
Animations Tutorial");
+ elm_policy_set(ELM_POLICY_QUIT, ELM_POLICY_QUIT_LAST_WINDOW_CLOSED);
+ elm_win_autodel_set(win, EINA_TRUE);
+ if (elm_win_wm_rotation_supported_get(win))
+ {
+ int rots[4] = { 0, 90, 180, 270 };
+ elm_win_wm_rotation_available_rotations_set(win, (const int *)(&rots),
4);
+ }
+
+ Elm_Object_Item *nf_it, *nf_it2;
+
+ /* add two naviframes and two lists to switch
+ * from one to another in some transitions */
+ navi2 = elm_naviframe_add(win);
+ navi = elm_naviframe_add(win);
+ list = elm_list_add(navi);
+ list2 = elm_list_add(navi2);
+ elm_list_mode_set(list, ELM_LIST_COMPRESS);
+ elm_list_mode_set(list2, ELM_LIST_COMPRESS);
+
+ /* store naviframe pointeurs to pass them
+ * in data pointeur parameter */
+ Navi navis = {navi, navi2};
+ Navi navis2 = {navi2, navi};
+
+ /* first list items */
+ elm_list_item_append(list, "Blend", NULL, NULL, blend_cb, &navis);
+ elm_list_item_append(list, "Color", NULL, NULL, color_cb, &navis);
+ elm_list_item_append(list, "Fade", NULL, NULL, fade_cb, &navis);
+ elm_list_item_append(list, "Flip", NULL, NULL, flip_cb, &navis);
+ elm_list_item_append(list, "Rotation", NULL, NULL, rotation_cb, &navis);
+ elm_list_item_append(list, "ResizableFlip", NULL, NULL, resizable_flip_cb,
&navis);
+ elm_list_item_append(list, "Translation", NULL, NULL, translation_cb,
&navis);
+ elm_list_item_append(list, "Wipe", NULL, NULL, wipe_cb, &navis);
+ elm_list_item_append(list, "Zoom", NULL, NULL, zoom_cb, &navis);
+ elm_list_item_append(list, "Custom", NULL, NULL, custom_cb, &navis);
+ elm_list_go(list);
+
+ /* second list items*/
+ elm_list_item_append(list2, "Blend2", NULL, NULL, blend_cb, &navis2);
+ elm_list_item_append(list2, "Color2", NULL, NULL, color_cb, &navis2);
+ elm_list_item_append(list2, "Fade2", NULL, NULL, fade_cb, &navis2);
+ elm_list_item_append(list2, "Flip2", NULL, NULL, flip_cb, &navis2);
+ elm_list_item_append(list2, "Rotation2", NULL, NULL, rotation_cb, &navis2);
+ elm_list_item_append(list2, "ResizableFlip2", NULL, NULL,
resizable_flip_cb, &navis2);
+ elm_list_item_append(list2, "Translation2", NULL, NULL, translation_cb,
&navis2);
+ elm_list_item_append(list2, "Wipe2", NULL, NULL, wipe_cb, &navis2);
+ elm_list_item_append(list2, "Zoom2", NULL, NULL, zoom_cb, &navis2);
+ elm_list_item_append(list2, "Custom2", NULL, NULL, custom_cb, &navis2);
+ elm_list_go(list2);
+
+ nf_it = elm_naviframe_item_push(navi, "Transit", NULL, NULL, list, NULL);
+ nf_it2 = elm_naviframe_item_push(navi2, "Transit2", NULL, NULL, list2,
NULL);
+
+ evas_object_show(navi);
+ evas_object_show(navi2);
+ evas_object_show(list);
+ evas_object_show(list2);
+ evas_object_resize(navi2, 400, 400);
+ evas_object_resize(navi, 400, 400);
+ evas_object_resize(win, 400, 400);
+ evas_object_show(win);
+ elm_run();
+ elm_shutdown();
+ return 0;
+}
+ELM_MAIN()
+</code>
+
+The Navi structure is used to store the naviframe pointeurs in order to pass
+them in data pointeur as a parameter in callback functions.
+
+<code c>
+/* store naviframe pointeurs */
+typedef struct _Navi
+{
+ Evas_Object *navi;
+ Evas_Object *navi2;
+} Navi;
+</code>
+
+Next the transition effects will be described, there are two kind of transit
+effects, one when the effect applies on one object, the other one when the
+effect is a transition between two objects.
+
+=== Implementing the Rotation Effect ===
+
+{{ :transit_rotate.gif }}
+
+To implement the rotation effect:
+ - Use the ''elm_transit'' object with the ''elm_transit_add()'' function to
add the transit effect.
+ - Set the target object with ''elm_transit_object_add()'' function.
+ - Set the effect rotation indication the rotation amount with
''elm_transit_effect_rotation_add()'' function.
+ - Set the transit duration with ''elm_transit_duration_set()''
+ - To start the transit animation, use the ''elm_transit_go()'' function.
+
+<code c>
+static void
+rotation_cb(void *data, Evas_Object *obj, void *event_info)
+{
+ Navi *navis = data;
+ Evas_Object *navi=navis->navi;
+ Elm_Transit *transit = elm_transit_add();
+
+ // 360 degree rotation effect in the clock-wise direction
+ elm_transit_object_add(transit, navi);
+ elm_transit_effect_rotation_add(transit, 0, 360);
+ elm_transit_duration_set(transit, 1);
+ elm_transit_go(transit);
+}
+</code>
+
+For the transition with one effect, it will be very similar to this one so it
+will be not detailed excepted particular callbacks as the next one for the
+zoom effect.
+
+=== Implementing the Zoom Effect ===
+
+{{ :transit_zoom.gif }}
+
+For the zoom effect, two transitions are set, one for zooming in the other one
+for zooming out.
+
+The ''elm_transit_chain_transit_add()'' function allows to chain the
+transitions:
+
+<code c>
+static void
+zoom_cb(void *data, Evas_Object *obj, void *event_info)
+{
+ Navi *navis = data;
+ Evas_Object *navi=navis->navi;
+ // Zoom out to scale 0.6
+ Elm_Transit *transit = elm_transit_add();
+ elm_transit_smooth_set(transit, EINA_FALSE);
+ elm_transit_object_add(transit, navi);
+ elm_transit_effect_zoom_add(transit, 1.0, 0.4);
+ elm_transit_duration_set(transit, 0.5);
+
+ // Zoom in to the original size
+ Elm_Transit *transit2 = elm_transit_add();
+ elm_transit_smooth_set(transit2, EINA_FALSE);
+ elm_transit_object_add(transit2, navi);
+ elm_transit_effect_zoom_add(transit2, 0.4, 1.0);
+ elm_transit_duration_set(transit2, 0.5);
+
+ elm_transit_chain_transit_add(transit, transit2);
+ elm_transit_go(transit);
+}
+</code>
+
+=== Implementing the Wipe Effect ===
+
+{{ :transit_wipe.gif }}
+
+Similarly to the rotation effect but with the ''elm_transit_effect_wipe_add()''
+function by indicating the wipe type and the wiping direction.
+
+<code c>
+static void
+wipe_cb(void *data, Evas_Object *obj, void *event_info)
+{
+ Navi *navis = data;
+ Evas_Object *navi=navis->navi;
+ Elm_Transit *transit = elm_transit_add();
+
+ elm_transit_object_add(transit, navi);
+ elm_transit_effect_wipe_add(transit, ELM_TRANSIT_EFFECT_WIPE_TYPE_HIDE,
ELM_TRANSIT_EFFECT_WIPE_DIR_RIGHT);
+ elm_transit_duration_set(transit, 3.0);
+ elm_transit_go(transit);
+}
+</code>
+
+=== Implementing the Translation Effect ===
+
+{{ :transit_translation.gif }}
+
+Similarly to the rotation effect but with the
''elm_transit_effect_translation_add()''
+function by indicating the position when effect begins and end.
+
+<code c>
+static void
+translation_cb(void *data, Evas_Object *obj, void *event_info)
+{
+ Navi *navis = data;
+ Evas_Object *navi=navis->navi;
+ Elm_Transit *transit = elm_transit_add();
+
+ elm_transit_object_add(transit, navi);
+ elm_transit_effect_translation_add(transit, 0, 0, 50, 100);
+ elm_transit_duration_set(transit, 3.0);
+ elm_transit_go(transit);
+}
+</code>
+
+=== Implementing the Color Effect ===
+
+{{ :transit_color.gif }}
+
+Similarly to the rotation effect but with the
''elm_transit_effect_color_add()''
+function by indicating the RGBA color when effect begins and end.
+
+<code c>
+static void
+color_cb(void *data, Evas_Object *obj, void *event_info)
+{
+ Navi *navis = data;
+ Evas_Object *navi=navis->navi;
+ Elm_Transit *transit = elm_transit_add();
+
+ elm_transit_object_add(transit, navi);
+ elm_transit_effect_color_add(transit,0,0,0,0,255,255,0,255);
+ elm_transit_duration_set(transit, 3.0);
+ elm_transit_go(transit);
+}
+</code>
+
+=== Implementing the Blend Effect ===
+
+{{ :blend.gif }}
+
+This time, the blend effect is a transition between the two naviframes. So,
+the two naviframes are added to the ''Elm_transit''. Moreover, the
+''elm_transit_objects_final_state_keep_set()'' function allows to set the
+state of the final state of the transition (it could be used for the precedent
+effects too):
+
+<code c>
+static void
+blend_cb(void *data, Evas_Object *obj, void *event_info)
+{
+ Navi *navis = data;
+ Evas_Object *navi=navis->navi;
+ Evas_Object *navi2=navis->navi2;
+ Elm_Transit *transit = elm_transit_add();
+
+ elm_transit_object_add(transit, navi);
+ elm_transit_object_add(transit, navi2);
+ elm_transit_effect_blend_add(transit);
+ elm_transit_duration_set(transit, 3.0);
+ elm_transit_objects_final_state_keep_set(transit, EINA_TRUE);
+ elm_transit_go(transit);
+
+}
+</code>
+
+
+=== Implementing the Fade Effect ===
+
+{{ :transit_fade.gif }}
+
+Similarly to the blend effect but with the ''elm_transit_effect_fade_add()'':
+
+<code c>
+static void
+fade_cb(void *data, Evas_Object *obj, void *event_info)
+{
+ Navi *navis = data;
+ Evas_Object *navi=navis->navi;
+ Evas_Object *navi2=navis->navi2;
+ Elm_Transit *transit = elm_transit_add();
+
+ elm_transit_object_add(transit, navi);
+ elm_transit_object_add(transit, navi2);
+ elm_transit_effect_fade_add(transit);
+ elm_transit_duration_set(transit, 3.0);
+ elm_transit_objects_final_state_keep_set(transit, EINA_TRUE);
+ elm_transit_go(transit);
+
+}
+</code>
+
+=== Implementing the Flip Effect ===
+
+{{ :transit_flip.gif }}
+
+Similarly to the blend effect but with the ''elm_transit_effect_flip_add()''
+by indicating the flipping axis and the flipping direction (''EINA_TRUE'' is
+clock-wise):
+
+<code c>
+static void
+flip_cb(void *data, Evas_Object *obj, void *event_info)
+{
+ Navi *navis = data;
+ Evas_Object *navi=navis->navi;
+ Evas_Object *navi2=navis->navi2;
+ Elm_Transit *transit = elm_transit_add();
+
+ elm_transit_object_add(transit, navi);
+ elm_transit_object_add(transit, navi2);
+ elm_transit_effect_flip_add(transit, ELM_TRANSIT_EFFECT_FLIP_AXIS_X,
EINA_TRUE);
+ elm_transit_duration_set(transit, 3.0);
+ elm_transit_objects_final_state_keep_set(transit, EINA_TRUE);
+ elm_transit_go(transit);
+}
+</code>
+
+=== Implementing the Resizable Flip Effect ===
+
+{{ :transit_resizeflip.gif }}
+
+Similarly to the blend effect but with the ''elm_transit_effect_flip_add()''
+by indicating the flipping axis and the flipping direction (''EINA_TRUE'' is
+clock-wise):
+
+<code c>
+static void
+resizable_flip_cb(void *data, Evas_Object *obj, void *event_info)
+{
+ Navi *navis = data;
+ Evas_Object *navi=navis->navi;
+ Evas_Object *navi2=navis->navi2;
+ Elm_Transit *transit = elm_transit_add();
+
+ elm_transit_object_add(transit, navi);
+ elm_transit_object_add(transit, navi2);
+ elm_transit_effect_resizable_flip_add(transit,
ELM_TRANSIT_EFFECT_FLIP_AXIS_Y, EINA_TRUE);
+ elm_transit_duration_set(transit, 3.0);
+ elm_transit_objects_final_state_keep_set(transit, EINA_TRUE);
+ elm_transit_go(transit);
+}
+</code>
+\\
+//**__The whole code__: **//{{code_c/tutorial/effects/transit.c}}
diff --git a/pages/tutorial/effects/elementary_animations/wipe.txt
b/pages/tutorial/effects/elementary_animations/wipe.txt
new file mode 100644
index 0000000..c02617d
--- /dev/null
+++ b/pages/tutorial/effects/elementary_animations/wipe.txt
@@ -0,0 +1,61 @@
+~~Title: Elementary Animations - Creating a Wipe Effect~~
+//**__previous page__:
**//[[/tutorial/effects/elementary_animations/flipy|Creating a Flip on y Axis]]
+=== Elementary Animations ===
+==== Creating a Wipe Effect ====
+
+The wipe transition is applied on an Evas object considering the wipe type and
+the direction. Use ''ELM_TRANSIT_EFFECT_WIPE_TYPE_HIDE'' to hide the button,
+and ''ELM_TRANSIT_EFFECT_WIPE_DIR_RIGHT'' to do it from left to right.
+
+{{ :elementary_animations_wipe.gif }}
+
+The wipe animation button is as follows:
+
+<code c>
+// The wipe button
+Evas_Object *btn_wipe = elm_button_add(win);
+elm_object_text_set(btn_wipe, "Wipe");
+evas_object_size_hint_weight_set(btn_wipe, EVAS_HINT_FILL, EVAS_HINT_FILL);
+evas_object_show(btn_wipe);
+evas_object_smart_callback_add(btn_wipe, "clicked", _btn_wipe_cb, &anim);
+elm_box_pack_end(right_vbox, btn_wipe);
+</code>
+
+The wipe button callback looks like:
+
+<code c>
+static void
+_btn_wipe_cb(void *data, Evas_Object *btn, void *ev)
+{
+ Animations *anim = (Animations *)data;
+
+ // Starting the rotation effect 360 degrees
+ //evas_object_resize(anim->button, 100, 50);
+ // Setting the button text
+ elm_object_text_set(anim->button, "Wipe");
+ _wipe_effect(anim->button);
+}
+</code>
+
+The animation function calls ''elm_transit_effect_wipe_add'' with
+''ELM_TRANSIT_EFFECT_WIPE_TYPE_HIDE'' as the second parameter to hide the
button
+and ''ELM_TRANSIT_EFFECT_WIPE_DIR_RIGHT'' as last parameter to set the
direction
+(left to right).
+
+<code c>
+static void
+_wipe_effect(Evas_Object *obj)
+{
+ Elm_Transit *trans;
+
+ trans = elm_transit_add();
+ elm_transit_object_add(trans, obj);
+ elm_transit_effect_wipe_add(trans, ELM_TRANSIT_EFFECT_WIPE_TYPE_HIDE,
ELM_TRANSIT_EFFECT_WIPE_DIR_RIGHT);
+ elm_transit_duration_set(trans, 3.0);
+ elm_transit_go(trans);
+}
+</code>
+\\
+//**__The whole code__: **//{{code_c/tutorial/effects/elementary_animations.c}}
+\\
+//**__next page__:
**//[[/tutorial/effects/elementary_animations/transit|Implementing Elementary
Transit Effects]]
diff --git a/pages/tutorial/effects/elementary_animations/zoom.txt
b/pages/tutorial/effects/elementary_animations/zoom.txt
new file mode 100644
index 0000000..df308b5
--- /dev/null
+++ b/pages/tutorial/effects/elementary_animations/zoom.txt
@@ -0,0 +1,54 @@
+~~Title: Elementary Animations - Creating a Zoom Effect~~
+//**__previous page__:
**//[[/tutorial/effects/elementary_animations/rotation|Creating a Rotation
Effect]]
+=== Elementary Animations ===
+==== Creating a Zoom Effect ====
+
+The zoom effect zooms on the animation target to make it twice bigger. Store
+the source rate and the destination rate in the application data using
+''anim->zfrom'' and ''anim->zto''.
+
+{{ :elementary_animations_zoom.gif }}
+
+Create the button and add it to the center column.
+
+<code c>
+// The zoom button
+Evas_Object *btn_zoom = elm_button_add(win);
+elm_object_text_set(btn_zoom, "Zoom");
+evas_object_size_hint_weight_set(btn_zoom, EVAS_HINT_FILL, EVAS_HINT_FILL);
+evas_object_show(btn_zoom);
+evas_object_smart_callback_add(btn_zoom, "clicked", _btn_zoom_cb, &anim);
+elm_box_pack_end(right_vbox, btn_zoom);
+</code>
+
+Then add a callback function in order to perform the animation.
+<code c>
+static void _btn_zoom_cb(void *data, Evas_Object *btn, void *ev)
+{
+ Animations *anim = (Animations *)data;
+
+ // Starting the rotation effect 360 degrees
+ //evas_object_resize(anim->button, 100, 50);
+ elm_object_text_set(anim->button, "Zoom");
+ _zoom_effect(anim->button, *(anim->zfrom), *(anim->zto));
+}
+</code>
+
+To create the zoom effect, use ''elm_transit_effect_zoom_add'' with the start
+rate and the destination rate stored in application data (''anim->zfrom'' and
+''anim->zto'')
+
+<code c>
+static void
+_zoom_effect(Evas_Object *obj, float from, float to)
+{
+ Elm_Transit *trans = elm_transit_add();
+ elm_transit_object_add(trans, obj);
+
+ elm_transit_effect_zoom_add(trans, from, to);
+ elm_transit_duration_set(trans, 2.0);
+ elm_transit_go(trans);
+}
+</code>
+\\
+//**__next page__: **//[[/tutorial/effects/elementary_animations/flip|Creating
a Flip Effect]]
diff --git a/pages/tutorial/effects_tutorial.txt
b/pages/tutorial/effects_tutorial.txt
new file mode 100644
index 0000000..42dacda
--- /dev/null
+++ b/pages/tutorial/effects_tutorial.txt
@@ -0,0 +1,68 @@
+~~Title: Animation and Effect Types~~
+==== Animation and Effect Types: Using Various Effect and Effect Types ====
+
+The animation and effect tutorials demonstrate how to create and implement a
+variety of animation effects with EFL and Elementary.
+
+----
+==== Ecore Animator: Creating Ecore Animations ====
+
+This tutorial demonstrates how you can use Ecore animators to simplify the
+creation of animations. Using Ecore animators, you can manually create your
+own animations by changing and manipulating Evas object attributes. Ecore
+animators work like timers, running callback functions over a given duration
+(an animation timeline).
+
+=== Table of Contents ===
+
+ * [[/tutorial/effects/ecore_animator/setting_up|Setting up the application]]
+ * [[/tutorial/effects/ecore_animator/rotation|Creating a rotation effect]]
+ * [[/tutorial/effects/ecore_animator/zoom|Creating a zoom effect]]
+ * [[/tutorial/effects/ecore_animator/3d_rotation|Creating a 3D rotation
effect]]
+ * [[/tutorial/effects/ecore_animator/drop_bounce|Creating drop and bounce
effects]]
+
+Ecore Animator Example : {{ :ecore_animator.gif }}
+\\
+//**__The Whole Code__: **//{{code_c/tutorial/effects/ecore_animator.c}}
+
+----
+==== Edje Animation: Using the Edje Library to Create Animations ====
+
+One of the greatest strengths of EFL and Edje is the ability to create
+animations. This tutorial demonstrates how to use the Edje library to create
+your own animations.
+
+=== Table of Contents ===
+
+ * [[/tutorial/effects/edje_animation/start_up|Animating on Application
Start-up]]
+ * [[/tutorial/effects/edje_animation/on_click|Animating Object on Click]]
+
+{{ :edje_animation_rotate.gif }}
+\\
+//**__The Whole Code__:
+**//{{code_c/tutorial/effects/edje_animation.c}}
{{code_c/tutorial/effects/edje_animation.edc}}
+
+
+----
+==== Elementary Animations: Applying Transition Effects to an Evas Object ====
+
+This tutorial demonstrates how you can use Elm Transit to create animated
+transitions effects, such as rotation, wiping, zooming, resizing, and fading,
+to an ''Evas_Object''.
+
+=== Table of Contents ===
+
+ * [[/tutorial/effects/elementary_animations/setting_up|Setting Up the
Application]]
+ * [[/tutorial/effects/elementary_animations/rotation|Creating a Rotation
Effect]]
+ * [[/tutorial/effects/elementary_animations/zoom|Creating a Zoom Effect]]
+ * [[/tutorial/effects/elementary_animations/flip|Creating a Flip Effect]]
+ * [[/tutorial/effects/elementary_animations/blend|Creating a Blend
Transition]]
+ * [[/tutorial/effects/elementary_animations/fade|Creating a Fade Effect]]
+ * [[/tutorial/effects/elementary_animations/flipy|Creating a Flip on y Axis]]
+ * [[/tutorial/effects/elementary_animations/wipe|Creating a Wipe Effect]]
+ * [[/tutorial/effects/elementary_animations/transit|Implementing Elementary
Transit Effects]]
+
+
+Elementary Animations example: {{ :transit_rotate.gif }}
+\\
+//**__The Whole Codes__:
**//{{code_c/tutorial/effects/elementary_animations.c}}
{{code_c/tutorial/effects/transit.c}}
--
