首页 > 其他分享 >LVGL中的7种动画效果

LVGL中的7种动画效果

时间:2024-12-09 15:56:48浏览次数:9  
标签:动画 anim 效果 label lv set path LVGL

此篇文章在2022年3月2日被记录

LVGL给我们提供了其中动画效果,分别是:

  1. lv_anim_path_linear 线性动画
  2. lv_anim_path_step最后一步改变
  3. lv_anim_path_ease_in 开始时很慢
  4. lv_anim_path_ease_out 最后慢
  5. lv_anim_path_ease_in_out 开始和结束都很慢
  6. lv_anim_path_overshoot 超过结束值
  7. lv_anim_path_bounce 从最终值反弹一点(比如撞墙)

lvgl中动画如何使用:

 - 新建一个动画对象:`lv_anim_t a;`
 - 初始化动画:`lv_anim_init(&a);`
 - 设置开始和结束值:`lv_anim_set_values(&a, 30, 200);`
 - 设置动画时长:`lv_anim_set_time(&a, 1000);`
 - 播放前延时(可选):`lv_anim_set_playback_delay(&a, 100);`
 - 向后播放动画(可选):`lv_anim_set_playback_time(&a, 1000);`
 - 重复前的延时(可选):`lv_anim_set_repeat_delay(&a, 1000);`
 - 重复次数(可选,这里是无限次重复):`lv_anim_set_repeat_count(&a, LV_ANIM_REPEAT_INFINITE);`
 - 设置回调函数:`lv_anim_set_exec_cb(&a, lv_obj_set_x);`
 - 设置路径(上述七种动画效果):`lv_anim_set_path_cb(&a, lv_anim_path_linear);`
 - 绑定对象:`lv_anim_set_var(&a, label);`
 - 动画开始:`lv_anim_start(&a);`

演示图片:

img

动图中的主函数(我在这里设立了三个pad所以父局为tab1):

    static void tab1_thing(void *var)
    {
        lv_obj_t *tab1=var;
    
        lv_obj_t * label = lv_label_create(tab1);
        lv_label_set_text(label, "linear");
        lv_obj_align(label, LV_ALIGN_LEFT_MID, 10, -80);
    
        lv_obj_t * labe2 = lv_label_create(tab1);
        lv_label_set_text(labe2, "step");
        lv_obj_align(labe2, LV_ALIGN_LEFT_MID, 10, -50);
    
        lv_obj_t * labe3 = lv_label_create(tab1);
        lv_label_set_text(labe3, "ease_in");
        lv_obj_align(labe3, LV_ALIGN_LEFT_MID, 10, -20);
    
        lv_obj_t * labe4 = lv_label_create(tab1);
        lv_label_set_text(labe4, "ease_out");
        lv_obj_align(labe4, LV_ALIGN_LEFT_MID, 10, 10);
    
        lv_obj_t * labe5 = lv_label_create(tab1);
        lv_label_set_text(labe5, "ease_in_out");
        lv_obj_align(labe5, LV_ALIGN_LEFT_MID, 10, 40);
    
        lv_obj_t * labe6 = lv_label_create(tab1);
        lv_label_set_text(labe6, "overshoot");
        lv_obj_align(labe6, LV_ALIGN_LEFT_MID, 10, 70);
    
        lv_obj_t * labe7 = lv_label_create(tab1);
        lv_label_set_text(labe7, "bounce");
        lv_obj_align(labe7, LV_ALIGN_LEFT_MID, 10, 100);
    
        lv_anim_t a;
        lv_anim_init(&a);//新建动画对象并且初始化
    
        lv_anim_set_values(&a, 30, 200);//设置开始和结束值
        lv_anim_set_time(&a, 1000);//设置动画时长
        lv_anim_set_playback_delay(&a, 100);//播放前延迟。默认值为0(禁用)
        lv_anim_set_playback_time(&a, 1000);//在此持续时间内,也向后播放动画。默认值为0
        lv_anim_set_repeat_delay(&a, 1000);//重复之前要延迟。默认值为0
        lv_anim_set_repeat_count(&a, LV_ANIM_REPEAT_INFINITE);//重复次数。默认值为1。LV_ANIM_REPEAT_INFINIT用于无限重复
        lv_anim_set_exec_cb(&a, lv_obj_set_x);//设置回调函数
    
        lv_anim_set_path_cb(&a, lv_anim_path_linear);//设置路径
        lv_anim_set_var(&a, label);//将动画绑定对象
        lv_anim_start(&a);//动画开始
    
        lv_anim_set_path_cb(&a, lv_anim_path_step);//设置路径
        lv_anim_set_var(&a, labe2);//将动画绑定对象
        lv_anim_start(&a);//动画开始
    
        lv_anim_set_path_cb(&a, lv_anim_path_ease_in);//设置路径
        lv_anim_set_var(&a, labe3);//将动画绑定对象
        lv_anim_start(&a);//动画开始
    
        lv_anim_set_path_cb(&a, lv_anim_path_ease_out);//设置路径
        lv_anim_set_var(&a, labe4);//将动画绑定对象
        lv_anim_start(&a);//动画开始
    
        lv_anim_set_path_cb(&a, lv_anim_path_ease_in_out);//设置路径
        lv_anim_set_var(&a, labe5);//将动画绑定对象
        lv_anim_start(&a);//动画开始
    
        lv_anim_set_path_cb(&a, lv_anim_path_overshoot);//设置路径
        lv_anim_set_var(&a, labe6);//将动画绑定对象
        lv_anim_start(&a);//动画开始
    
        lv_anim_set_path_cb(&a, lv_anim_path_bounce);//设置路径
        lv_anim_set_var(&a, labe7);//将动画绑定对象
        lv_anim_start(&a);//动画开始
    }

