当前位置:网站首页>ESP32 LVGL8. 1 - anim animation (anim 16)

ESP32 LVGL8. 1 - anim animation (anim 16)

2022-04-23 18:23:00 Please call me Xiao Peng

Tips : This blog serves as a learning note , If there are mistakes, I hope to correct them

One 、anim brief introduction

1.1 summary Overview

   You can use animation to automatically change the value of the variable between the start value and the end value . The animation will be done by periodically invoking parameters with corresponding values “animator” Function to happen .

1.2 Create animation Create an animation

   To create an animation , Must use lv_anim_set_…() Function initialization and configuration lv_anim_t Variable . You can apply multiple different animations to the same variable at the same time . for example , Use lv_obj_set_x and lv_obj_set_y Animation x and y coordinate . However , A given pair of variables and functions can only have one animation . therefore lv_anim_start() The existing variable function animation will be deleted .

1.3 Animation path Animation path

   You can determine the path of the animation . In the simplest case , It's linear , This means that the current value between the start and end changes linearly . Path is mainly a function , It calculates the next value to set based on the current state of the animation . at present , There are the following built-in path functions :

lv_anim_path_linear			// Linear animation class 
lv_anim_path_step			// The last step is to change 
lv_anim_path_ease_in		// It was slow at first 
lv_anim_path_ease_out 		// The final speed is very slow 
lv_anim_path_ease_in_out	// The beginning and end are slow 
lv_anim_path_overshoot 		// Exceeding the end value 
lv_anim_path_bounce			// Bounce a little from the final value ( It's like hitting a wall )

1.4 Speed and time Speed vs time

   By default , You can set the animation time . however , In some cases , Animation speed is more practical .lv_anim_speed_to_time( Speed , Start , end ) The function calculates the time from the start value to the end value of a given speed in milliseconds . Speed is in units / In seconds . for example ,lv_anim_speed_to_time(20,0,100) Will give 5000 millisecond . for example ,lv_obj_set_x Is in pixels , therefore 20 signify 20 Pixels / Second speed .

1.5 Delete animation Delete animations

   You can go through lv_anim_del(var, func) Provide animation variables and their animator Function to delete the animation .

Two 、anim API

