滑动效果实现2

最新推荐文章于 2024-07-04 17:41:48 发布

哑巴湖大水怪~

最新推荐文章于 2024-07-04 17:41:48 发布

阅读量102

点赞数 2

分类专栏： LVGL 控件文章标签：嵌入式硬件

本文链接：https://blog.csdn.net/qq_48798329/article/details/138161215

版权

LVGL 控件专栏收录该内容

4 篇文章 0 订阅

订阅专栏


/*
 * Project: vdtools
 * Module: module_name
 * File: Untitled-1
 * Created Date: 2024-01-09 09:08:31
 * Author: vdtools
 * Description: description
 * -----
 * todo: modified
 * -----
 * Copyright (c) 2021 - vDiscovery, Inc
 */

/* ======================================================================================
 * log
 */
#define LOG_ENABLE_DEBUG (1)

/* ======================================================================================
 * includes
 */
#include "app_menu_anim.h"

#include "base.h"
#include "lvgl.h"
#include "lvgl_json.h"
#include "src/resource/app_resource.h"

/* ======================================================================================
 * macros
 */
#define MENU_NUM 14
/* ======================================================================================
 * types
 */

/* ======================================================================================
 * declaration
 */

vd_void_t app_menu_anim_on_create(lv_obj_t* scr, app_scr_info_t data);
vd_void_t app_menu_anim_on_update(lv_obj_t* scr, app_scr_info_t data);
vd_void_t app_menu_anim_on_destroy(lv_obj_t* scr);

/* ======================================================================================
 * globals
 */
static lv_obj_t* menu_bg_img = vd_null;
static lv_obj_t* container   = vd_null;
static lv_obj_t* btn_recipe  = vd_null;
static lv_obj_t* tabview     = vd_null;
static lv_obj_t* tips_obj    = vd_null;

static lv_obj_t* obj_data[15]   = {0};
static lv_obj_t* label_data[15] = {0};
static lv_obj_t* image_data[15] = {0};
static uint32_t  menu_id        = 0;
static uint32_t  old_menu_id    = 0;
static lv_anim_t a1;
static lv_anim_t a2;

const app_img_id_t guide_img_dscaddr[] = {
    APP_IMG_ID_OLIVE_PNG,
    APP_IMG_ID_ORANGE_PNG,
    APP_IMG_ID_COOKIE_BOWL_PNG,
    APP_IMG_ID_OLIVE_PNG,
    APP_IMG_ID_ORANGE_PNG,
    APP_IMG_ID_COOKIE_BOWL_PNG,
    APP_IMG_ID_OLIVE_PNG,
    APP_IMG_ID_ORANGE_PNG,
    APP_IMG_ID_COOKIE_BOWL_PNG,
    APP_IMG_ID_OLIVE_PNG,
    APP_IMG_ID_ORANGE_PNG,
    APP_IMG_ID_COOKIE_BOWL_PNG,
    APP_IMG_ID_OLIVE_PNG,
    APP_IMG_ID_ORANGE_PNG,
    APP_IMG_ID_COOKIE_BOWL_PNG,
};
const app_img_id_t mode_img_dscaddr[] = {
    APP_IMG_ID_AUTO_COOKING_ICON_PNG,
    APP_IMG_ID_MANUEL_COOKING_ICON_PNG,
    APP_IMG_ID_SPECIAL_FUNCTIONS_ICON_PNG,
    APP_IMG_ID_STEP_COOKING_ICON_PNG,
    APP_IMG_ID_AUTO_COOKING_ICON_PNG,
    APP_IMG_ID_MANUEL_COOKING_ICON_PNG,
    APP_IMG_ID_SPECIAL_FUNCTIONS_ICON_PNG,
    APP_IMG_ID_STEP_COOKING_ICON_PNG,
    APP_IMG_ID_AUTO_COOKING_ICON_PNG,
    APP_IMG_ID_MANUEL_COOKING_ICON_PNG,
    APP_IMG_ID_SPECIAL_FUNCTIONS_ICON_PNG,
    APP_IMG_ID_STEP_COOKING_ICON_PNG,
    APP_IMG_ID_AUTO_COOKING_ICON_PNG,
    APP_IMG_ID_MANUEL_COOKING_ICON_PNG,
    APP_IMG_ID_SPECIAL_FUNCTIONS_ICON_PNG};

