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 000000000..0ce87b94c --- /dev/null +++ b/media/code_c/tutorial/effects/ecore_animator.c @@ -0,0 +1,177 @@ +#include + +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 000000000..5a3101e4f --- /dev/null +++ b/media/code_c/tutorial/effects/edje_animation.c @@ -0,0 +1,37 @@ +#include + +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 000000000..8d1067496 --- /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 000000000..e395757d1 --- /dev/null +++ b/media/code_c/tutorial/effects/elementary_animations.c @@ -0,0 +1,376 @@ +#include + +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 000000000..6cc74c906 --- /dev/null +++ b/media/code_c/tutorial/effects/transit.c @@ -0,0 +1,248 @@ +#include + +/* 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 000000000..a93777636 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 000000000..df3b7341f 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 000000000..8b6c9afe0 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 000000000..085e5868c 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 000000000..be495ede0 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 000000000..f86711e99 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 000000000..8b55cfbda 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 000000000..579e51027 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 000000000..a9330b775 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 000000000..f67dafba1 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 000000000..22f94e14d 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 000000000..d3e82c97a 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 000000000..cbb3a5a79 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 000000000..051e18a84 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 000000000..3f7a1fb64 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 000000000..9c6b17b45 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 000000000..d90147c22 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 000000000..ecb0e8c5c 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 000000000..8fbb34a35 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 000000000..04a9fe1e9 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 000000000..13db5a07f 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 000000000..d131a4e99 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 000000000..6cf84fdb7 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 000000000..22b68cda9 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 000000000..af490780b Binary files /dev/null and b/media/transit_zoom.gif differ diff --git a/pages/docs.txt b/pages/docs.txt index 133c78198..9e89660e0 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 000000000..212b4c42f --- /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: + + +// 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); +} + + +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. + + +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; +} + + +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 000000000..fe0c33f74 --- /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()'': + + +//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); + + +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: + + +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; +} + + +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: + + +frame = ecore_animator_pos_map(pos, ECORE_POS_MAP_BOUNCE, 2, 4); + +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 000000000..8fdbf3369 --- /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: + + +// 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); + + +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. + + +static void +_btn_rotate_cb(void *data, Evas_Object *btn, void *ev) +{ + Evas_Object *target = data; + ecore_animator_timeline_add(1, _do_rotate, target); +} + + +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. + + +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; +} + + +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: + + +// 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); + + +Now the ''evas_map_util_rotate()'' function defines the rotation: + + +// 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)); + + +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. + + +// 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); + + +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: + +// Free used memory +evas_map_free(m); + + +\\ +//**__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 000000000..20179ef84 --- /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: + + +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() + + +Then the actual widgets are created, starting with the main window and +application title: + + +//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); + + +Next, we create the animation target, which is an Evas object of type +Elm_Image. + + +// 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); + + +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 000000000..704ab4727 --- /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()'': + + +// 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); + + +Then, the button callback function is created with a new timeline: + + +static void _btn_zoom_cb(void *data, Evas_Object *btn, void *ev) +{ + Evas_Object *target = data; + ecore_animator_timeline_add(1, _do_zoom, target); +} + + +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: + + +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; +} + +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 000000000..269a0c9f6 --- /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. + + +// 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; +} + + +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. + + +// 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; + } +} + + +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. + + +// 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"; + } +} + + +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()''. + + +// 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); + + +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'': + + +// 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; } + } +} + + +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. + + +// 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 */ +} + + +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°. + + +description +{ + state: "rotate" 1.0; + inherit: "rotate" 0.0; + map.rotation.z: 360; +} + + +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. + + + +// 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; + } +} + + +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. + + +// 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"; +} + + +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''. + + +// Rotate 360° +program +{ + name: "rotate,target,2"; + action: STATE_SET "rotate" 1.0; + target: "atarget"; + transition: SIN 0.7; + after: "rotate,end"; +} + + +This program sets the part state to ''rotate 1.0'' in 0.7 seconds, and when done +calls the next one ''rotate,end''. + + +// Go back to the normal. +program +{ + name: "rotate,end"; + action: STATE_SET "rotate" 0.0; + target: "atarget"; + transition: LINEAR 0.2; +} + + +''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 }} + + +// 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; +} + + +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. + + +// 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/pages/tutorial/effects/edje_animation/start_up.txt b/pages/tutorial/effects/edje_animation/start_up.txt new file mode 100644 index 000000000..f6c996258 --- /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: + + +#include + +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() + + +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. + +images +{ + image: "image1.png" COMP; + image: "image2.png" COMP; +} + + +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: + + +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; + } +} + + +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. + + +// 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; +} + + +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. + + +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; + } +} + + +Create a program to animate this part on startup, just like the small image. + + +// Make the title bigger +program +{ + name: "animation,bigtitle"; + source: ""; + signal: "load"; + action: STATE_SET "Bigger" 1.0; + target: "txt_title"; + transition: LINEAR 5.0; +} + +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 000000000..672164fee --- /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: + + +// 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 blend transition callback is: + +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); +} + + +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. + +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); +} + +\\ +//**__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 000000000..a8592acdf --- /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: + + + // 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); + + +Then add the button's callback: + + +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); +} + + +The animation function calls ''elm_transit_effect_fade_add'' instead of +''elm_transit_effect_blend_add''. + + +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); +} + +\\ +//**__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 000000000..1536b191e --- /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: + + +// 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 corresponding callback to create and start the animation with the two +objects (target button and back button) to animate is like follows. + + +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); +} + + +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. + + +_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); +} + +\\ +//**__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 000000000..5cfed99a8 --- /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: + + +// 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 flip on y button callback looks like: + +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); +} + + +The animation function: + +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); +} + +\\ +//**__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 000000000..63df325de --- /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. + + +// 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); + + +In the rotate button callback, call the effect function with the target button +as first parameter and the rotation angle as the second one. + + +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)); +} + + +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. + + +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); +} + +\\ +//**__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 000000000..218adc308 --- /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''. + + +typedef struct _Animations{ + Evas_Object *button; + Evas_Object *buttonbck; + float *rt_angle; + float *zto; + float *zfrom; +} Animations; + + +Then create a basic application with the widgets we need: + +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() + + + +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''). + + +//set the values for animations +rt_angle = 360.0; +zfrom = 1.0; +zto = 2.0; + + +Add a label title to the main window, then create the animation target button +and the back button. + + +/* 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 }; + + +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. + + +// 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); + + +Then create the first action button for the resize effect. + + +// 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 + + +''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. + + +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); +} + + +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. + + +Animation * anim = (Animation *)data; + + +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: + + +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); +} + + +Create an ''Elm_Transit *'' object representing the transition. + + +Elm_Transit *trans = elm_transit_add(); + + +Then add the target object to the transition + + +elm_transit_object_add(trans, obj); + + +Add a resizing transition to the object with the origin and destination width +and height in pixels. + + +elm_transit_effect_resizing_add(trans, 100, 50, 300, 150); + + +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''. + + +elm_transit_duration_set(trans, 3.0); + + +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. + + +elm_transit_go(trans); + + +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 000000000..6a0a16035 --- /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. + + +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() + + +The Navi structure is used to store the naviframe pointeurs in order to pass +them in data pointeur as a parameter in callback functions. + + +/* store naviframe pointeurs */ +typedef struct _Navi +{ + Evas_Object *navi; + Evas_Object *navi2; +} Navi; + + +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. + + +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); +} + + +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: + + +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); +} + + +=== 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. + + +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); +} + + +=== 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. + + +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); +} + + +=== 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. + + +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); +} + + +=== 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): + + +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); + +} + + + +=== Implementing the Fade Effect === + +{{ :transit_fade.gif }} + +Similarly to the blend effect but with the ''elm_transit_effect_fade_add()'': + + +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); + +} + + +=== 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): + + +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); +} + + +=== 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): + + +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); +} + +\\ +//**__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 000000000..c02617d84 --- /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: + + +// 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); + + +The wipe button callback looks like: + + +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); +} + + +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). + + +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); +} + +\\ +//**__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 000000000..df308b5bb --- /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. + + +// 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); + + +Then add a callback function in order to perform the animation. + +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)); +} + + +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'') + + +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); +} + +\\ +//**__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 000000000..42dacda68 --- /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}}