void _lv_anim_core_init(void);														// initialization . Animation module 
void lv_anim_init(lv_anim_t * a);													// Initialize an animation variable 
static inline void lv_anim_set_var(lv_anim_t * a, void * var)						// Set a variable to animate
static inline void lv_anim_set_exec_cb(lv_anim_t * a, lv_anim_exec_xcb_t exec_cb)	// Set up a function to animate ' var '
static inline void lv_anim_set_time(lv_anim_t * a, uint32_t duration)				// Set the duration of the animation 
static inline void lv_anim_set_delay(lv_anim_t * a, uint32_t delay)					// Set a delay before starting the animation 
static inline void lv_anim_set_values(lv_anim_t * a, int32_t start, int32_t end)	// Sets the start and end values of the animation 
static inline void lv_anim_set_custom_exec_cb(lv_anim_t * a, lv_anim_custom_exec_cb_t exec_cb)	//* Be similar to ' lv_anim_set_exec_cb ' but ' lv_anim_custom_exec_cb_t ' receive ' lv_anim_t * ' As its first argument instead of ' void * '. When LVGL When bound to other languages , This function may be used ' lv_anim_t * ' As the first parameter, it is more consistent .
static inline void lv_anim_set_path_cb(lv_anim_t * a, lv_anim_path_cb_t path_cb)	// Animation path ( curve )
static inline void lv_anim_set_start_cb(lv_anim_t * a, lv_anim_start_cb_t start_cb)	// When setting a function call , The animation really starts ( consider ' delay ')
static inline void lv_anim_set_get_value_cb(lv_anim_t * a, lv_anim_get_value_cb_t get_value_cb)	// Set a function to use the current value of the variable and set the start value and end value relative to the current value returned .
static inline void lv_anim_set_ready_cb(lv_anim_t * a, lv_anim_ready_cb_t ready_cb)	// When the animation is ready , Set a function call 
static inline void lv_anim_set_playback_time(lv_anim_t * a, uint32_t time)			// Playback time , Make the animation playback , The positive direction is ready 
static inline void lv_anim_set_playback_delay(lv_anim_t * a, uint32_t delay)		// Playback delay when starting animation , Make the animation playback , The forward direction is ready 
static inline void lv_anim_set_repeat_count(lv_anim_t * a, uint16_t cnt)			// Let the animation repeat itself .
static inline void lv_anim_set_repeat_delay(lv_anim_t * a, uint32_t delay)			// Set a delay before repeating the animation .
static inline void lv_anim_set_early_apply(lv_anim_t * a, bool en)					// Sets whether the animation should be applied immediately or only if the delay expires .
static inline void lv_anim_set_user_data(lv_anim_t * a, void * user_data)			// Animated custom user data fields .
lv_anim_t * lv_anim_start(const lv_anim_t * a);										// Create an animation 
static inline uint32_t lv_anim_get_delay(lv_anim_t * a)								// Get a delay before starting the animation 
bool lv_anim_del(void * var, lv_anim_exec_xcb_t exec_cb);							// Use the given animator Function to delete the animation of a variable 
void lv_anim_del_all(void);															// Delete all animations 
lv_anim_t * lv_anim_get(void * var, lv_anim_exec_xcb_t exec_cb);					// Get a variable and its exec_cb Animation .
static inline bool lv_anim_custom_del(lv_anim_t * a, lv_anim_custom_exec_cb_t exec_cb)			//* By getting from ' a ' Get animation variables in to delete an animation . Only with exec_cb The animation will be deleted .
																								// This function exists because it is logically all animals . Function receives a ' lv_anim_t ' As their 
																								// The first parameter . This is in C Language is not practical , But it's possible API More sequential , Easier to generate bindings .
static inline lv_anim_t * lv_anim_custom_get(lv_anim_t * a, lv_anim_custom_exec_cb_t exec_cb)	// The animated custom user data field gets a variable and its value exec_cb Animation . This function exists because 
																								// For it is logically all animals . Function receives a ' lv_anim_t ' As their first parameter . This is in 
																								//C Language is not practical , But it's possible API More sequential , Easier to generate bindings .
uint16_t lv_anim_count_running(void);												// Get the number of currently running animations 
uint32_t lv_anim_speed_to_time(uint32_t speed, int32_t start, int32_t end);			// Calculate the animation time and given speed and start and end values 
void lv_anim_refr_now(void);														// Manually refresh the animation state .

3、 ... and 、 Example

3.1 Press the key Label Linkage display animation

/************************************************* *  The name of the function  : sw_event_cb *  ginseng   Count  :  nothing  *  The functionality  :  Key callback linkage display animation  *************************************************/
static void sw_event_cb(lv_event_t * e)
{
    
   lv_obj_t * sw = lv_event_get_target(e);               // Get the object that the event was originally aimed at . Even if the event is bubbling , It's the same .
   lv_obj_t * label = lv_event_get_user_data(e);         // Gets the value passed when registering an event on an object user_data
   if(lv_obj_has_state(sw,LV_STATE_CHECKED)){
    
      lv_anim_t a;
      lv_anim_init(&a);                                  // Initialize animation objects 
      lv_anim_set_var(&a, label);                        // Animate the object 
      lv_anim_set_values(&a, lv_obj_get_x(label), 100);  // Set the start and end values of an animation 
      lv_anim_set_time(&a, 500);                         // Set an animation time 
      lv_anim_set_exec_cb(&a, anim_x_cb);                // Set an animation callback 
      lv_anim_set_path_cb(&a, lv_anim_path_overshoot);   // Set an animated path 
      lv_anim_start(&a);                                 // Start the animation 
   }
   else{
    
      lv_anim_t a;                                        
      lv_anim_init(&a);                                  // Initialize animation objects 
      lv_anim_set_var(&a, label);                        // Animate the object 
      lv_anim_set_values(&a, lv_obj_get_x(label), -lv_obj_get_width(label));// Set the start and end values of an animation 
      lv_anim_set_time(&a, 500);                         // Set an animation time 
      lv_anim_set_exec_cb(&a, anim_x_cb);                // Set an animation callback 
      lv_anim_set_path_cb(&a, lv_anim_path_ease_in);     // Set an animated path 
      lv_anim_start(&a);                                 // Start the animation 
   }
}
/************************************************* *  The name of the function  : anim_show_1 *  ginseng   Count  :  nothing  *  The functionality  :  Key linkage , Realization Label Animation display  *************************************************/
void anim_show_1()
{
    
   lv_obj_t * label = lv_label_create(lv_scr_act());       // Create a Label
   lv_label_set_text(label,"Hello animations!");         // by label Set display content 
   lv_obj_set_pos(label,100,10);                         // Set the object location 

   lv_obj_t * sw = lv_switch_create(lv_scr_act());       // Create a switch object 
   lv_obj_center(sw);                                    // centered 
   lv_obj_add_state(sw,LV_STATE_CHECKED);                // Add state 
   lv_obj_add_event_cb(sw,sw_event_cb,LV_EVENT_VALUE_CHANGED,label); // Add callback function 
}

 Please add a picture description