const app_img_id_t tips_img_dscaddr[] = {
    APP_IMG_ID_1_PNG,
    APP_IMG_ID_2_PNG,
    APP_IMG_ID_2_PNG,
    APP_IMG_ID_2_PNG,
    APP_IMG_ID_2_PNG,
    APP_IMG_ID_2_PNG,
    APP_IMG_ID_2_PNG,
    APP_IMG_ID_2_PNG,
    APP_IMG_ID_2_PNG,
    APP_IMG_ID_2_PNG,
    APP_IMG_ID_2_PNG,
    APP_IMG_ID_2_PNG,
    APP_IMG_ID_2_PNG,
    APP_IMG_ID_2_PNG,
    APP_IMG_ID_2_PNG};

uint32_t x_pos[MENU_NUM] = {
    340,
    371,
    377,
    340,
    371,
    377,
    340,
    371,
    377,
    340,
    371,
    377,
    340,
    371,
};
uint16_t y_pos[MENU_NUM]   = {99, 203, 117, 99, 203, 117, 99, 203, 117, 99, 203, 117, 99, 203};
char*    buf_txt[MENU_NUM] = {
    "MANUEL\nPISIRME",
    "OTOMATIK\nPISIRME",
    "OZEL\nFONKSIYON",
    "KADEMELI\nPISIRME",
    "SON\nKULLANLAN",
    "AYARLAR",
    "MANUEL\nPISIRME",
    "OTOMATIK\nPISIRME",
    "OZEL\nFONKSIYON",
    "KADEMELI\nPISIRME",
    "SON\nKULLANLAN",
    "AYARLAR",
    "SON\nKULLANLAN",
    "AYARLAR"};

static lv_point_t line_points[] = {{40, 38}, {504, 38}};
/* ======================================================================================
 * helper
 */

/* ======================================================================================
 * private implementation
 */
static void set_pos_x_label(void* bar, int32_t value) {
    lv_obj_set_x(bar, value);
}

void lv_obj_anim_ready_cb(lv_anim_t* a) {
    lv_obj_scroll_to_view(lv_obj_get_child(container, menu_id), LV_ANIM_ON);

    // lv_obj_t* old_child1 = lv_obj_get_child(container, old_menu_id);
    // lv_obj_t* new_child1 = lv_obj_get_child(container, menu_id);
    // lv_obj_set_style_width(old_child1, 50, 0);
    // lv_obj_set_style_width(new_child1, 190, 0);
}
static void lv_obj_anim_start_cb(lv_anim_t* a) {
    lv_tabview_set_act(tabview, menu_id, LV_ANIM_ON);
    lv_obj_set_scroll_snap_x(container, LV_SCROLL_SNAP_CENTER);
}
static void set_weight_label(void* bar, int32_t value) {
    lv_obj_set_style_width(bar, value, 0);

    lv_obj_add_flag(label_data[old_menu_id], LV_OBJ_FLAG_HIDDEN);
    lv_obj_clear_flag(label_data[menu_id], LV_OBJ_FLAG_HIDDEN);
}
/* ======================================================================================
 * implementation
 */

