草庐IT

LVGL V8动画

临界msp 2025-07-18 原文

动画

/* INITIALIZE AN ANIMATION          		初始化一个动画
 *-----------------------*/
lv_anim_t a;
lv_anim_init(&a);

/* MANDATORY SETTINGS         				必选设置
 *------------------*/
/*Set the "animator" function       		设置“动画”功能*/
lv_anim_set_exec_cb(&a, (lv_anim_exec_xcb_t) lv_obj_set_x); 
/*Set the "animator" function*/
lv_anim_set_var(&a, obj); 
/*Length of the animation [ms]    			动画长度duration毫秒*/
lv_anim_set_time(&a, duration);
/*Set start and end values. E.g. 0, 150     开始值start,结束值end*/
lv_anim_set_values(&a, start, end);

/* OPTIONAL SETTINGS						可选设置
 *------------------*/
/*Time to wait before starting the animation [ms] 在开始动画之前等待的时间delay毫秒*/
lv_anim_set_delay(&a, delay);
/*Set path (curve). Default is linear  设置路径(曲线)。默认是线性的*/
lv_anim_set_path(&a, lv_anim_path_ease_in);
/*Set a callback to call when animation is ready.  设置一个回调函数,当动画准备好时调用 */
lv_anim_set_ready_cb(&a, ready_cb);
/*Set a callback to call when animation is started (after delay).  当动画启动时(延迟后)设置一个回调调用。 */
lv_anim_set_start_cb(&a, start_cb);
/*Play the animation backward too with this duration. Default is 0 (disabled) [ms] 在这个持续时间内向后播放动画。默认为0(禁用)[ms]*/
lv_anim_set_playback_time(&a, wait_time); 
/*Delay before playback. Default is 0 (disabled) [ms]  延迟在回放。默认为0(禁用)[ms]*/
lv_anim_set_playback_delay(&a, wait_time);
/*Number of repetitions. Default is 1.  LV_ANIM_REPEAT_INFINIT for infinite repetition 重复的数量。默认值为1。LV_ANIM_REPEAT_INFINIT表示无限重复*/
lv_anim_set_repeat_count(&a, wait_time);
/*Delay before repeat. Default is 0 (disabled) [ms]  重复前,先等待wait_time毫秒*/
lv_anim_set_repeat_delay(&a, wait_time);
/*true (default): apply the start vale immediately, false: apply start vale after delay when then anim. really starts.
True(默认):立即应用开始阀值,false:延迟后应用开始阀值。真正的开始。 */
lv_anim_set_early_apply(&a, true/false);

/* START THE ANIMATION
 *------------------*/
lv_anim_start(&a);                             /*Start the animation   开始动画*/

动画路径

可以设置 动画的路径 。在最简单的情况下,它是线性的,这意味着开始和结束之间的当前值线性变化。路径主要是根据动画的当前状态计算要设置的下一个值的功能。当前,有以下内置路径功能(回调函数):

  • lv_anim_path_linear 线性动画
  • lv_anim_path_step 一步到位
  • lv_anim_path_ease_in 一开始很慢,渐进效果
  • lv_anim_path_ease_out 最后的速度很慢,渐退效果
  • lv_anim_path_ease_in_out 开头和结尾都很慢,渐进和渐退效果
  • lv_anim_path_overshoot 超出最终值
  • lv_anim_path_bounce 从最终值反弹一点(就像撞墙一样)
lv_anim_path_t path;
lv_anim_path_init(&path);
lv_anim_path_set_cb(&path, lv_anim_path_overshoot);
lv_anim_path_set_user_data(&path, &foo); /* 自定义数据(可选) */

/* 在动画中设置路径 */
lv_anim_set_path(&a, &path);

速度与时间

