static void slide_stack_cb(lv_event_t* e);
struct pager_data
{
lv_obj_t *page1, *page2;
int offset_y;
};
void lv_example_stack_2(int offset_y) {
lv_obj_t* root = lv_obj_create(lv_scr_act());
lv_obj_set_size(root, 466, 466);
lv_obj_set_style_pad_all(root, 0, 0);
lv_obj_t* page1 = lv_obj_create(root);
lv_obj_set_size(page1, 466, 466 + offset_y);
lv_obj_set_style_bg_color(page1, lv_color_hex(0xff0000), 0);
lv_obj_t* page2 = lv_obj_create(root);
lv_obj_set_size(page2, 466, 466);
lv_obj_set_style_translate_y(page2, offset_y, 0);
lv_obj_set_style_bg_color(page2, lv_color_hex(0x00ff00), 0);
lv_obj_set_style_opa(page2, LV_OPA_0, 0);
lv_obj_set_scroll_dir(root, LV_DIR_VER);
lv_obj_set_scroll_snap_y(root, LV_SCROLL_SNAP_START);
struct pager_data * user_data = lv_malloc_zeroed(sizeof(struct pager_data));
user_data->offset_y = offset_y;
user_data->page1 = page1;
user_data->page2 = page2;
lv_obj_set_user_data(root, user_data);
lv_obj_add_event_cb(root, slide_stack_cb, LV_EVENT_SCROLL, root);
// lv_obj_add_event_cb(root, slide_event_cb, LV_EVENT_DELETE, root);
}
static void slide_stack_cb(lv_event_t* e) {
lv_obj_t* root = lv_event_get_user_data(e);
struct pager_data * root_data = root->user_data;
int st = lv_obj_get_scroll_top(root);
LV_LOG_INFO("lzg_tag st=%d", st);
float progress = st / (466 * 0.5);
if (progress > 1) {
progress = 1;
}
if (progress < 0) {
progress = 0;
}
lv_obj_set_style_opa(root_data->page2, LV_OPA_100 * progress, 0);
}
static void stack_pager_event_cb(lv_event_t* e);
struct pager_data
{
int offset_y;
lv_obj_t *page1, *page2;
lv_obj_t *circle1, *circle2;
lv_obj_t *indicator1, *indicator2;
lv_obj_t * line1, *line2;
};
void lv_example_stack_3(int offset_y)
{
lv_obj_t* root = lv_obj_create(lv_scr_act());
lv_obj_set_size(root, 466, 466);
lv_obj_set_style_pad_all(root, 0, 0);
lv_obj_t* page1 = lv_obj_create(root);
lv_obj_set_size(page1, 466, 466 + offset_y);
//lv_obj_set_style_bg_color(page1, lv_color_hex(0xff0000), 0);
lv_obj_set_style_bg_opa(page1, LV_OPA_0, 0);
clear_pad_border_all(page1);
//PAGE1_CONTENT_START=======================================================
// Compass
lv_obj_t* circle1 = lv_obj_create(page1);
lv_obj_align(circle1, LV_ALIGN_TOP_MID, 0, 0);
clear_pad_border_all(circle1);
lv_obj_set_size(circle1, 466, 466);
lv_obj_set_style_bg_color(circle1, lv_color_hex(0x000000), 0);
lv_obj_set_style_radius(circle1, LV_RADIUS_CIRCLE ,0);
lv_obj_set_style_clip_corner(circle1, true, 0);
// Cirlce2
lv_obj_t* circle2 = lv_obj_create(page1);
lv_obj_align(circle2, LV_ALIGN_TOP_MID, 0, 0);
clear_pad_border_all(circle2);
lv_obj_set_size(circle2, 192, 192);
lv_obj_set_style_bg_color(circle2, lv_color_hex(0x000000), 0);
lv_obj_set_style_radius(circle2, LV_RADIUS_CIRCLE ,0);
lv_obj_set_style_clip_corner(circle2, true, 0);
lv_obj_set_style_opa(circle2, LV_OPA_0, 0);
// Indicator Line
lv_obj_t* indicator1 = lv_line_create(page1);
static lv_point_precise_t line_points[2] = { {466 / 2, 0}, {466 / 2, 30}};
lv_line_set_points(indicator1, line_points, 2);
static lv_style_t style_line;
lv_style_init(&style_line);
lv_style_set_line_width(&style_line, 6);
lv_style_set_line_color(&style_line, lv_palette_main(LV_PALETTE_BLUE));
lv_style_set_line_rounded(&style_line, true);
lv_obj_add_style(indicator1, &style_line, 0);
// Indicator Triangle
lv_obj_t* indicator2 = lv_led_create(page1);
lv_obj_set_size(indicator2, 10, 10);
lv_obj_align(indicator2, LV_ALIGN_TOP_MID, 0, 50);
//PAGE1_CONTENT_END=========================================================
lv_obj_t* page2 = lv_obj_create(root);
lv_obj_set_size(page2, 466, 466);
lv_obj_set_style_translate_y(page2, offset_y, 0);
lv_obj_set_style_bg_opa(page2, LV_OPA_0, 0);
clear_pad_border_all(page2);
//PAGE2_CONTENT_START=======================================================
lv_obj_t* line1 = lv_obj_create(page2);
lv_obj_set_style_bg_color(line1, lv_color_hex(0x111000), 0);
lv_obj_set_size(line1, 233, 40);
lv_obj_align(line1, LV_ALIGN_CENTER, 0, 80);
lv_obj_t* line2 = lv_obj_create(page2);
lv_obj_set_style_bg_color(line2, lv_color_hex(0x111000), 0);
lv_obj_set_size(line2, 233, 40);
lv_obj_align(line2, LV_ALIGN_CENTER, 0, 130);
//PAGE2_CONTENT_END=========================================================
lv_obj_set_scroll_dir(root, LV_DIR_VER);
lv_obj_set_scroll_snap_y(root, LV_SCROLL_SNAP_START);
struct pager_data * user_data = lv_malloc_zeroed(sizeof(struct pager_data));
user_data->offset_y = offset_y;
user_data->page1 = page1;
user_data->page2 = page2;
user_data->circle1 = circle1;
user_data->circle2 = circle2;
user_data->indicator1 = indicator1;
user_data->indicator2 = indicator2;
user_data->line1 = line1;
user_data->line2 = line2;
lv_obj_set_user_data(root, user_data);
lv_obj_add_event_cb(root, stack_pager_event_cb, LV_EVENT_SCROLL, root);
lv_obj_add_event_cb(root, stack_pager_event_cb, LV_EVENT_DELETE, root);
}
static void stack_pager_event_cb(lv_event_t* e) {
lv_obj_t* root = lv_event_get_user_data(e);
struct pager_data * root_data = root->user_data;
if (root_data == NULL) {
return;
}
if (lv_event_get_code(e) == LV_EVENT_DELETE) {
lv_free(root_data);
return;
}
int st = lv_obj_get_scroll_top(root);
if (st < 0) {
st = 0;
}
if (st > root_data->offset_y) {
st = root_data->offset_y;
}
LV_LOG_INFO("lzg_tag st=%d", st);
float slide_progress = st * 1.0 / root_data->offset_y;
// circle 1 progress
if (root_data->circle1) {
float compass_progress = slide_progress / 0.5;
if (compass_progress < 0) {
compass_progress = 0;
}
if (compass_progress > 1) {
compass_progress = 1;
}
float scale = 1 - compass_progress * 0.38; // 1 -> 0.6
lv_obj_set_style_transform_pivot_x(root_data->circle1, 466 / 2, 0);
lv_obj_set_style_transform_pivot_y(root_data->circle1, 0, 0);
lv_obj_set_style_transform_zoom(root_data->circle1, (int)(255 * scale), 0);
lv_obj_align(root_data->circle1, LV_ALIGN_TOP_MID, 0, st);
int opa_value = (1 - compass_progress) * LV_OPA_100; // 1 -> 0
lv_obj_set_style_opa(root_data->circle1, opa_value, 0);
}
// circle 2 progress
if (root_data->circle2) {
float barometer_progress = (slide_progress - 0.5) / 0.5;
if (barometer_progress < 0) {
barometer_progress = 0;
}
if (barometer_progress > 1) {
barometer_progress = 1;
}
float scale = 1.6 - barometer_progress * 0.6; // 1.6 -> 1
lv_obj_set_style_transform_pivot_x(root_data->circle2, 192 / 2, 0);
lv_obj_set_style_transform_pivot_y(root_data->circle2, 0, 0);
lv_obj_set_style_transform_zoom(root_data->circle2, (int)(256 * scale), 0);
int opa_value = barometer_progress * LV_OPA_100; // 0 -> 1
lv_obj_set_style_opa(root_data->circle2, opa_value, 0);
lv_obj_align(root_data->circle2, LV_ALIGN_TOP_MID, 0, st + 20 * barometer_progress);
}
// Inidcators
if (root_data->indicator1) {
lv_obj_set_style_translate_y(root_data->indicator1, st + -15 * slide_progress, 0);
}
if (root_data->indicator2) {
lv_obj_set_size(root_data->indicator2, 10 + 5 * slide_progress, 10 + 5 * slide_progress);
lv_obj_align(root_data->indicator2, LV_ALIGN_TOP_MID, 0, st + 50 - 20 * slide_progress);
}
// Lines
if (root_data->line1) {
lv_obj_set_style_translate_y(root_data->line1, - 60 * (1 - slide_progress), 0);
}
if (root_data->line2) {
lv_obj_set_style_translate_y(root_data->line2, - 60 * (1 - slide_progress), 0);
}
}
static void stack_pager_event_cb(lv_event_t* e);
struct pager_data
{
int offset_y;
lv_obj_t *page1, *page2;
lv_obj_t *circle1, *circle2;
lv_obj_t *indicator1, *indicator2;
lv_obj_t *bottom_area;
};
void lv_example_stack_3(int offset_y)
{
lv_obj_t* root = lv_obj_create(lv_scr_act());
lv_obj_set_size(root, 466, 466);
lv_obj_set_style_pad_all(root, 0, 0);
lv_obj_set_scrollbar_mode(root, LV_SCROLLBAR_MODE_OFF);
lv_obj_t* page1 = lv_obj_create(root);
lv_obj_set_size(page1, 466, 466 + offset_y);
//lv_obj_set_style_bg_color(page1, lv_color_hex(0xff0000), 0);
lv_obj_set_style_bg_opa(page1, LV_OPA_0, 0);
clear_pad_border_all(page1);
//PAGE1_CONTENT_START=======================================================
// Compass
lv_obj_t* circle1 = lv_obj_create(page1);
lv_obj_align(circle1, LV_ALIGN_TOP_MID, 0, 0);
clear_pad_border_all(circle1);
lv_obj_set_size(circle1, 466, 466);
lv_obj_set_style_bg_color(circle1, lv_color_hex(0x000000), 0);
lv_obj_set_style_radius(circle1, LV_RADIUS_CIRCLE ,0);
lv_obj_set_style_clip_corner(circle1, true, 0);
// Cirlce2
lv_obj_t* circle2 = lv_obj_create(page1);
lv_obj_align(circle2, LV_ALIGN_TOP_MID, 0, 0);
clear_pad_border_all(circle2);
lv_obj_set_size(circle2, 192, 192);
lv_obj_set_style_bg_color(circle2, lv_color_hex(0x000000), 0);
lv_obj_set_style_radius(circle2, LV_RADIUS_CIRCLE ,0);
lv_obj_set_style_clip_corner(circle2, true, 0);
lv_obj_set_style_opa(circle2, LV_OPA_0, 0);
// Indicator Line
lv_obj_t* indicator1 = lv_line_create(page1);
static lv_point_precise_t line_points[2] = { {466 / 2, 0}, {466 / 2, 32}};
lv_line_set_points(indicator1, line_points, 2);
static lv_style_t style_line;
lv_style_init(&style_line);
lv_style_set_line_width(&style_line, 4);
lv_style_set_line_color(&style_line, lv_color_hex(0xff0000));
lv_style_set_line_rounded(&style_line, true);
lv_obj_add_style(indicator1, &style_line, 0);
// Indicator Triangle
lv_obj_t* indicator2 = lv_led_create(page1);
lv_obj_set_size(indicator2, 10, 10);
lv_obj_align(indicator2, LV_ALIGN_TOP_MID, 0, 50);
// Bottom Area
lv_obj_t* bottom_area = lv_obj_create(page1);
lv_obj_set_size(bottom_area, 466, 466);
clear_pad_border_all(bottom_area);
lv_obj_set_style_bg_opa(bottom_area, LV_OPA_0, 0);
lv_obj_align(bottom_area, LV_ALIGN_BOTTOM_MID, 0, 0);
lv_obj_t* line1 = lv_obj_create(bottom_area);
lv_obj_set_style_bg_color(line1, lv_color_hex(0x111000), 0);
lv_obj_set_size(line1, 233, 40);
lv_obj_align(line1, LV_ALIGN_CENTER, 0, 80);
lv_obj_t* line2 = lv_obj_create(bottom_area);
lv_obj_set_style_bg_color(line2, lv_color_hex(0x111000), 0);
lv_obj_set_size(line2, 233, 40);
lv_obj_align(line2, LV_ALIGN_CENTER, 0, 130);
//PAGE1_CONTENT_END=========================================================
lv_obj_t* page2 = lv_obj_create(root);
lv_obj_set_size(page2, 466, 466);
lv_obj_set_style_translate_y(page2, offset_y, 0);
lv_obj_set_style_bg_opa(page2, LV_OPA_0, 0);
clear_pad_border_all(page2);
lv_obj_set_scroll_dir(root, LV_DIR_VER);
lv_obj_set_scroll_snap_y(root, LV_SCROLL_SNAP_START);
struct pager_data * user_data = lv_malloc_zeroed(sizeof(struct pager_data));
user_data->offset_y = offset_y;
user_data->page1 = page1;
user_data->page2 = page2;
user_data->circle1 = circle1;
user_data->circle2 = circle2;
user_data->indicator1 = indicator1;
user_data->indicator2 = indicator2;
user_data->bottom_area = bottom_area;
lv_obj_set_user_data(root, user_data);
lv_obj_add_event_cb(root, stack_pager_event_cb, LV_EVENT_SCROLL, root);
lv_obj_add_event_cb(root, stack_pager_event_cb, LV_EVENT_DELETE, root);
}
static void stack_pager_event_cb(lv_event_t* e) {
lv_obj_t* root = lv_event_get_user_data(e);
struct pager_data * root_data = root->user_data;
if (root_data == NULL) {
return;
}
if (lv_event_get_code(e) == LV_EVENT_DELETE) {
lv_free(root_data);
return;
}
int st = lv_obj_get_scroll_top(root);
if (st < 0) {
st = 0;
}
if (st > root_data->offset_y) {
st = root_data->offset_y;
}
LV_LOG_INFO("lzg_tag st=%d", st);
float slide_progress = st * 1.0 / root_data->offset_y;
// circle 1 progress
if (root_data->circle1) {
float compass_progress = slide_progress / 0.5;
if (compass_progress < 0) {
compass_progress = 0;
}
if (compass_progress > 1) {
compass_progress = 1;
}
float scale = 1 - compass_progress * 0.38; // 1 -> 0.6
lv_obj_set_style_transform_pivot_x(root_data->circle1, 466 / 2, 0);
lv_obj_set_style_transform_pivot_y(root_data->circle1, 0, 0);
lv_obj_set_style_transform_zoom(root_data->circle1, (int)(255 * scale), 0);
lv_obj_align(root_data->circle1, LV_ALIGN_TOP_MID, 0, st);
int opa_value = (1 - compass_progress) * LV_OPA_100; // 1 -> 0
lv_obj_set_style_opa(root_data->circle1, opa_value, 0);
}
// circle 2 progress
if (root_data->circle2) {
float barometer_progress = (slide_progress - 0.5) / 0.5;
if (barometer_progress < 0) {
barometer_progress = 0;
}
if (barometer_progress > 1) {
barometer_progress = 1;
}
float scale = 1.6 - barometer_progress * 0.6; // 1.6 -> 1
lv_obj_set_style_transform_pivot_x(root_data->circle2, 192 / 2, 0);
lv_obj_set_style_transform_pivot_y(root_data->circle2, 0, 0);
lv_obj_set_style_transform_zoom(root_data->circle2, (int)(256 * scale), 0);
int opa_value = barometer_progress * LV_OPA_100; // 0 -> 1
lv_obj_set_style_opa(root_data->circle2, opa_value, 0);
lv_obj_align(root_data->circle2, LV_ALIGN_TOP_MID, 0, st + 20 * barometer_progress);
}
// Inidcators
if (root_data->indicator1) {
lv_obj_set_style_translate_y(root_data->indicator1, st + -16 * slide_progress, 0);
}
if (root_data->indicator2) {
lv_obj_set_size(root_data->indicator2, 10 + 5 * slide_progress, 10 + 5 * slide_progress);
lv_obj_align(root_data->indicator2, LV_ALIGN_TOP_MID, 0, st + 50 - 20 * slide_progress);
}
// Bottom Area
if (root_data->bottom_area) {
lv_obj_set_style_translate_y(root_data->bottom_area, - 60 * (1 - slide_progress), 0);
lv_obj_set_style_opa(root_data->bottom_area, LV_OPA_100 * slide_progress, 0);
}
}
评论区