View 动画¶

本章详细介绍 EmbeddedGUI 提供的 5 种 View 属性动画和 AnimationSet 组合动画。

Alpha 动画 – 透明度渐变¶

Alpha 动画在 from_alpha 和 to_alpha 之间插值，改变目标 View 的透明度。

参数结构¶

struct egui_animation_alpha_params
{
    egui_alpha_t from_alpha;  // 起始透明度
    egui_alpha_t to_alpha;    // 终止透明度
};

透明度值范围：EGUI_ALPHA_0（完全透明）到 EGUI_ALPHA_100（完全不透明）。

参数宏¶

EGUI_ANIMATION_ALPHA_PARAMS_INIT(name, from_alpha, to_alpha);

完整示例：淡入效果¶

static egui_animation_alpha_t anim_fade_in;
EGUI_ANIMATION_ALPHA_PARAMS_INIT(fade_in_params, EGUI_ALPHA_0, EGUI_ALPHA_100);
static egui_interpolator_decelerate_t interp;

void setup_fade_in(egui_view_t *view)
{
    egui_animation_alpha_init(EGUI_ANIM_OF(&anim_fade_in));
    egui_animation_alpha_params_set(&anim_fade_in, &fade_in_params);
    egui_animation_duration_set(EGUI_ANIM_OF(&anim_fade_in), 500);

    egui_interpolator_decelerate_init((egui_interpolator_t *)&interp);
    egui_animation_interpolator_set(EGUI_ANIM_OF(&anim_fade_in), (egui_interpolator_t *)&interp);

    egui_animation_target_view_set(EGUI_ANIM_OF(&anim_fade_in), view);
    egui_animation_start(EGUI_ANIM_OF(&anim_fade_in));
}

完整示例：呼吸灯效果（无限往返）¶

EGUI_ANIMATION_ALPHA_PARAMS_INIT(breathe_params, EGUI_ALPHA_100, EGUI_ALPHA_20);
static egui_animation_alpha_t anim_breathe;
static egui_interpolator_linear_t interp_linear;

void setup_breathe(egui_view_t *view)
{
    egui_animation_alpha_init(EGUI_ANIM_OF(&anim_breathe));
    egui_animation_alpha_params_set(&anim_breathe, &breathe_params);
    egui_animation_duration_set(EGUI_ANIM_OF(&anim_breathe), 1500);
    egui_animation_repeat_count_set(EGUI_ANIM_OF(&anim_breathe), -1);
    egui_animation_repeat_mode_set(EGUI_ANIM_OF(&anim_breathe), EGUI_ANIMATION_REPEAT_MODE_REVERSE);

    egui_interpolator_linear_init((egui_interpolator_t *)&interp_linear);
    egui_animation_interpolator_set(EGUI_ANIM_OF(&anim_breathe), (egui_interpolator_t *)&interp_linear);

    egui_animation_target_view_set(EGUI_ANIM_OF(&anim_breathe), view);
    egui_animation_start(EGUI_ANIM_OF(&anim_breathe));
}

Translate 动画 – 平移¶

Translate 动画改变 View 的位置偏移量，在 (from_x, from_y) 和 (to_x, to_y) 之间插值。偏移量相对于 View 的原始位置。

参数结构¶

struct egui_animation_translate_params
{
    egui_dim_t from_x;  // 起始 X 偏移
    egui_dim_t to_x;    // 终止 X 偏移
    egui_dim_t from_y;  // 起始 Y 偏移
    egui_dim_t to_y;    // 终止 Y 偏移
};

参数宏¶

EGUI_ANIMATION_TRANSLATE_PARAMS_INIT(name, from_x, to_x, from_y, to_y);

完整示例：从右侧滑入¶

EGUI_ANIMATION_TRANSLATE_PARAMS_INIT(slide_in_params, EGUI_CONFIG_SCREEN_WIDTH, 0, 0, 0);
static egui_animation_translate_t anim_slide_in;
static egui_interpolator_decelerate_t interp;

void setup_slide_in(egui_view_t *view)
{
    egui_animation_translate_init(EGUI_ANIM_OF(&anim_slide_in));
    egui_animation_translate_params_set(&anim_slide_in, &slide_in_params);
    egui_animation_duration_set(EGUI_ANIM_OF(&anim_slide_in), 300);

    egui_interpolator_decelerate_init((egui_interpolator_t *)&interp);
    egui_animation_interpolator_set(EGUI_ANIM_OF(&anim_slide_in), (egui_interpolator_t *)&interp);

    egui_animation_target_view_set(EGUI_ANIM_OF(&anim_slide_in), view);
    egui_animation_start(EGUI_ANIM_OF(&anim_slide_in));
}

完整示例：弹跳下落¶

EGUI_ANIMATION_TRANSLATE_PARAMS_INIT(bounce_params, 0, 0, 0, 200);
static egui_animation_translate_t anim_bounce;
static egui_interpolator_bounce_t interp_bounce;

