Использование анимации
Создание анимации
Использование объекта Animator позволяет осуществлять изменения объектов на экране через определенные промежутки времени. Объект Animator похож на объект Timer, но, в отличие от таймера он позволяет реализовывать различные эффекты. Давайте поговорим об использовании элемента управления GenList в следующем примере.
Создайт новый проект 'AnimatorSample'. Внесите следующие изменения в начале файла исходного кода.
typedef struct appdata {
Evas_Object *win;
Evas_Object *conform;
Evas_Object *label;
Evas_Object *rect1;
Evas_Object *rect2;
} appdata_s;
Eina_Bool anim_continue = ECORE_CALLBACK_RENEW;
Ecore_Pos_Map pos_map = ECORE_POS_MAP_LINEAR;
Добавьте код в функцию create_base_gui().
/* 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);*/ /* Label*/ /*ad->label = elm_label_add(ad->conform); elm_object_text_set(ad->label, "Hello EFL"); evas_object_size_hint_weight_set(ad->label, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND); elm_object_content_set(ad->conform, ad->label); evas_object_show(ad->label);*/ /* Evas */ Evas *evas = evas_object_evas_get(ad->win); /* Rect-1 */ ad->rect1 = evas_object_rectangle_add(evas); evas_object_pass_events_set(ad->rect1, EINA_TRUE); evas_object_color_set(ad->rect1, 0, 0, 160, 160); evas_object_resize(ad->rect1, 50, 50); evas_object_show(ad->rect1); /* Animation-1 */ Ecore_Animator *anim = ecore_animator_add(on_next_frame1, ad->rect1); ecore_animator_frametime_set(1. / 60); /* Show window after base gui is set up */ evas_object_show(ad->win);
Добавьте объект Evas для создания объекта Rectangle.
ecore_animator_add(Ecore_Task_Cb, void *) - это API, который создает объект Animator. Временные интервалы задаются в секундах. Добавьте функцию выше create_base_gui() .
static Eina_Bool on_next_frame1(void *data)
{
static int x = 0;
if (x >= 350)
x = 0;
evas_object_move(data, x += 2, 50);
return anim_continue;
}
evas_object_move() - это API, который изменяет положение объета на экране.
Запустите пример.
Остановка анимации
Для остановки анимации функция-обработчик события кадра должна возвращать значение ECORE_CALLBACK_CANCEL. Добавьте функцию выше create_base_gui().
static void
my_table_pack(Evas_Object *table, Evas_Object *child, int x, int y, int w, int h)
{
evas_object_size_hint_align_set(child, EVAS_HINT_FILL, 0.5);
evas_object_size_hint_weight_set(child, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
elm_table_pack(table, child, x, y, w, h);
evas_object_show(child);
}
Добавьте код в функцию create_base_gui().
/* Rect-1 */
ad->rect1 = evas_object_rectangle_add(evas);
evas_object_pass_events_set(ad->rect1, EINA_TRUE);
evas_object_color_set(ad->rect1, 0, 0, 160, 160);
evas_object_resize(ad->rect1, 50, 50);
evas_object_show(ad->rect1);
{
/* Box to put the table in so we can bottom-align the table
* window will stretch all resize object content to win size */
Evas_Object *box = elm_box_add(ad->win);
evas_object_size_hint_weight_set(box, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
elm_win_resize_object_add(ad->win, box);
evas_object_show(box);
/* Table */
Evas_Object *table = elm_table_add(ad->win);
/* Make table homogenous - every cell will be the same size */
elm_table_homogeneous_set(table, EINA_TRUE);
/* Set padding of 10 pixels multiplied by scale factor of UI */
elm_table_padding_set(table, 20 * elm_config_scale_get(), 10 * elm_config_scale_get());
/* Let the table child allocation area expand within in the box */
evas_object_size_hint_weight_set(table, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
/* Set table to fiill width but align to bottom of box */
evas_object_size_hint_align_set(table, EVAS_HINT_FILL, 1.0);
elm_box_pack_end(box, table);
evas_object_show(table);
{
/* Button-1 */
Evas_Object *btn = elm_button_add(ad->win);
elm_object_text_set(btn, "■");
evas_object_smart_callback_add(btn, "clicked", btn_stop_cb, NULL);
my_table_pack(table, btn, 0, 0, 2, 1);
}
}
evas_object_raise(ad->rect1);
/* Animation-1 */
Ecore_Animator *anim = ecore_animator_add(on_next_frame1, ad->rect1);
evas_object_raise() - это API, который перемещает объекты в самый верх экрана. Добавьте обработчик нажатия кнопки выше функции create_base_gui().
static void
btn_stop_cb(void *data, Evas_Object *obj, void *event_info)
{
anim_continue = ECORE_CALLBACK_CANCEL;
}
Запустите пример.
Приостановка/возобновление анимации с помощью таймера
Для приостановки анимации, вам нужно использоваться функцией ecore_animator_freeze(). Для возобновления анимации, вам нужно использовать функцию ecore_animator_thaw(). Добавьте новый код в функции create_base_gui (). Этот код создает два таймера.
/* Animation-1 */ Ecore_Animator *anim = ecore_animator_add(on_next_frame1, ad->rect1); /* add 2 timers to go off every 6 seconds */ ecore_timer_add(6, freeze_anim, anim); Ecore_Timer *timer = ecore_timer_add(6, thaw_anim, anim); /* delay the last timer by 3 seconds so the 2 timers are offset */ ecore_timer_delay(timer, 3);
Добавьте две функции выше create_base_gui().
static Eina_Bool freeze_anim(void *data)
{
ecore_animator_freeze(data);
// Animation stop Timer delete
return ECORE_CALLBACK_CANCEL;
}
static Eina_Bool thaw_anim(void *data)
{
ecore_animator_thaw(data);
// Animation restart Timer delete
return ECORE_CALLBACK_CANCEL;
}
ecore_animator_freeze(Ecore_Animator *) - это API, который приостанавливает анимацию
ecore_animator_thaw(Ecore_Animator *) - это API, который возобновляет.
Запустите пример
Временная шкала анимации
В этом разделе мы поговорим о реализации анимации, воспроизводящейся заданные промежуток времени. Добавьте код в функцию create_base_gui().
/* Rect-1 */
ad->rect1 = evas_object_rectangle_add(evas);
evas_object_pass_events_set(ad->rect1, EINA_TRUE);
evas_object_color_set(ad->rect1, 0, 0, 160, 160);
evas_object_resize(ad->rect1, 50, 50);
evas_object_show(ad->rect1);
/* Rect-2 */
ad->rect2 = evas_object_rectangle_add(evas);
evas_object_pass_events_set(ad->rect2, EINA_TRUE);
evas_object_color_set(ad->rect2, 0, 55, 0, 160);
evas_object_resize(ad->rect2, 50, 50);
evas_object_show(ad->rect2);
{
~
}
evas_object_raise(ad->rect1);
evas_object_raise(ad->rect2);
/* Animation-1 */
Ecore_Animator *anim = ecore_animator_add(on_next_frame1, ad->rect1);
/* add 2 timers to go off every 6 seconds */
ecore_timer_add(6, freeze_anim, anim);
Ecore_Timer *timer = ecore_timer_add(6, thaw_anim, anim);
/* delay the last timer by 3 seconds so the 2 timers are offset */
ecore_timer_delay(timer, 3);
/* Animation-2 */
ecore_animator_timeline_add(4, on_next_frame2, ad->rect2);
/* Show window after base gui is set up */
evas_object_show(ad->win);
ecore_animator_timeline_add(double, Ecore_Timeline_Cb, void *) - это API, который создает объект TimeLine анимации. Добавьте код выше функции create_base_gui().
static Eina_Bool on_next_frame2(void *data, double pos)
{
double frame = ecore_animator_pos_map(pos, pos_map, 1.2, 15);
evas_object_resize(data, 50 * (1 + frame * 2), 50 * (1 + frame * 2));
evas_object_move(data, 200 * frame, 200 * frame + 100);
evas_object_color_set(data, 255 * frame, 0, 255 * (1 - frame), 255);
return ECORE_CALLBACK_RENEW;
}
ecore_animator_pos_map() - это API, который возвращает результирующее значение, которое характеризует текущее состояние анимации. Изменяется от 0 до 1.
Запустите пример.
Добавление ускорения к временной шкале анимации
Добавьте код в функцию create_base_gui().
/* Button-1 */ Evas_Object *btn = elm_button_add(ad->win); elm_object_text_set(btn, "■"); evas_object_smart_callback_add(btn, "clicked", btn_stop_cb, NULL); my_table_pack(table, btn, 0, 0, 2, 1); /* Button-2 */ btn = elm_button_add(ad->win); elm_object_text_set(btn, "Accelerate"); evas_object_smart_callback_add(btn, "clicked", btn_accelerate_cb, ad->rect2); my_table_pack(table, btn, 0, 1, 1, 1); } }
Добавьте обработчик нажатия кнопки выше функции create_base_gui().
static void
btn_accelerate_cb(void *data, Evas_Object *obj, void *event_info)
{
pos_map = ECORE_POS_MAP_ACCELERATE;
ecore_animator_timeline_add(4, on_next_frame2, data);
}
Запустите пример
Другие стили анимации
Добавьте коды создания кнопок в функцию create_base_gui().
/* Button-2 */ btn = elm_button_add(ad->win); elm_object_text_set(btn, "Accelerate"); evas_object_smart_callback_add(btn, "clicked", btn_accelerate_cb, ad->rect2); my_table_pack(table, btn, 0, 1, 1, 1); /* Button-3 */ btn = elm_button_add(ad->win); elm_object_text_set(btn, "Decelerate"); evas_object_smart_callback_add(btn, "clicked", btn_decelerate_cb, ad->rect2); my_table_pack(table, btn, 1, 1, 1, 1); /* Button-4 */ btn = elm_button_add(ad->win); elm_object_text_set(btn, "Sinusoidal"); evas_object_smart_callback_add(btn, "clicked", btn_sinusoidal_cb, ad->rect2); my_table_pack(table, btn, 0, 2, 1, 1); /* Button-5 */ btn = elm_button_add(ad->win); elm_object_text_set(btn, "Bounce"); evas_object_smart_callback_add(btn, "clicked", btn_bounce_cb, ad->rect2); my_table_pack(table, btn, 1, 2, 1, 1); /* Button-6 */ btn = elm_button_add(ad->win); elm_object_text_set(btn, "Spring"); evas_object_smart_callback_add(btn, "clicked", btn_spring_cb, ad->rect2); my_table_pack(table, btn, 0, 3, 1, 1); } }
Добавьте четыре обработчика нажатия кнопок выше функции create_base_gui().
static void
btn_decelerate_cb(void *data, Evas_Object *obj, void *event_info)
{
pos_map = ECORE_POS_MAP_DECELERATE;
ecore_animator_timeline_add(4, on_next_frame2, data);
}
static void
btn_sinusoidal_cb(void *data, Evas_Object *obj, void *event_info)
{
pos_map = ECORE_POS_MAP_SINUSOIDAL;
ecore_animator_timeline_add(4, on_next_frame2, data);
}
static void
btn_bounce_cb(void *data, Evas_Object *obj, void *event_info)
{
pos_map = ECORE_POS_MAP_BOUNCE;
ecore_animator_timeline_add(4, on_next_frame2, data);
}
static void
btn_spring_cb(void *data, Evas_Object *obj, void *event_info)
{
pos_map = ECORE_POS_MAP_SPRING;
ecore_animator_timeline_add(4, on_next_frame2, data);
}
Запустите пример
Непрерывные анимации
Добавьте код в функцию create_base_gui().
/* Button-6 */ btn = elm_button_add(ad->win); elm_object_text_set(btn, "Spring"); evas_object_smart_callback_add(btn, "clicked", btn_spring_cb, ad->rect2); my_table_pack(table, btn, 0, 3, 1, 1); /* Button-7 */ btn = elm_button_add(ad->win); elm_object_text_set(btn, "Twice"); evas_object_smart_callback_add(btn, "clicked", btn_twice_cb, ad->rect2); my_table_pack(table, btn, 1, 3, 1, 1); } }
Добавьте обработчики событий выше функции create_base_gui().
static Eina_Bool
start_second_anim(void *data)
{
pos_map = ECORE_POS_MAP_SPRING;
ecore_animator_timeline_add(4, on_next_frame2, data);
return ECORE_CALLBACK_CANCEL;
}
static void
btn_twice_cb(void *data, Evas_Object *obj, void *event_info)
{
pos_map = ECORE_POS_MAP_ACCELERATE;
ecore_animator_timeline_add(4, on_next_frame2, data);
ecore_timer_add(4, start_second_anim, data);
}
Запустите пример
