提示:本博客作为学习笔记,有错误的地方希望指正

一、创建样式转换简介

  本次主要讲述lvgl的创建样式转换,主要通过动画的形式去显示样式的转换。

三、创建样式转换 API

  用于文字样式的API可以在lv_style_gen.h文件中找到,主要有以下几个API
lv_style_transition_dsc_init这个API的参数还是挺多的,
第一个参数 lv_style_transition_dsc_t * tr 样式转换描述符
第二个参数 const lv_style_prop_t props[] 描述动画特性的数组 最后一个数组值必须为0
第三个参数 lv_anim_path_cb_t path_cb 动画路径 动画路径的回调函数主要有以下几种
第四个参数 uint32_t time 样式转换持续的时间
第五个参数 uint32_t delay 样式转换前的延时(就是点击之后不立即执行,而是延时等待一段时间)
第六个参数 void * user_data 在转换动画中的自定义数据

**
* 初始化一个转换描述符。
* @param tr转换描述符的指针
* @param道具一个数组的属性要转换。最后一个元素必须为零。
* @param path_cb动画路径(ease)回调。如果' NULL '线性路径将被使用。
* @param时间转换的持续时间[ms]
* @param delay在转换前的延迟[ms]
* @param user_data任何将被保存在转换动画中的自定义数据,当调用' path_cb '时可用
* @example
* const static lv_style_prop_t trans_props[] = {LV_STYLE_BG_OPA, LV_STYLE_BG_COLOR, 0};
*静态lv_style_transition_dsc_t trans1;
* lv_style_transition_dsc_init(&trans1, trans_props, NULL, 300, 0, NULL);
*void lv_style_transition_dsc_init(lv_style_transition_dsc_t * tr, const lv_style_prop_t props[], lv_anim_path_cb_t path_cb, uint32_t time, uint32_t delay, void * user_data);

void lv_style_set_transition(lv_style_t * style, const lv_style_transition_dsc_t * value);	//设置过渡

  lv_anim_path_cb_t path_cb 回调函数

int32_t lv_anim_path_linear(const lv_anim_t * a) ;  	//应用线性特性计算动画的当前值
int32_t lv_anim_path_ease_in(const lv_anim_t * a);	  	//计算放慢起始阶段动画的当前值
int32_t lv_anim_path_ease_out(const lv_anim_t * a); 	//计算放慢结束阶段动画的当前值
int32_t lv_anim_path_ease_in_out(const lv_anim_t * a);	// 应用“S”特征(余弦)计算动画的当前值
int32_t lv_anim_path_overshoot(const lv_anim_t * a);	//计算动画的当前值,并在最后使用超调
int32_t lv_anim_path_bounce(const lv_anim_t * a);		//计算一个动画的当前值3次反弹
int32_t lv_anim_path_step(const lv_anim_t * a);			//计算应用步长特征的动画的当前值

三、示例

/*************************************************
 *  函数名称 :  lv_Creating_transition_style 转换样式
 *  参    数 : 无
 *  函数功能 : 转换样式
 *************************************************/
void lv_Creating_transition_style()
{
   //描述动画特性的数组
   static const lv_style_prop_t props[] = {LV_STYLE_BG_COLOR,LV_STYLE_BORDER_COLOR,LV_STYLE_BORDER_WIDTH,0};
   //样式转换描述符
   //lv_anim_path_linear      应用线性特性计算动画的当前值
   //lv_anim_path_ease_in     计算放慢起始阶段动画的当前值
   //lv_anim_path_ease_out    计算放慢结束阶段动画的当前值
   //lv_anim_path_ease_in_out 应用“S”特征(余弦)计算动画的当前值
   //lv_anim_path_overshoot   计算动画的当前值,并在最后使用超调
   //lv_anim_path_bounce      计算一个动画的当前值3次反弹
   //lv_anim_path_step        计算应用步长特征的动画的当前值
   static lv_style_transition_dsc_t trans_def;
   lv_style_transition_dsc_init(&trans_def,props,lv_anim_path_linear,100,200,NULL); //初始化转换描述符。 100ms时显示的时间,200是开始显示的延时
   //样式转换描述符
   static lv_style_transition_dsc_t trans_pr;
   lv_style_transition_dsc_init(&trans_pr,props,lv_anim_path_linear,500,0,NULL);    //初始化转换描述符。
   //定义默认样式
   static lv_style_t style_def;                    //创建样式
   lv_style_init(&style_def);                      //初始化样式
   lv_style_set_transition(&style_def,&trans_def); //设置样式风格设置过渡
   //定义默认样式
   static lv_style_t style_pr;                     //创建样式
   lv_style_init(&style_pr);                       //初始化样式
   lv_style_set_bg_color(&style_pr,lv_palette_lighten(LV_PALETTE_RED,1));  //设置样式背颜色
   lv_style_set_bg_opa(&style_pr,LV_OPA_COVER);                            //设置样式背景颜色透明度

   lv_style_set_border_color(&style_pr,lv_palette_lighten(LV_PALETTE_BLUE,1));   //设置边框颜色
   lv_style_set_border_width(&style_pr,5);         //设置边框的宽度
   lv_style_set_border_opa(&style_pr,LV_OPA_50);   //设置边框的透明度
   lv_style_set_transition(&style_pr,&trans_pr);   //设置样式风格设置过渡

   lv_obj_t * obj = lv_obj_create(lv_scr_act());   //创建对象

   lv_obj_add_style(obj,&style_def,0);             //添加对象的风格默认
   lv_obj_add_style(obj,&style_pr,LV_STATE_PRESSED);  //设置样式风格按压的时候
   lv_obj_center(obj);                             //设置样式居中
}

请添加图片描述

Logo

CSDN联合极客时间,共同打造面向开发者的精品内容学习社区,助力成长!

更多推荐