void setup_bounce_drop(egui_view_t *view)
{
    egui_animation_translate_init(EGUI_ANIM_OF(&anim_bounce));
    egui_animation_translate_params_set(&anim_bounce, &bounce_params);
    egui_animation_duration_set(EGUI_ANIM_OF(&anim_bounce), 1500);
    egui_animation_repeat_count_set(EGUI_ANIM_OF(&anim_bounce), -1);
    egui_animation_repeat_mode_set(EGUI_ANIM_OF(&anim_bounce), EGUI_ANIMATION_REPEAT_MODE_REVERSE);

    egui_interpolator_bounce_init((egui_interpolator_t *)&interp_bounce);
    egui_animation_interpolator_set(EGUI_ANIM_OF(&anim_bounce), (egui_interpolator_t *)&interp_bounce);

    egui_animation_target_view_set(EGUI_ANIM_OF(&anim_bounce), view);
    egui_animation_start(EGUI_ANIM_OF(&anim_bounce));
}

ScaleSize 动画 – 缩放¶

ScaleSize 动画按比例缩放 View 的宽高，在 from_scale 和 to_scale 之间插值。缩放基于 View 的原始尺寸。

参数结构¶

struct egui_animation_scale_size_params
{
    egui_float_t from_scale;  // 起始缩放比例（定点数，1.0 = 原始大小）
    egui_float_t to_scale;    // 终止缩放比例
};

参数宏¶

EGUI_ANIMATION_SCALE_SIZE_PARAMS_INIT(name, from_scale, to_scale);

完整示例：弹性放大¶

EGUI_ANIMATION_SCALE_SIZE_PARAMS_INIT(scale_params,
    EGUI_FLOAT_VALUE(0.3f), EGUI_FLOAT_VALUE(1.0f));
static egui_animation_scale_size_t anim_scale;
static egui_interpolator_overshoot_t interp;

void setup_scale_in(egui_view_t *view)
{
    egui_animation_scale_size_init(EGUI_ANIM_OF(&anim_scale));
    egui_animation_scale_size_params_set(&anim_scale, &scale_params);
    egui_animation_duration_set(EGUI_ANIM_OF(&anim_scale), 800);

    egui_interpolator_overshoot_init((egui_interpolator_t *)&interp);
    egui_animation_interpolator_set(EGUI_ANIM_OF(&anim_scale), (egui_interpolator_t *)&interp);

    egui_animation_target_view_set(EGUI_ANIM_OF(&anim_scale), view);
    egui_animation_start(EGUI_ANIM_OF(&anim_scale));
}

Resize 动画 – 宽高独立变化¶

Resize 动画可以独立控制宽度和高度的缩放比例，并支持三种锚点模式。与 ScaleSize 的区别在于：ScaleSize 宽高等比缩放，Resize 可以宽高独立变化。

参数结构¶

struct egui_animation_resize_params
{
    egui_float_t from_width_ratio;   // 起始宽度比例
    egui_float_t to_width_ratio;     // 终止宽度比例
    egui_float_t from_height_ratio;  // 起始高度比例
    egui_float_t to_height_ratio;    // 终止高度比例
    uint8_t mode;                    // 锚点模式
};

锚点模式¶

模式	宏定义	说明
左/上锚定	`EGUI_ANIMATION_RESIZE_MODE_LEFT`	左上角固定，向右下方向扩展
居中锚定	`EGUI_ANIMATION_RESIZE_MODE_CENTER`	中心固定，向四周扩展
右/下锚定	`EGUI_ANIMATION_RESIZE_MODE_RIGHT`	右下角固定，向左上方向扩展

参数宏¶

EGUI_ANIMATION_RESIZE_PARAMS_INIT(name, from_w, to_w, from_h, to_h, mode);

完整示例：从中心展开¶

EGUI_ANIMATION_RESIZE_PARAMS_INIT(expand_params,
    EGUI_FLOAT_VALUE(0.0f), EGUI_FLOAT_VALUE(1.0f),
    EGUI_FLOAT_VALUE(0.0f), EGUI_FLOAT_VALUE(1.0f),
    EGUI_ANIMATION_RESIZE_MODE_CENTER);
static egui_animation_resize_t anim_expand;

void setup_expand(egui_view_t *view)
{
    egui_animation_resize_init(EGUI_ANIM_OF(&anim_expand));
    egui_animation_resize_params_set(&anim_expand, &expand_params);
    egui_animation_duration_set(EGUI_ANIM_OF(&anim_expand), 400);
    egui_animation_target_view_set(EGUI_ANIM_OF(&anim_expand), view);
    egui_animation_start(EGUI_ANIM_OF(&anim_expand));
}

Color 动画 – 颜色渐变¶

Color 动画在两个颜色之间逐通道（R/G/B）插值，将结果应用到目标 View 的 label 字体颜色。

参数结构¶

struct egui_animation_color_params
{
    egui_color_t from_color;  // 起始颜色
    egui_color_t to_color;    // 终止颜色
};

参数宏¶

EGUI_ANIMATION_COLOR_PARAMS_INIT(name, from_color, to_color);

完整示例：文字颜色渐变¶

