awtk/docs/window_animator.md
2021-07-12 09:57:33 +08:00

4.3 KiB
Raw Permalink Blame History

AWTK 中的窗口动画

窗口动画是现代 GUI 最基本的功能之一,在窗口打开或关闭时,引入一个过渡动画,让用户感觉这个过程是流畅的。窗口动画的基本原理很简单:在打开或关闭窗口时,把前后两个窗口预先绘制到两张内存图片上,按照指定规则显示两张图片,形成动画效果。

一、介绍

窗口本身只需指定期望的动画类型,由窗口管理器负责在适当的时候(如打开和关闭窗口时),创建窗口动画并让窗口动画绘制到屏幕上。在窗口动画期间,窗口管理器会禁止窗口本身的绘制,并忽略所有输入事件。目前支持的动画有:

普通窗口动画:

  • htranslate: 左右平移动画(速度最快,嵌入式平台推荐使用)。
  • vtranslate: 上下平移动画。
  • slide_up: 向上弹出。
  • slide_down: 向下弹出。
  • slide_left: 向左弹出。
  • slide_right: 向右弹出。

对话框动画:

  • popup: 向上弹出(速度最快,嵌入式平台推荐使用)。
  • popdown: 向下弹出。
  • fade: 淡入淡出动画。
  • center_scale: 缩放动画(没有硬件时加速慎用)。

以前的 bottom_to_top 相当于 popup仍然可以使用但建议用 popup 代替。

以前的 top_to_bottom 相当于 popdown仍然可以使用但建议用 popdown 代替。

对话框的动画可与 对话框的 highlight 属性 一起使用。

窗口动画有三种实现方式:

  • 在系统支持 OpenGL 时,使用 vgcanvas 进行绘制,因为使用了浮点数,整个动画最为平滑。

  • 在系统支持 FrameBuffer使用 lcd 绘图函数实现动画。

  • 在低端系统上,不启用动画。

二、使用方法

给窗口或对话框指定动画效果,只需设置窗口或对话框的 anim_hint 属性即可:

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

anim_hint 的可选值,请参考 window_animator.h 中的定义。

三、动画参数

可以为动画指定参数,其格式为 类似函数调用的参数格式

  1. 所有动画都支持下面的参数:

如:

anim_hint="center_scale(duration=300)"

2.slide_up、slide_down、slide_left 和 slide_right 动画特有参数:

alpha 值用于在背景上画一层透明的颜色,这能够实现让背景变暗的效果。如果 start_alpha 和 end_alpha 不相同,则能实现动态变暗的效果,这有额外的运行开销,如果性能不佳,建议设置 alpha 即可。

  • start_alpha 起始 alpha 值 (0-255)。
  • end_alpha 结束 alpha 值 (0-255)。
  • alpha 相当于将 start_alpha 和 end_alpha 设置为同一个值。

四、示例

demoui 演示了各种窗口动画:

./bin/demoui

五、自定义动画

开发者可以自定义动画,自定义的动画可以像内置动画一样,在 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);
}
  1. 注册到 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