vd_void_t app_menu_anim_on_create(lv_obj_t* scr, app_scr_info_t data) {
    lv_json_bind(scr, APP_LAYOUT_MENU_ANIM_JSON_STR);

    menu_bg_img = lv_json_find_widget(scr, APP_ID_MENU_ANIM_MENU_BG_IMG);

    tabview = lv_tabview_create(menu_bg_img, LV_DIR_TOP, 50);
    lv_obj_set_style_bg_opa(tabview, LV_OPA_TRANSP, APP_DEFAULT_SELECTOR);

    lv_obj_t* btns = lv_tabview_get_tab_btns(tabview);
    lv_obj_set_style_size(btns, 0, 0);
    lv_obj_set_size(tabview, LV_HOR_RES, LV_VER_RES);

    lv_obj_t* line1 = lv_line_create(menu_bg_img);
    lv_line_set_points(line1, line_points, 2);
    lv_obj_set_style_line_color(line1, lv_color_hex(0x888888), 0);
    lv_obj_set_style_line_width(line1, 2, 0);

    lv_obj_t* menu_label = lv_label_create(menu_bg_img);
    lv_label_set_text_fmt(menu_label, "%s", "ANA MENU");
    lv_obj_set_style_text_font(menu_label, &lv_font_montserrat_24, LV_PART_MAIN);
    lv_label_set_long_mode(menu_label, LV_LABEL_LONG_WRAP);
    lv_obj_set_style_text_color(menu_label, lv_color_hex(0xffffff), LV_PART_MAIN);
    lv_obj_set_style_text_align(menu_label, LV_TEXT_ALIGN_CENTER, 0);
    lv_obj_align(menu_label, LV_ALIGN_TOP_LEFT, 47, 10);

    lv_obj_t* time_label = lv_label_create(menu_bg_img);
    lv_label_set_text_fmt(time_label, "%s", "12:48");
    lv_obj_set_style_text_font(time_label, &lv_font_montserrat_24, LV_PART_MAIN);
    lv_label_set_long_mode(time_label, LV_LABEL_LONG_WRAP);
    lv_obj_set_style_text_color(time_label, lv_color_hex(0xffffff), LV_PART_MAIN);
    lv_obj_set_style_text_align(time_label, LV_TEXT_ALIGN_CENTER, 0);
    lv_obj_align(time_label, LV_ALIGN_TOP_RIGHT, -47, 10);

    for (int i = 0; i < MENU_NUM; i++) {
        lv_obj_t* tab1 = lv_tabview_add_tab(tabview, "");
        lv_obj_set_scrollbar_mode(tab1, LV_SCROLLBAR_MODE_OFF);
        lv_obj_set_scroll_dir(tab1, LV_DIR_VER);
        lv_obj_t* img1 = lv_img_create(tab1);
        lv_img_set_src(img1, APP_IMG(guide_img_dscaddr[i]));
        lv_obj_set_pos(img1, x_pos[i], y_pos[i]);
    }

    container = lv_obj_create(menu_bg_img);  //创建一个父控件obj
    lv_obj_set_size(container, LV_HOR_RES, LV_VER_RES);
    lv_obj_set_scrollbar_mode(container, LV_SCROLLBAR_MODE_OFF);
    lv_obj_set_scroll_dir(container, LV_DIR_HOR);       //设置滚动方向
    lv_obj_set_flex_flow(container, LV_FLEX_FLOW_ROW);  //设置布局
    lv_obj_set_flex_align(container, LV_FLEX_ALIGN_CENTER, LV_SCROLL_SNAP_CENTER, LV_SCROLL_SNAP_CENTER);
    lv_obj_set_scroll_snap_x(container, LV_SCROLL_SNAP_CENTER);
    lv_obj_set_style_bg_opa(container, LV_OPA_0, LV_PART_MAIN);
    lv_obj_set_style_bg_color(container, lv_color_black(), LV_PART_MAIN);
    lv_obj_set_style_border_width(container, 0, LV_PART_MAIN);
    lv_obj_set_style_pad_column(container, 10, LV_PART_MAIN);  // 图标之间的间隙
    lv_obj_set_pos(container, 0, 0);

    // 向父控件内添加子控件
    for (int i = 0; i < MENU_NUM; i++) {
        btn_recipe  = lv_obj_create(container);
        obj_data[i] = btn_recipe;
        lv_obj_remove_style_all(btn_recipe);
        lv_obj_set_style_bg_opa(btn_recipe, LV_OPA_100, LV_PART_MAIN);
        lv_obj_set_style_border_width(btn_recipe, 0, 0);
        lv_obj_set_style_pad_all(btn_recipe, 0, 0);
        lv_obj_set_style_bg_color(btn_recipe, lv_color_hex(0x888888), LV_PART_MAIN);
        lv_obj_set_style_bg_opa(btn_recipe, LV_OPA_60, LV_PART_MAIN);
        lv_obj_set_style_radius(btn_recipe, 10, 0);
        if (i == 0) {
            lv_obj_set_size(btn_recipe, 190, 180);
        } else {
            lv_obj_set_size(btn_recipe, 50, 180);
        }

        lv_obj_align(btn_recipe, LV_ALIGN_CENTER, 0, 0);

        lv_obj_t* mode_img = lv_img_create(btn_recipe);
        lv_img_set_src(mode_img, APP_IMG(mode_img_dscaddr[i]));
        lv_obj_align(mode_img, LV_ALIGN_TOP_RIGHT, -8, 0);

        lv_obj_t* label1 = lv_label_create(btn_recipe);
        label_data[i]    = label1;
        lv_label_set_text_fmt(label1, "%s", buf_txt[i]);
        lv_obj_set_style_text_font(label1, &lv_font_montserrat_24, LV_PART_MAIN);
        lv_label_set_recolor(label1, true);
        lv_label_set_long_mode(label1, LV_LABEL_LONG_WRAP);
        lv_obj_set_style_text_color(label1, lv_color_hex(0xffffff), LV_PART_MAIN);
        lv_obj_set_style_text_align(label1, LV_TEXT_ALIGN_CENTER, 0);
        lv_obj_align(label1, LV_ALIGN_BOTTOM_MID, 0, 0);

        lv_obj_add_flag(label1, LV_OBJ_FLAG_HIDDEN);
        if (i == 0) {
            lv_obj_clear_flag(label1, LV_OBJ_FLAG_HIDDEN);
        }
    }

    lv_obj_scroll_to_view(lv_obj_get_child(container, 0), LV_ANIM_OFF);
    lv_obj_add_flag(container, LV_OBJ_FLAG_SCROLL_MOMENTUM);

    tips_obj = lv_obj_create(menu_bg_img);  //创建一个父控件obj
    lv_obj_set_size(tips_obj, 250, 20);
    lv_obj_set_scrollbar_mode(tips_obj, LV_SCROLLBAR_MODE_OFF);
    lv_obj_set_scroll_dir(tips_obj, LV_DIR_HOR);       //设置滚动方向
    lv_obj_set_flex_flow(tips_obj, LV_FLEX_FLOW_ROW);  //设置布局
    lv_obj_set_flex_align(tips_obj, LV_FLEX_ALIGN_CENTER, LV_SCROLL_SNAP_CENTER, LV_SCROLL_SNAP_CENTER);
    lv_obj_set_scroll_snap_x(tips_obj, LV_SCROLL_SNAP_CENTER);
    lv_obj_set_style_bg_opa(tips_obj, LV_OPA_0, LV_PART_MAIN);
    lv_obj_set_style_bg_color(tips_obj, lv_color_black(), LV_PART_MAIN);
    lv_obj_set_style_border_width(tips_obj, 0, LV_PART_MAIN);
    lv_obj_set_style_pad_column(tips_obj, 10, LV_PART_MAIN);  // 图标之间的间隙
    lv_obj_align(tips_obj, LV_ALIGN_BOTTOM_MID, 0, 0);

    // 向父控件内添加子控件
    for (int i = 0; i < MENU_NUM; i++) {
        lv_obj_t* icon_img = lv_img_create(tips_obj);
        image_data[i]      = icon_img;
        lv_img_set_src(icon_img, APP_IMG(tips_img_dscaddr[i]));
        lv_obj_align(icon_img, LV_ALIGN_CENTER, 0, 0);
    }
    lv_obj_scroll_to_view(lv_obj_get_child(tips_obj, 0), LV_ANIM_OFF);
    lv_obj_add_flag(tips_obj, LV_OBJ_FLAG_SCROLL_MOMENTUM);
    if (data != NULL) {
        app_menu_anim_on_update(scr, data);
    }
}