lv_anim_speed_to_time(speed, start, end) 函数以毫秒为单位计算从给定速度的起始值到结束值所需的时间。
速度以单位/秒为单位进行解释。例如, lv_anim_speed_to_time(20,0,100) 将给出 5000 毫秒。
例如,在 lv_obj_set_x 单位为像素的情况下,因此20表示20 px / sec的速度,从位置0到100需要5s。

实时刷新label

static void set_value(void * var, int32_t v)
{
    lv_label_set_text_fmt(var, "%d", v);
}

void lv_100ask_demo_course_2_1_1(void)
{
    lv_obj_t * obj = lv_obj_create(lv_scr_act());
    lv_obj_set_size(obj, LV_PCT(20), LV_PCT(20));
    lv_obj_align(obj, LV_ALIGN_CENTER, 0, 0);

    lv_obj_t * label = lv_label_create(obj);
    lv_label_set_text(label, "Hello, LVGL!");
    lv_obj_align(label, LV_ALIGN_CENTER, 0, 0);

    lv_anim_t a;
    lv_anim_init(&a);
    lv_anim_set_exec_cb(&a, set_value);
    lv_anim_set_var(&a, label);
    lv_anim_set_values(&a, 0, 100);					//设置开始和结束值
    lv_anim_set_time(&a, 2000);						
    lv_anim_set_repeat_delay(&a, 100);
    lv_anim_set_playback_time(&a, 500);
    lv_anim_set_playback_delay(&a, 100);
    lv_anim_set_repeat_count(&a, LV_ANIM_REPEAT_INFINITE);
    lv_anim_start(&a);
}


如果需要实时刷新某个全局变量,可以直接将v替换为该全局变量gValue

static void set_value(void * var, int32_t v)
{
    lv_label_set_text_fmt(var, "%d", gValue);
}

实时刷新图像

static void set_value(void * img, int32_t v)
{
    lv_img_set_src(img, &image_256x80);        /*设置图片源 From variable*/
}

