lv_example_anim_3.c 5.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166
  1. #include "../lv_examples.h"
  2. #if LV_BUILD_EXAMPLES && LV_USE_SLIDER && LV_USE_CHART && LV_USE_BTN && LV_USE_GRID
  3. /**
  4. * the example show the use of cubic-bezier3 in animation.
  5. * the control point P1,P2 of cubic-bezier3 can be adjusted by slider.
  6. * and the chart shows the cubic-bezier3 in real time. you can click
  7. * run button see animation in current point of cubic-bezier3.
  8. */
  9. #define CHART_POINTS_NUM 256
  10. struct {
  11. lv_obj_t * anim_obj;
  12. lv_obj_t * chart;
  13. lv_chart_series_t * ser1;
  14. lv_obj_t * p1_slider;
  15. lv_obj_t * p1_label;
  16. lv_obj_t * p2_slider;
  17. lv_obj_t * p2_label;
  18. lv_obj_t * run_btn;
  19. uint16_t p1;
  20. uint16_t p2;
  21. lv_anim_t a;
  22. } ginfo;
  23. static int32_t anim_path_bezier3_cb(const lv_anim_t * a);
  24. static void refer_chart_cubic_bezier(void);
  25. static void run_btn_event_handler(lv_event_t * e);
  26. static void slider_event_cb(lv_event_t * e);
  27. static void page_obj_init(lv_obj_t * par);
  28. static void anim_x_cb(void * var, int32_t v);
  29. /**
  30. * create an animation
  31. */
  32. void lv_example_anim_3(void)
  33. {
  34. static lv_coord_t col_dsc[] = {LV_GRID_FR(1), 200, LV_GRID_FR(1), LV_GRID_TEMPLATE_LAST};
  35. static lv_coord_t row_dsc[] = {30, 10, 10, LV_GRID_FR(1), LV_GRID_TEMPLATE_LAST};
  36. /*Create a container with grid*/
  37. lv_obj_t * cont = lv_obj_create(lv_scr_act());
  38. lv_obj_set_style_pad_all(cont, 2, LV_PART_MAIN);
  39. lv_obj_set_style_pad_column(cont, 10, LV_PART_MAIN);
  40. lv_obj_set_style_pad_row(cont, 10, LV_PART_MAIN);
  41. lv_obj_set_grid_dsc_array(cont, col_dsc, row_dsc);
  42. lv_obj_set_size(cont, 320, 240);
  43. lv_obj_center(cont);
  44. page_obj_init(cont);
  45. lv_anim_init(&ginfo.a);
  46. lv_anim_set_var(&ginfo.a, ginfo.anim_obj);
  47. int32_t end = lv_obj_get_style_width(cont, LV_PART_MAIN) -
  48. lv_obj_get_style_width(ginfo.anim_obj, LV_PART_MAIN) - 10;
  49. lv_anim_set_values(&ginfo.a, 5, end);
  50. lv_anim_set_time(&ginfo.a, 2000);
  51. lv_anim_set_exec_cb(&ginfo.a, anim_x_cb);
  52. lv_anim_set_path_cb(&ginfo.a, anim_path_bezier3_cb);
  53. refer_chart_cubic_bezier();
  54. }
  55. static int32_t anim_path_bezier3_cb(const lv_anim_t * a)
  56. {
  57. uint32_t t = lv_map(a->act_time, 0, a->time, 0, 1024);
  58. int32_t step = lv_bezier3(t, 0, ginfo.p1, ginfo.p2, 1024);
  59. int32_t new_value;
  60. new_value = step * (a->end_value - a->start_value);
  61. new_value = new_value >> 10;
  62. new_value += a->start_value;
  63. return new_value;
  64. }
  65. static void refer_chart_cubic_bezier(void)
  66. {
  67. for(uint16_t i = 0; i <= CHART_POINTS_NUM; i ++) {
  68. uint32_t t = i * (1024 / CHART_POINTS_NUM);
  69. int32_t step = lv_bezier3(t, 0, ginfo.p1, ginfo.p2, 1024);
  70. lv_chart_set_value_by_id2(ginfo.chart, ginfo.ser1, i, t, step);
  71. }
  72. lv_chart_refresh(ginfo.chart);
  73. }
  74. static void anim_x_cb(void * var, int32_t v)
  75. {
  76. lv_obj_set_style_translate_x(var, v, LV_PART_MAIN);
  77. }
  78. static void run_btn_event_handler(lv_event_t * e)
  79. {
  80. lv_event_code_t code = lv_event_get_code(e);
  81. if(code == LV_EVENT_CLICKED) {
  82. lv_anim_start(&ginfo.a);
  83. }
  84. }
  85. static void slider_event_cb(lv_event_t * e)
  86. {
  87. char buf[16];
  88. lv_obj_t * label;
  89. lv_obj_t * slider = lv_event_get_target(e);
  90. if(slider == ginfo.p1_slider) {
  91. label = ginfo.p1_label;
  92. ginfo.p1 = lv_slider_get_value(slider);
  93. lv_snprintf(buf, sizeof(buf), "p1:%d", ginfo.p1);
  94. }
  95. else {
  96. label = ginfo.p2_label;
  97. ginfo.p2 = lv_slider_get_value(slider);
  98. lv_snprintf(buf, sizeof(buf), "p2:%d", ginfo.p2);
  99. }
  100. lv_label_set_text(label, buf);
  101. refer_chart_cubic_bezier();
  102. }
  103. static void page_obj_init(lv_obj_t * par)
  104. {
  105. ginfo.anim_obj = lv_obj_create(par);
  106. lv_obj_set_size(ginfo.anim_obj, 30, 30);
  107. lv_obj_set_align(ginfo.anim_obj, LV_ALIGN_TOP_LEFT);
  108. lv_obj_clear_flag(ginfo.anim_obj, LV_OBJ_FLAG_SCROLLABLE);
  109. lv_obj_set_style_bg_color(ginfo.anim_obj, lv_palette_main(LV_PALETTE_RED), LV_PART_MAIN);
  110. lv_obj_set_grid_cell(ginfo.anim_obj, LV_GRID_ALIGN_START, 0, 1, LV_GRID_ALIGN_START, 0, 1);
  111. ginfo.p1_label = lv_label_create(par);
  112. ginfo.p2_label = lv_label_create(par);
  113. lv_label_set_text(ginfo.p1_label, "p1:0");
  114. lv_label_set_text(ginfo.p2_label, "p2:0");
  115. lv_obj_set_grid_cell(ginfo.p1_label, LV_GRID_ALIGN_START, 0, 1, LV_GRID_ALIGN_START, 1, 1);
  116. lv_obj_set_grid_cell(ginfo.p2_label, LV_GRID_ALIGN_START, 0, 1, LV_GRID_ALIGN_START, 2, 1);
  117. ginfo.p1_slider = lv_slider_create(par);
  118. ginfo.p2_slider = lv_slider_create(par);
  119. lv_slider_set_range(ginfo.p1_slider, 0, 1024);
  120. lv_slider_set_range(ginfo.p2_slider, 0, 1024);
  121. lv_obj_set_style_pad_all(ginfo.p1_slider, 2, LV_PART_KNOB);
  122. lv_obj_set_style_pad_all(ginfo.p2_slider, 2, LV_PART_KNOB);
  123. lv_obj_add_event_cb(ginfo.p1_slider, slider_event_cb, LV_EVENT_VALUE_CHANGED, NULL);
  124. lv_obj_add_event_cb(ginfo.p2_slider, slider_event_cb, LV_EVENT_VALUE_CHANGED, NULL);
  125. lv_obj_set_grid_cell(ginfo.p1_slider, LV_GRID_ALIGN_STRETCH, 1, 1, LV_GRID_ALIGN_START, 1, 1);
  126. lv_obj_set_grid_cell(ginfo.p2_slider, LV_GRID_ALIGN_STRETCH, 1, 1, LV_GRID_ALIGN_START, 2, 1);
  127. ginfo.run_btn = lv_btn_create(par);
  128. lv_obj_add_event_cb(ginfo.run_btn, run_btn_event_handler, LV_EVENT_CLICKED, NULL);
  129. lv_obj_t * btn_label = lv_label_create(ginfo.run_btn);
  130. lv_label_set_text(btn_label, LV_SYMBOL_PLAY);
  131. lv_obj_center(btn_label);
  132. lv_obj_set_grid_cell(ginfo.run_btn, LV_GRID_ALIGN_STRETCH, 2, 1, LV_GRID_ALIGN_STRETCH, 1, 2);
  133. ginfo.chart = lv_chart_create(par);
  134. lv_obj_set_style_pad_all(ginfo.chart, 0, LV_PART_MAIN);
  135. lv_obj_set_style_size(ginfo.chart, 0, LV_PART_INDICATOR);
  136. lv_chart_set_type(ginfo.chart, LV_CHART_TYPE_SCATTER);
  137. ginfo.ser1 = lv_chart_add_series(ginfo.chart, lv_palette_main(LV_PALETTE_RED), LV_CHART_AXIS_PRIMARY_Y);
  138. lv_chart_set_range(ginfo.chart, LV_CHART_AXIS_PRIMARY_Y, 0, 1024);
  139. lv_chart_set_range(ginfo.chart, LV_CHART_AXIS_PRIMARY_X, 0, 1024);
  140. lv_chart_set_point_count(ginfo.chart, CHART_POINTS_NUM);
  141. lv_obj_set_grid_cell(ginfo.chart, LV_GRID_ALIGN_STRETCH, 0, 3, LV_GRID_ALIGN_STRETCH, 3, 1);
  142. }
  143. #endif