awtk/docs/widget_animator.md

控件动画

控件动画是一种很常见的动画，常用于入场动画、离场动画、装饰用户界面和吸引用户注意力等。

一、动画类型

AWTK目前支持的动画有：

• widget_animator_move：通过改变控件的位置形成动画效果。
• widget_animator_value：通过改变控件的值形成动画效果。
• widget_animator_opacity：通过改变控件的透明度形成动画效果。
• widget_animator_scale：通过改变控件的缩放比例形成动画效果(目前需要vgcanvas)。
• widget_animator_rotation：通过改变控件的旋转角度形成动画效果(目前需要vgcanvas)。

二、主要特色

• 支持定时(延迟)执行。
• 支持逆向模式。
• 支持重复模式(可指定次数)。
• 支持往返模式(可指定次数)。
• 支持多种插值算法(如加速和减速等)。
• 支持同一控件多个动画并行执行。
• 支持同一控件多个动画串行执行。

三、使用方法

1.方法一：直接使用

使用控件动画时，一般需要创建动画、设置参数、设置模式和启动动画四个步骤。如：

  animator = widget_animator_move_create(image, 1000, delay, EASING_SIN_INOUT);
  widget_animator_move_set_params(animator, image->x, image->y, image->x + 100, image->y + 100);
  widget_animator_set_yoyo(animator, 10);
  widget_animator_start(animator);

此方法比较麻烦，但比较灵活，可以主动停止。

2.方法二：通过函数widget_set_animation指定。

animation参数的格式，类似与函数调用。多个参数可以用『;』分隔。如：

widget_set_animation(image, "opacity(from=0, to=255, yoyo_times=1000, duration=1000)");

此方法比较简单，但缺乏灵活性，没法主动停止。

3.方法三：在XML中指定

animation参数的格式，类似与函数调用。多个参数可以用『;』分隔。如：

 <button name="inc_value" text="Inc" animation="opacity(from=0, to=255, yoyo_times=1000, duration=1000)"/>
 <button name="dec_value" text="Dec" animation="move(x_from=10, x_to=100, y_from=10, y_to=100, duration=1000);opacity(from=0, to=255, yoyo_times=1000, duration=1000)"/>

此方法最为简单，但缺乏灵活性，没法主动停止，也没法动态提供参数。

四、可用参数

1.公共参数

• delay 延迟启动时间(毫秒)。
• duration 时长(毫秒)。
• yoyo_times 往返的次数(x2)
• repeat_times 重复的次数。

2. widget_animator_move动画的参数

• x_from x起始位置。
• y_from y起始位置。
• x_to x结束位置。
• y_to y结束位置。

3. widget_animator_value动画的参数

• from 起始值。
• to 结束值。

4. widget_animator_opacity动画的参数

• from 起始值(0-255)。
• to 结束值(0-255)。

5. widget_animator_scale动画的参数

• x_from x方向缩放起始值。
• y_from y方向缩放起始值。
• x_to x方向缩放结束值。
• y_to y方向缩放结束值。

6. widget_animator_rotation动画的参数

• from 起始值(弧度)。
• to 结束值(弧度)。

五、示例

完整示例请参考：demos/demo_animator_app.c

运行下列命令查看各种动画的效果：

./bin/demo_animator

五、其它

1.动画对象一般不需主动销毁，在动画结束或控件被销毁时自动销毁。

2.如使用控件的入场动画，一般不要启用窗口动画。