Label animation

How-to
1

Hello

Is there the possibility to animate a label in order to be written one letter by another? I mean for instance for the label “Hello!”:

start of animation
label at step0: H
label at step1 He
label at step2 Hel
label at step3 Hell
label at step4 Hello
label at step5 Hello!
end of animation (or restart cyclically from the beginning)

Thank you and kind regards,

Francesco

2

I forgot to indicate that I’m using version 8.3.10

Thank you and kind regards,

Francesco

3

For example try animate interletter space …

4

Hello
Thanks, but what is the practical way to reach the aim using the LVGL functions? Is there a specific animation for this? I noticed the animation for scrolling a label, but it is different from what I would like to do. Can you help me with a practical example?
Thank you and kind regards,
Francesco

5

Hello, can someone help me about this topic?

Thank you and kind regards,

Francesco

6

https://docs.lvgl.io/9.4/examples.html#animations

FYI animation cb can do anything as in example codes …

lv_anim_set_exec_cb(&a, anim_charspace_cb);
7

Hello

Thank you, but sorry I’m new at LVGL so I’m not sure to have understoodden. Do you mean that I have to create an anim_charspace_cb callback passing a char* a and in that callback I have to write letters of char* a a one-by-one? Could you write a more explicable example please?

Please consider my first topic where I explained the animation I would like to implement:

start of animation
label at step0: H
label at step1 He
label at step2 Hel
label at step3 Hell
label at step4 Hello
label at step5 Hello!
end of animation (or restart cyclically from the beginning)

Thank you and kind regards,

Francesco

8

@FrancescoSolito

I created a simple example using animations. You might need to change some functions depending on your LVGL version. Feel free to ask about this example.

const char letters[] = "Hello";

void animation_exe_cb(void *obj, int32_t v)
{
    printf("Sequence = %d\n", v);

    if (v > 4)
    {
        lv_label_set_text((lv_obj_t *)obj, "");
    }
    else
    {
        char new_txt[6] = {0};

        for (int i = 0; i <= v; i++)
        {
            new_txt[i] = letters[i];
        }
        new_txt[v + 1] = '\0';

        printf("New text %s\n", new_txt);

        lv_label_set_text((lv_obj_t *)obj, new_txt);
    }
}
void create_your_label(void)
{
  lv_obj_t *label = lv_label_create(lv_screen_active());
  lv_label_set_text(label, "");
  lv_obj_center(label);
  lv_obj_set_style_text_font(label, &lv_font_montserrat_20, 0);

  lv_anim_t animation;
  lv_anim_init(&animation);
  lv_anim_set_var(&animation, label);
  lv_anim_set_duration(&animation, 3000);
  lv_anim_set_values(&animation, 0, 5);
  lv_anim_set_exec_cb(&animation, animation_exe_cb);
  lv_anim_set_repeat_count(&animation, LV_ANIM_REPEAT_INFINITE);
  lv_anim_start(&animation);
}
9

Thank you very much for you suggestion. I’ll try to use it (but I can’t do it immediately in this period).

Kind regards,

Francesco

10

Try use LVGL/MicroPython Simulator

and paste code


# Initialize

import display_driver
import lvgl as lv

# Create a button with a label
# callback letter spacing
def set_letter_space(obj, v):
    obj.set_style_text_letter_space(v, lv.PART.MAIN | lv.STATE.DEFAULT)

scr = lv.obj()
btn = lv.button(scr)
btn.align(lv.ALIGN.CENTER, 0, 0)
btn.set_width(140)
label = lv.label(btn)
label.set_text('Hello World!')
label.set_style_text_letter_space(100, lv.PART.MAIN | lv.STATE.DEFAULT)
lv.screen_load(scr)

# create anim
anim = lv.anim_t()
anim.init()

anim.set_var(label)                         # objekt (label)
anim.set_values(100, 2)                     # od -> do
anim.set_time(4000)                         # trvanie v ms

anim.set_custom_exec_cb(lambda a, v: set_letter_space(label, v))

# optional: easing
anim.set_path_cb(lv.anim_t.path_ease_in_out)

# run it
lv.anim_t.start(anim)
11

Thank you, I’ll try also this solution.

Kind regards,

Francesco

1 Like