3.2 Animation transformation stay X The shaft changes from small to large

/************************************************* *  The name of the function  : anim_x_cb *  ginseng   Count  :  nothing  *  The functionality  :  Animation x The axis position is displayed  *************************************************/
static void anim_x_cb(void *var,int32_t v)
{
    
   lv_obj_set_x(var,v);
}
/************************************************* *  The name of the function  : anim_size_cb *  ginseng   Count  :  nothing  *  The functionality  :  Animation size display callback function  *************************************************/
static void anim_size_cb(void *var,int32_t v)
{
    
   lv_obj_set_size(var,v,v);
}
/************************************************* *  The name of the function  : anim_show_2 *  ginseng   Count  :  nothing  *  The functionality  :  Key linkage , Realization Label Animation display  *************************************************/
void anim_show_2()
{
    
   lv_obj_t * obj = lv_obj_create(lv_scr_act());      // Create an object 
   lv_obj_set_style_bg_color(obj,lv_palette_main(LV_PALETTE_RED),0); // Set the background color 
   lv_obj_set_style_radius(obj,LV_RADIUS_CIRCLE,0);   // Set style fillet 

   lv_obj_align(obj,LV_ALIGN_LEFT_MID,10,0);          // Center style 

   lv_anim_t a;                                       // Create animation style 
   lv_anim_init(&a);                                  // Initialize animation 
   lv_anim_set_var(&a,obj);                           // Set a variable for the animation 
   lv_anim_set_values(&a,10,50);                      // Set an animation value 
   lv_anim_set_time(&a,1000);                         // Set animation time 
   lv_anim_set_playback_delay(&a,100);                // Playback delay   Make the animation playback , The forward direction is ready 
   lv_anim_set_playback_time(&a,300);                 // Playback time 
   lv_anim_set_repeat_delay(&a,500);                  // Repeat delay 
   lv_anim_set_repeat_count(&a,LV_ANIM_REPEAT_INFINITE); // Repeat count times 
   lv_anim_set_path_cb(&a,lv_anim_path_ease_in_out);  // Set the animation playback path 

   lv_anim_set_exec_cb(&a,anim_size_cb);              // Set a function for animation   The callback function is size 
   lv_anim_start(&a);                                 // Start the animation 
   lv_anim_set_exec_cb(&a,anim_x_cb);                 // Set a function for animation   The callback function is x Axis value 
   lv_anim_set_values(&a,10,240);                     // Set a value for the animation 
   lv_anim_start(&a);                                 // Start the animation 
}

 Please add a picture description

版权声明
本文为[Please call me Xiao Peng]所创,转载请带上原文链接,感谢
https://yzsam.com/2022/04/202204210609450488.html