标签:动画,anim,效果,label,lv,set,path,LVGL
From: https://www.cnblogs.com/shumei52/p/18595157

相关文章

  • js轻量级计数器动画特效插件
    countUp.js是一款轻量级的、无依赖的js计数器动画特效插件。它能够帮助我们快速的通过多种方式创建计数器的动态变化效果。通过设置startVal和endVal参数,countUp可以在任何一个方向上计数。countUp兼容新超强,兼容所有的浏览器。在线演示 下载 可用参数target :html元素......
  • Android水波纹效果
    Android水波纹效果需要到水波纹效果的场景还蛮少的。万一刚好你需要呢一、思路:自定义组件SpreadView二、效果图:看视频更直观点:Android轮子分享-水波纹效果三、关键代码:publicclassSpreadViewextendsView{privatePaintcenterPaint;//中心圆paint......
  • 使用canvas画一个小球自由落体的效果
    <!DOCTYPEhtml><html><head><title>自由落体</title><style>body{margin:0;}canvas{display:block;}</style></head><body><canvasid="myCanvas"></canvas><script&g......
  • 如何在PbootCMS中优化图片上传和显示效果?
    在PbootCMS中优化图片上传和显示效果对于提升网站的用户体验和SEO效果至关重要。以下是一些具体的优化方法,帮助你更好地管理图片上传和显示:压缩和优化图片:在上传图片之前,使用专业的图片压缩工具(如TinyPNG、ImageOptim等)对图片进行压缩,减少文件大小。压缩后的图片可以更快地......
  • vscode模拟运行lvgl
    vscode模拟运行lvgl1.安装vscodevscode官网链接,下载最新版本安装vscode一直点击下一步2.安装vscode插件进入vscode左侧拓展安装以下插件3.下载mingw,cmake,sdl!!!如果后面的包下载有问题可以用我提前下好的阿里链接3.1下载和安装mingw(下载win32_seh_msvcrt)下载后直......
  • 从零开始:PySide6制作启动动画
    使用PySide6创建启动窗口动画请看下面演示效果引言在现代软件开发中,一个精美的启动动画可以提升用户体验,增加软件的专业感。本文将详细介绍如何使用PySide6库创建一个简单的启动窗口动画,包括旋转的LOGO图像。环境准备Python3.13PySide6库依赖项为了确保代码能够正......
  • CSDN自定义皮肤-酷炫博客名称+默认显示详细资料+头像旋转+流光效果+半透明
    CSDN自定义皮肤-酷炫博客名称+默认显示详细资料+头像旋转+流光效果+半透明效果预览前言头像旋转博客名称流光效果Banner文字+流光效果Toolbar流光效果模块半透明默认显示详细资料隐藏查看详细资料按钮完整自定义模块代码(持续更新)效果预览效果预览:https://microi.blo......
  • LVGL中roller滚动动画错乱的问题
    LVGL中roller滚动动画错乱的问题最近我在学习bilibili上一个博主的lvgl项目。在其中用到roller来制作一个时钟。我使用style将roller的动画时长拉长到500ms,此时问题出现。roller的内容有两种模式LV_ROLLER_MODE_NORMAL和LV_ROLLER_MODE_INFINITE。在普通模式下roller的滚动正常,但......
  • 使用css画一个3D饼图的效果
    <!DOCTYPEhtml><html><head><title>3DPieChartwithCSS</title><style>body{background-color:#f0f0f0;display:flex;justify-content:center;align-items:center;min-height:100vh;}.pie-chart{wi......
  • 实现多张图片合成一张的效果
    前端实现多张图片合成一张图片,有多种方法,以下是几种常见方案以及代码示例:1.使用CanvasAPI:这是最常用的方法,灵活度高,可以实现各种复杂的合成效果。functionmergeImages(imageUrls,callback){constcanvas=document.createElement('canvas');constctx=canvas.g......