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.
First create an application using Basic EDC UI Application:
#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()
Animations can be run at application startup. By default the Basic EDC UI Application model produces an empty window with a title.
In this example an image is added to the window and the behavior of the window title is changed.
Add the image to the Edje images collection.
images { image: "image1.png" COMP; image: "image2.png" COMP; }
Then add an Edje part using the small image: this part has two states. This is
the first important notion for animations. The STATE
describes the
appearance of a part: size, position, color, etc.
In this example, the part has two states, default and down-state:
part { name: "image1"; type: IMAGE; description { state: "default" 0.0; max: 63 63; min: 63 63; image { normal: "image1.png"; } rel1.relative: 0.2 0.0; rel2.relative: 0.0 0.0; } description { state: "down-state" 1.0; inherit: "default" 0.0; rel1.relative: 0.2 0.92; rel2.relative: 0.05 1.0; } }
The logo part has the IMAGE type. The default state contains in the first description of the part sets:
The second state, âdown-stateâ
, inherits all of the default's attributes, and
only changes the position to put the image at the bottom of the application
window.
These two states are the start and end states of the animation. To actually
create the animation, add a program to the Edge programs
collection.
// Icon drop animation program { name: "animation,state1"; source: ""; signal: "load"; action: STATE_SET "down-state" 1.0; target: "logo"; transition: BOUNCE 2.5 0.0 5.0; }
This program is named animation,state1
and is started when the application
receives the load
signal immediately on startup. It runs the STATE_SET
action so it changes the object state from âdefaultâ
to âdown-stateâ
. The target
of the program is the image part
.
In order to switch from one state to another, it uses a transition
of the
BOUNCE
type with three parameters, the first one is saying how much time
the transition will last, the second one is the factor of curviness and the
last one is saying how many times and object will bounce.
This produces an falling and bouncing effect.
Also add an animation for the window title to make it move from the right to the left with a bounce effect while growing the font size.
Create a new state on the part called âtxt_titleâ inside which both the font size and position are changed.
part { name: "txt_title"; type: TEXT; mouse_events: 0; // The default State description { state: "default" 0.0; align: 0.0 0.0; rel1 { relative: 0.5 0.0; } rel2 { relative: 1.0 0.5; } text { font: "Sans"; size: 22; text: "edje animation"; } color: 0 0 0 255; } // The "Bigger" state description { state: "Bigger" 0.0; align: 0.0 0.0; rel1 { relative: 0.0 0.0; } rel2 { relative: 1.0 0.2; } text { size: 26; text: "animation terminated"; } color: 0 0 0 255; } }
Create a program to animate this part on startup, just like the small image.
// Make the title bigger program { name: "animation,bigtitle"; source: ""; signal: "load"; action: STATE_SET "Bigger" 1.0; target: "txt_title"; transition: LINEAR 5.0; }
This program goes from the default state to the bigger state in five seconds
with a LINEAR
effect, automatically running on the application startup.
next page__: **Animating Object on Click