avatar

松果工作室

欢迎光临

  • 首页
  • freeRTOS
  • LVGL
  • ESP
  • 开发手册
  • 快速笔记
  • 个人收藏
  • 时事记录
  • 考察日志
  • 工具
Home LVGL(四) 动画
文章

LVGL(四) 动画

Posted 2025-06-14 Updated 2025-06- 14
By YCP
7~9 min read

本质是一个值的变化,以点击事件触发一个动画为例

// 创建动画
lv_anim_t a;
lv_obj_t *lv_example_time_page(lv_obj_t *scr){
    // 添加点击事件
    lv_obj_add_event_cb(status_bar, status_bar_gesture_cb, LV_EVENT_ALL, NULL);

    // 初始化动画
    lv_anim_init(&a);
    // 绑定目标对象(状态栏)
    lv_anim_set_var(&a, status_bar);
    // 设置动画执行时的回调函数,一帧调用一次
    lv_anim_set_exec_cb(&a, status_bar_anim_cb);
    // 动画时长300ms
    lv_anim_set_time(&a, 300);
    // 动画结束时的回调
    lv_anim_set_ready_cb(&a, anim_ready_cb);
    // 使用缓动函数(先快后慢)
    lv_anim_set_path_cb(&a, lv_anim_path_ease_out);
}

static void status_bar_gesture_cb(lv_event_t *e) {
    lv_event_code_t code = lv_event_get_code(e);
    lv_obj_t *bar = lv_event_get_target(e);
    static bool status_bar_expanded = false;
    // 如果点击状态栏
    if (code == LV_EVENT_CLICKED) {
        // 获取当前高度
        int32_t cur_h = lv_obj_get_height(bar);
        if (!status_bar_expanded) {
            // 当前状态栏没展开,就从30~100变化数值
            lv_anim_set_values(&a, cur_h, 100);
        } else {
            // 当前状态栏展开了,就从100~30变化数值
            lv_anim_set_values(&a, cur_h, 30);
        }
        // 启动动画
        lv_anim_start(&a);
    }
}

// Animation execution callback
static void status_bar_anim_cb(void *var, int32_t height) {
    lv_obj_t *bar = (lv_obj_t *)var;
    lv_obj_set_height(bar, height);
}

// 动画结束隐藏内容
static void anim_ready_cb(lv_anim_t *a) {
    //自行添加动画结束回调
}
LVGL
License:  CC BY 4.0
Share

Further Reading

OLDER

LVGL(三) 对象中创建对象

NEWER

ESP32(九) BLE GATTS

Recently Updated

  • ESP32(十) BLE OTA
  • ESP32(九) BLE GATTS
  • LVGL(四) 动画
  • LVGL(三) 对象中创建对象
  • LVGL(二) 定时回调

Trending Tags

LVGL WCH Linux Elec freeRTOS STM ESP Flutter Others SwiftUI

Contents

©2025 松果工作室. Some rights reserved.

Using the Halo theme Chirpy