EGUI_ANIMATION_COLOR_PARAMS_INIT(color_params,
    EGUI_COLOR_MAKE(0xFF, 0x00, 0x00),   // 红色
    EGUI_COLOR_MAKE(0x00, 0x00, 0xFF));  // 蓝色
static egui_animation_color_t anim_color;

void setup_color_change(egui_view_t *label_view)
{
    egui_animation_color_init(EGUI_ANIM_OF(&anim_color));
    egui_animation_color_params_set(&anim_color, &color_params);
    egui_animation_duration_set(EGUI_ANIM_OF(&anim_color), 1000);
    egui_animation_repeat_count_set(EGUI_ANIM_OF(&anim_color), -1);
    egui_animation_repeat_mode_set(EGUI_ANIM_OF(&anim_color), EGUI_ANIMATION_REPEAT_MODE_REVERSE);
    egui_animation_target_view_set(EGUI_ANIM_OF(&anim_color), label_view);
    egui_animation_start(EGUI_ANIM_OF(&anim_color));
}

AnimationSet – 组合动画¶

AnimationSet 将多个动画组合在一起同步播放。通过 mask 机制，可以将 Set 级别的属性（duration、repeat、interpolator 等）统一下发给所有子动画。

结构体¶

struct egui_animation_set
{
    egui_animation_t base;
    uint8_t is_mask_repeat_count : 1;
    uint8_t is_mask_repeat_mode : 1;
    uint8_t is_mask_duration : 1;
    uint8_t is_mask_target_view : 1;
    uint8_t is_mask_interpolator : 1;
    egui_slist_t childs;
};

API¶

// 初始化
egui_animation_set_init(EGUI_ANIM_OF(&set));

// 添加子动画
egui_animation_set_add_animation(&set, EGUI_ANIM_OF(&child_anim));

// 设置 mask（1=将 Set 的属性覆盖到子动画）
egui_animation_set_set_mask(&set,
    is_mask_repeat_count,
    is_mask_repeat_mode,
    is_mask_duration,
    is_mask_target_view,
    is_mask_interpolator);

完整示例：平移 + 淡出组合¶

// 子动画参数
EGUI_ANIMATION_TRANSLATE_PARAMS_INIT(set_translate_params, 0, 0, 0, 200);
static egui_animation_translate_t set_translate;

EGUI_ANIMATION_ALPHA_PARAMS_INIT(set_alpha_params, EGUI_ALPHA_100, EGUI_ALPHA_20);
static egui_animation_alpha_t set_alpha;

// 组合动画
static egui_animation_set_t anim_set;
static egui_interpolator_accelerate_decelerate_t interp;

void setup_combined(egui_view_t *view)
{
    // 初始化子动画（不需要单独设置 duration/target/interpolator）
    egui_animation_translate_init(EGUI_ANIM_OF(&set_translate));
    egui_animation_translate_params_set(&set_translate, &set_translate_params);

    egui_animation_alpha_init(EGUI_ANIM_OF(&set_alpha));
    egui_animation_alpha_params_set(&set_alpha, &set_alpha_params);

    // 初始化 AnimationSet
    egui_animation_set_init(EGUI_ANIM_OF(&anim_set));
    egui_animation_set_add_animation(&anim_set, EGUI_ANIM_OF(&set_translate));
    egui_animation_set_add_animation(&anim_set, EGUI_ANIM_OF(&set_alpha));

    // 启用所有 mask：Set 的属性覆盖到子动画
    egui_animation_set_set_mask(&anim_set, 1, 1, 1, 1, 1);

    // 设置 Set 级别的属性
    egui_animation_duration_set(EGUI_ANIM_OF(&anim_set), 1500);
    egui_animation_repeat_count_set(EGUI_ANIM_OF(&anim_set), -1);
    egui_animation_repeat_mode_set(EGUI_ANIM_OF(&anim_set), EGUI_ANIMATION_REPEAT_MODE_REVERSE);

    egui_interpolator_accelerate_decelerate_init((egui_interpolator_t *)&interp);
    egui_animation_interpolator_set(EGUI_ANIM_OF(&anim_set), (egui_interpolator_t *)&interp);

    egui_animation_target_view_set(EGUI_ANIM_OF(&anim_set), view);
    egui_animation_handle_set(EGUI_ANIM_OF(&anim_set), &my_handle);
    egui_animation_start(EGUI_ANIM_OF(&anim_set));
}

mask 机制说明¶

当 mask 位为 1 时，AnimationSet 在启动时会将自身的对应属性复制到所有子动画：

mask 位	覆盖属性
`is_mask_duration`	子动画使用 Set 的 duration
`is_mask_repeat_count`	子动画使用 Set 的 repeat_count
`is_mask_repeat_mode`	子动画使用 Set 的 repeat_mode
`is_mask_target_view`	子动画使用 Set 的 target_view
`is_mask_interpolator`	子动画使用 Set 的 interpolator

通常建议全部设为 1，统一由 Set 管理。如果需要子动画有不同的时长或插值器，可以将对应 mask 位设为 0，让子动画保留自己的设置。