Окна анимации в AWTK

Окна анимации — это одна из основных функций современного графического интерфейса (GUI). Они позволяют сделать процесс открытия и закрытия окон более плавным и приятным для пользователя. Принцип работы оконной анимации довольно прост: при открытии или закрытии окна два изображения окна предварительно рисуются на двух отдельных изображениях в памяти, а затем эти изображения отображаются по определённому правилу, создавая эффект анимации.

1. Введение

Само окно должно только указать желаемый тип анимации, а менеджер окон отвечает за создание оконной анимации и отображение её на экране в нужное время, например, при открытии и закрытии окна. Во время анимации менеджер окон запрещает рисование самого окна и игнорирует все входные события. В настоящее время поддерживаются следующие типы анимации:

• Обычная оконная анимация: htranslate (горизонтальное перемещение), vtranslate (вертикальное перемещение), slide_up (всплытие вверх), slide_down (опускание вниз), slide_left (смещение влево) и slide_right (смещение вправо).

• Диалоговая анимация: popup (всплытие вверх, рекомендуется для встраиваемых платформ), popdown (опускание вниз) и fade (плавное появление и исчезновение).

• Анимация масштабирования: center_scale (масштабирование, следует использовать с осторожностью при отсутствии аппаратного ускорения).

Ранее используемые bottom_to_top и top_to_bottom всё ещё могут использоваться, но рекомендуется заменить их на popup и popdown соответственно.

Диалоговую анимацию можно использовать вместе с функцией выделения диалогового окна (dialog_highlight.md).

Существует три способа реализации оконной анимации:

• При поддержке OpenGL используется vgcanvas для рисования, поскольку он использует числа с плавающей точкой, что обеспечивает более гладкую анимацию.

• При наличии поддержки FrameBuffer используется функция lcd для создания анимации.

• На низкоуровневых системах анимация не включается.

2. Использование

Чтобы задать эффект анимации для окна или диалога, достаточно установить свойство anim_hint для окна или диалога. Например:

<window name="main" anim_hint="vtranslate">
...
</window>

Значения свойства anim_hint можно найти в файле window_animator.h.

3. Параметры анимации

Для анимации можно задать параметры в формате, аналогичном параметрам вызова функции.

1. Все анимации поддерживают следующие параметры:

   • duration — продолжительность анимации в миллисекундах;

   • easing — алгоритм интерполяции (easing.md).

Например:

anim_hint="center_scale(duration=300)"

2. Для анимации slide_up, slide_down, slide_left и slide_right есть дополнительные параметры:

   • start_alpha — начальное значение альфа (от 0 до 255);

   • end_alpha — конечное значение альфа (от 0 до 255);

   • alpha — эквивалентно установке одинаковых значений для start_alpha и end_alpha.

Если значения start_alpha и end_alpha различаются, можно достичь эффекта динамического затемнения, что может привести к дополнительным затратам на выполнение. Если производительность низкая, рекомендуется установить одинаковое значение для alpha.

4. Примеры

В demoui продемонстрированы различные виды оконных анимаций.

5. Пользовательская анимация

Разработчики могут создавать собственные анимации, которые можно активировать в XML-файлах аналогично встроенным анимациям. Создание пользовательской анимации обычно требует всего нескольких строк кода. Вот как это делается:

1. Реализовать интерфейс window_animator_t. Пример:

static const window_animator_vtable_t s_window_animator_popup_vt = {
    .overlap = TRUE,
    .type = "popup",
    .desc = "popup",
    .size = sizeof(window_animator_t),
    .draw_prev_window = window_animator_overlap_default_draw_prev,
    .draw_curr_window = window_animator_to_top_draw_curr};

window_animator_t* window_animator_popup_create(bool_t open, object_t* args) {
  return window_animator_create(open, &s_window_animator_popup_vt);
}

2. Зарегистрировать анимацию в фабрике window_animator. Пример:

window_animator_factory_register(factory, WINDOW_ANIMATOR_POPUP,
                                 window_animator_popup_create);

Полный пример можно найти здесь: https://github.com/zlgopen/awtk/tree/master/src/window_animators.

Прочее

При включении оконной анимации по умолчанию требуется сделать снимки двух окон для улучшения производительности, но это требует памяти размером с два FB. Если памяти недостаточно (например, только встроенная память), можно отключить кэширование и рисовать напрямую. Это можно сделать, определив макрос в awtk_config.h:

#define WITHOUT_WINDOW_ANIMATOR_CACHE 1