vd_void_t app_menu_anim_on_update(lv_obj_t* scr, app_scr_info_t data) {
    menu_info_t* menu = (menu_info_t*)data;
    menu_id           = menu->menu_num;

    lv_anim_del_all();

    lv_anim_init(&a1);
    lv_anim_set_exec_cb(&a1, set_weight_label);
    lv_anim_set_time(&a1, lv_obj_get_scrollbar_anim_time());
    lv_anim_set_ready_cb(&a1, lv_obj_anim_ready_cb);
    lv_anim_set_start_cb(&a1, lv_obj_anim_start_cb);

    lv_anim_init(&a2);
    lv_anim_set_exec_cb(&a2, set_weight_label);
    lv_anim_set_time(&a2, lv_obj_get_scrollbar_anim_time());
    lv_anim_set_ready_cb(&a2, lv_obj_anim_ready_cb);
    lv_anim_set_start_cb(&a2, lv_obj_anim_start_cb);
    if (old_menu_id < menu_id) {
        lv_anim_set_var(&a1, obj_data[old_menu_id]);
        lv_anim_set_values(&a1, 190, 50);
        lv_anim_set_var(&a2, obj_data[menu_id]);
        lv_anim_set_values(&a2, 50, 190);

    } else {
        lv_anim_set_var(&a1, obj_data[old_menu_id]);
        lv_anim_set_values(&a1, 190, 50);
        lv_anim_set_var(&a2, obj_data[menu_id]);
        lv_anim_set_values(&a2, 50, 190);
    }
    lv_anim_start(&a1);
    lv_anim_start(&a2);

#if 1
    lv_obj_t* old_child = lv_obj_get_child(tips_obj, old_menu_id);
    lv_obj_t* new_child = lv_obj_get_child(tips_obj, menu_id);
    lv_obj_move_to_index(old_child, menu_id);
    lv_obj_scroll_to_view(lv_obj_get_child(tips_obj, menu_id), LV_ANIM_ON);

#endif
    old_menu_id = menu_id;
}

