一、简介

前置文章：黄山派小智自定义待机界面（一）

前面的文章完成了静态背景待机界面，这里拓展一下动态待机界面的实现。
以下两种方式选择一种即可完成动态显示。

二、渐入渐出动态界面

渐入渐出动态的原理和小智开机动画相似，这里可以选择两张相似的背景图，控制其中一张透明度逐渐变化，达到类似动图的效果。
缺点：实际显示时发现效果并不理想，透明度变化时帧率明显降低，平均渲染时间较长。

添加背景

放置再最底层

添加后，编译生成代码
并将新生成的代码替换原来的代码

代码修改

xiaozhiui_update.h 中添加

/* 透明度修改 */
#define user_ui_opa_set(opa_value) lv_obj_set_style_opa(standby_screen.screen_xiaozhiui_bg, opa_value, LV_PART_MAIN|LV_STATE_DEFAULT);

xiaozhi_ui.c

也可以设置一个软件定时器来另外定时刷新透明度显示，这也方便后续显示性能的分析。

添加软件定时器：
rt_timer_t update_bg_opa_timer = RT_NULL;
///////////////////
if(update_bg_opa_timer )
{
    rt_timer_start(update_bg_opa_timer );
}
//////////////////
    //更新背景opa
    if (!update_bg_opa_timer ) 
    {update_bg_opa_timer  = rt_timer_create("update_ui_bg_opa", xiaozhiui_bg_opa, NULL,
                                    rt_tick_from_millisecond(300), //每秒更新背景opa,更新时间同步FPS计算时间
                                    RT_TIMER_FLAG_PERIODIC  | RT_TIMER_FLAG_SOFT_TIMER);
    } else 
    {
        rt_timer_stop(update_bg_opa_timer );
    }
    rt_timer_start(update_bg_opa_timer );

static uint8_t opa = 255;

/* 设置背景透明度 */
void xiaozhi_ui_set_bg_opa(void)
{
    if(opa<0) opa=255;
    user_ui_opa_set(opa);         /* 定时更新透明度*/
    opa -= 25;
}

void xiaozhiui_bg_opa(void *parameter) // ble
{
    // 使用消息队列发送更新UI的消息到UI线程
    extern rt_mq_t ui_msg_queue;
    if (ui_msg_queue != RT_NULL) {
        ui_msg_t* msg = (ui_msg_t*)rt_malloc(sizeof(ui_msg_t));
        if (msg != RT_NULL) {
            msg->type = UI_MSG_BG_OPA;  /* 新增消息类型，需要定义这个消息类型 */
            msg->data = RT_NULL;  // 不需要额外数据
            
            if (rt_mq_send(ui_msg_queue, &msg, sizeof(ui_msg_t*)) != RT_EOK) {
                LOG_E("Failed to send BG_OPA update UI message");
                rt_free(msg);
            }
        }
    } else {
        // 如果没有消息队列，回退到直接调用（保持向后兼容）
        xiaozhi_ui_set_bg_opa();
    }
}

另外，也可将图片指定放入PSRAM中来提升部分性能。
具体可以通过指定 user_ui/images 目录下的背景图片数据的存储字段到PSRAM区，并修改链接
或者直接代码访问PSRAM，需要编写一定的代码

/* 图片数据中添加 */
__attribute__((section(".pasram_data")))

/* 链接脚本中添加 */
  /* PSRAM数据段 */
  .psram_data :
  {
    . = ALIGN(4);
    _sipsram = LOADADDR(.psram_data);
    _spsram = .;
    *(.psram_data)
    *(.psram_data*)
    . = ALIGN(4);
    _epsram = .;
  } > PSRAM AT > FLASH

链接脚本位置

最终展示

性能分析

打开menuconfig工具，打开FPS选项，即可显示性能

相关文章可以参考：性能分析文章

三、Gif图动态界面（建议）

使用GIF 图做背景，原理类似小智表情表，现象就是背景呈现和表情一样的动态效果，右一系列图片组组成。

使用了ezip工具将图片数据转换，并存放在指定的ROM3区域内

参考文章：
小智自定义动态表情
AGIF 官方参考例程
EZIP 官方参考文档

图片处理

将图片处理成如下的图片组
在线gift图片处理网站：https://ezgif.com/optimize

添加GIF图

将GIF文件添加到指定文件夹中，编译时会根据SConscript转换文件

SConscript

同时在 xiaozhi_array.c和xiaozhi_ui.h 中添加声明

转换压缩率

原文件大小

转换后 内存起始地址：0x12672080 结束地址：0x12803ff0
因为这块地址是连续的，所以计算得占用内存约1.57MB
所以使用EZIP转换压缩率大概为 1 - 1.57/3.81 为 58.8%

Gui_guider 改动

将背景图片删除，添加背景容器存放GIF，容器放置在最低层，编译生成代码，并替换原代码。

xiaohzi_ui.c 调用

lv_obj_t * user_ui_bg_anim;

user_ui_bg_anim = lv_seqimg_create(standby_screen.screen_xiaozhi_bg); /* 小智背景动画显示 */
    lv_seqimg_src_array(user_ui_bg_anim, user_ui_bg, 25);
    lv_seqimg_set_period(user_ui_bg_anim, 30);          
    lv_obj_align(user_ui_bg_anim, LV_ALIGN_CENTER, 0, 0);
    lv_img_set_zoom(user_ui_bg_anim, (int)(LV_SCALE_NONE) * g_scale);
    lv_seqimg_play(user_ui_bg_anim);

编译

如果遇到如下报错，说明这段内存不够了，删除部分图片即可
这里大概多了10KB左右，所以我只删除cool文件夹中的几张图片
编译成功后可以在 project/build_sf32lb52-lchspi-ulp/asset/user_ui_bg 中看到转换后的数据

编译完成、下载即可

四、现象

具体现象可以观看B站视频

小智自定义动态待机界面演示