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