vd_void_t app_menu_anim_on_destroy(lv_obj_t* scr) {
}


/*
 * Project: linux-kit
 * Module:
 * File: app_menu_anim.h
 * Created Date: 2024-01-09 09:08:31
 * Author: vdtools
 * Description: description
 * -----
 * todo: modified
 * -----
 * Copyright (c) 2021 - vDiscovery, Inc
 */
#ifndef APP_MENU_ANIM_H
#define APP_MENU_ANIM_H

/* ======================================================================================
 * includes
 */
#include "base.h"
#include "lvgl.h"
#include "src/resource/app_resource.h"

/* ======================================================================================
 * extern
 */
__vd_extern_c_enter__;

/* ======================================================================================
 * macros
 */

/* ======================================================================================
 * types
 */

/* ======================================================================================
 * globals
 */
typedef enum {
    MENU_NUM_E_1,
    MENU_NUM_E_2,
    MENU_NUM_E_3,
    MENU_NUM_E_4,
    MENU_NUM_E_5,
    MENU_NUM_E_6,
    MENU_NUM_E_7,
    MENU_NUM_E_8,
    MENU_NUM_E_9,
    MENU_NUM_E_10,
    MENU_NUM_E_11,
    MENU_NUM_E_12,
    MENU_NUM_E_13,

} menu_num_e;
/* ======================================================================================
 * declaration
 */
typedef struct {
    menu_num_e menu_num;
} menu_info_t;

/* ======================================================================================
 * extern
 */
__vd_extern_c_leave__
#endif  // APP_MENU_ANIM_H