有关LVGL V8动画的更多相关文章

  1. Unity 3D 制作开关门动画,旋转门制作,推拉门制作,门把手动画制作 - 2

    Unity自动旋转动画1.开门需要门把手先动,门再动2.关门需要门先动,门把手再动3.中途播放过程中不可以再次进行操作觉得太复杂?查看我的文章开关门简易进阶版效果:如果这个门可以直接打开的话,就不需要放置"门把手"如果门把手还有钥匙需要旋转,那就可以把钥匙放在门把手的"门把手",理论上是可以无限套娃的可调整参数有:角度,反向,轴向,速度运行时点击Test进行测试自己写的代码比较垃圾,命名与结构比较拉,高手轻点喷,新手有类似的需求可以拿去做参考上代码usingSystem.Collections;usingSystem.Collections.Generic;usingUnityEngine;u

  2. LVGL V8动画 - 2

    动画/*INITIALIZEANANIMATION 初始化一个动画*-----------------------*/lv_anim_ta;lv_anim_init(&a);/*MANDATORYSETTINGS 必选设置*------------------*//*Setthe"animator"function 设置“动画”功能*/lv_anim_set_exec_cb(&a,(lv_anim_exec_xcb_t)lv_obj_set_x);/*Setthe"animator"function*/lv_anim_set_var(&a,obj);/*Lengthoftheanim

  3. ruby - Carrierwave + MiniMagick - 如何将动画 GIF 压缩到第一帧? - 2

    有人知道如何使用Carrierwave+MiniMagick将动画GIF压缩到第一帧吗? 最佳答案 我认为MiniMagick有一些变化,因为我只花了三个小时试图找出为什么Andrey的代码对我不起作用。我收到以下错误:ActiveRecord::RecordInvalid(Validationfailed:ImageFailedtomanipulatewithMiniMagick,maybeitisnotanimage?OriginalError:Command("mogrify-scene/var/folders/0o/0oqN

  4. ruby-on-rails - 如何在 Ajax 请求处理期间显示动画图标 - Rails 3 - 2

    我正在尝试为每个ajax请求显示一个加载指示器,我在Rails3应用程序中工作。HTML:"loading-indicator",:style=>"display:none")%>CSS:#loading-indicator{position:absolute;left:10px;top:10px;}loading.js:我放在assest/javascripts/$(document).ready(function(){$(document).ajaxSend(function(event,request,settings){$('#loading-indicator').show(

  5. javascript - 在 Fabric js 中的两个对象之间添加动画 - 2

    我有一个非常基本的应用程序,可让您创建形状并用一条线将它们连接起来。为此,您需要执行以下操作。Example1.Clicknewanimation2.addrectangle3.addchild4.addcircle您可以移动形状、拖动和调整大小。我想知道是否可以在两个对象之间添加动画。因此,例如,一个小圆球会在两个物体之间的线上移动。我已经查看了fabricjs动画页面上的演示,但不确定是否可以从对象b执行。这是FIDDLE. 最佳答案 我不知道你是否可以在fabric中使用内置的动画功能,因为正如你所说,这些对象可能会自己移动。

  6. javascript - 有没有可行的方法使用JS触发CSS关键帧动画? - 2

    当然,我们可以使用关键帧创建CSS动画,并从那里控制它。但是,理想情况下,我想通过单击按钮来触发此动画-因此单击按钮将是一个事件...@keyframesfade-in{0%{opacity:0;}100%{opacity:1;}}现在,点击时,我想触发这个动画;而不是在CSS动画属性中。 最佳答案 看这里jsfiddle如果您希望每次按下按钮时动画都起作用,请使用此代码:$('button').click(function(){$(".fademe").addClass('animated');setTimeout(functio

  7. javascript - 如何动画绘制一系列线段 - 2

    我想画一个点,大约1秒后我想画下一个点。这是否可能:我已经试过了:functionsimulate(i){setTimeout(function(){drawPoint(vis,i,i);},1000);}for(vari=1;i不幸的是,这是行不通的。它只是立即绘制整条线。 最佳答案 这是行不通的,因为for循环将立即运行到结束,setTimeouts将被同时调度,所有函数将同时触发。取而代之的是,这样做:vari=1;(functionloop(){if(i++>200)return;setTimeout(function(){

  8. javascript - 在 React Native 中动态添加组件时如何启用流畅的动画? - 2

    在我的ReactNative应用程序中,我有一张带有条件的卡片按下按钮时呈现并在触发相同按钮时删除的组件。这是我的代码的样子:this.setState({triggered:!this.state.triggered})}title="ClicktoExpand"/>Loremipsumdolorsitamet,consecteturadipiscingelit,seddoeiusmodtemporincididuntutlaboreetdoloremagnaaliqua.Utenimadminimveniam,quisnostrudexercitationullamcolabori

  9. javascript - 动画图像在长时间的 Javascript 方法调用期间不动 - 2

    在运行10秒向html添加一些元素的方法中,动画gif根本没有移动,给人一种网页卡住的感觉。任何解决办法。示例代码:$('#button).click(function(){showAnimatedGif();longRunningMethod();hideAnimatedGif();});解决此问题的一种方法是将长时间运行的方法分解为多个步骤并以这种方式设置动画,但是您必须以这种方式为每个长时间运行的方法编写代码。想知道是否还有其他方法可以做到这一点? 最佳答案 确保动画实际发生的唯一方法是让longRunningMethod定期

  10. javascript - 如何通过 javascript 添加动画 svg? - 2

    如果我在纯html/svg文件中编写svg,它工作正常,圆圈动画正确。但是如果我通过javascript动态添加circle元素,则添加了circle,但它没有动画。怎么了?js代码:varsvg=$("svg");//usejqueryvarcircle=document.createElementNS("http://www.w3.org/2000/svg","circle");circle.setAttribute("r","5");circle.setAttribute("fill","red");varani=document.createElementNS("http://

随机推荐