[UI Sample] Animation Sample Overview
The [UI Sample] Animation sample application demonstrates how to animate an object in the EDC view using an EDC context, such as transition.
The sample uses UI components, such as elm_conformant, for view management, containers, such as elm_layout, for UI component management inside the view, and the RECT type (an EDC keyword) for the contents of the EDC view.
The following figure illustrates the [UI Sample] Animation main screen, its wireframe structure, and the UI component tree.
Figure: [UI Sample] Animation main screen
Application Layout
The create_base_gui() function creates the window, conformant, and layout. The EDC file is then inserted into the layout.
static void
create_base_gui(appdata_s *ad)
{
char edj_path[PATH_MAX] = {0, };
// Create window
ad->win = elm_win_util_standard_add(PACKAGE, PACKAGE);
elm_win_conformant_set(ad->win, EINA_TRUE);
elm_win_autodel_set(ad->win, EINA_TRUE);
if (elm_win_wm_rotation_supported_get(ad->win))
{
int rots[4] = { 0, 90, 180, 270 };
elm_win_wm_rotation_available_rotations_set(ad->win, (const int *)(&rots), 4);
}
evas_object_smart_callback_add(ad->win, "delete,request", win_delete_request_cb, NULL);
// Create conformant
ad->conform = elm_conformant_add(ad->win);
elm_win_indicator_mode_set(ad->win, ELM_WIN_INDICATOR_SHOW);
elm_win_indicator_opacity_set(ad->win, ELM_WIN_INDICATOR_OPAQUE);
evas_object_size_hint_weight_set(ad->conform, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
elm_win_resize_object_add(ad->win, ad->conform);
evas_object_show(ad->conform);
// Create base layout
app_get_resource(EDJ_FILE, edj_path, (int)PATH_MAX);
ad->layout = elm_layout_add(ad->win);
elm_layout_file_set(ad->layout, edj_path, GRP_MAIN);
evas_object_size_hint_weight_set(ad->layout, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
eext_object_event_callback_add(ad->layout, EEXT_CALLBACK_BACK, layout_back_cb, ad);
elm_object_content_set(ad->conform, ad->layout);
// Show the window after the base GUI is set up
evas_object_show(ad->win);
}
EDC View
The following figure illustrates the EDC view wireframe and tree structure.
Figure: EDC view
The animation.edc file is used to move a rectangle (part_one) with the EDC transition property specified in a program block. The file uses 3 programs to move the rectangle.
The following code is the entire EDC script of the animation.edc file:
collections
{
group
{
name: "main";
parts
{
part
{
name: "part_one";
type: RECT;
scale: 1;
description
{
state: "default" 0.0;
rel1.relative: 0.0 0.0;
rel2.relative: 1.0 1.0;
color: 0 0 255 128;
}
description
{
state: "scale_down" 0.0;
inherit: "default" 0.0;
min: 100 100;
rel1.relative: 0.5 0.5;
rel2.relative: 0.5 0.5;
color: 0 0 255 50;
}
description
{
state: "move" 0.0;
inherit: "default" 0.0;
min: 100 100;
rel1.relative: 0.5 0.2;
rel2.relative: 0.5 0.2;
color: 0 0 255 50;
}
}
}
programs
{
program
{
signal: "load";
after: "scale_down_animation";
}
program
{
name: "scale_down_animation";
signal: "animation,start";
action: STATE_SET "scale_down" 0.0;
target: "part_one";
transition: LINEAR 3.0;
after: "move_animation";
}
program
{
name: "move_animation";
signal: "animation,start";
action: STATE_SET "move" 0.0;
target: "part_one";
transition: ACCELERATE 1.0;
}
}
}
}
The parts block consists of a single part, which is the rectangle (RECT) used to illustrate scaling and moving animations. The part has 3 description elements for changing its state: default, scale_down, and move. Each description defines a set of properties for changing the shape and position of the rectangle through animation. The scale_down state defines a smaller size for the rectangle, and the move state defines a new position for the rectangle.
The animations are defined in the programs block. The first program block is used to call the second program block, named scale_down_animation. The after keyword is used to call the scale_down_animation operation.
The scale_down_animation operation is defined with the following properties: signal, action, target, and transition. To use the animation, signal is set to animation,start, which generates the signal for the animation, and action is set to STATE_SET "scale_down" 0.0, which means that the state of the target object changes to scale_down in the animation. The target property defines the target object of the animation, which is the part_one rectangle. The transition property defines the animation type. In this example, the type is set to LINEAR 3.0, which means that the state of the target object changes linearly over a period of 3 seconds.
The following figure shows the result of the scale_down_animation operation, which transitions the rectangle from the default state (left) to the scale_down state (right). The size and color of the rectangle are changed.
Figure: Scale down animation
The move_animation operation moves the rectangle from the center of the view to the top. In the animation, the action property is set to STATE_SET "move" 0.0, which changes the state of the rectangle to move, and transition is set to ACCELERATE 1.0, which moves the rectangle with acceleration over a period of 1 second.
The following figure shows the result of the move_animation operation.
Figure: Move animation
