[LVGL] Enhance animations by allowing to interrupt them when another one is sent

[zalexzperez]

Is your feature request related to a problem? Please describe. LVGL send animation action cannot be paused or resumed. When a second animation interrupts the first one, the animation jumps and starts from the first animation's end value.

Detailed Explanation: Imagine an LVGL animation that increases a bar's width to indicate progress. If, halfway through the animation, another animation is triggered to reset the width to 0px, the first animation is abruptly stopped. The second animation starts from the final target width of the first animation (e.g., 320px), rather than the current width at the moment of interruption (e.g., 160px). This means the second animation does not resume from the actual width the bar had when it was interrupted, leading to a nasty jump.

Describe the solution you'd like Consider the start animation on an event as an example of how it should look like. Inspired by other flow actions, it would make sense to have an optional input to the LVGL send animation action. With it, it would be possible to receive another animation's current property value as the starting point. As an extra, allowing the use of variables to control the Start/End values would further enhance the control over animations.

As a final thought, I think it would also make sense to automatically pause and resume animations on bars and sliders when using the animation feature recently added to them. They exhibit the exact same problem: if the variable controlling their value changes during an animation, the bar/slider jumps and starts from the old end value.

Video showing the issue on the bar animation feature:

https://github.com/user-attachments/assets/8dcf3d8b-321c-493f-8932-cb40d9788358