I am creating an UI for fresh air damper display where I want to show the On/Off status of damper using an animation. Is there any way to achieve this, and if not then how to create flowing air animation in squareline.
also I want to stop the animation when air damper button is off.
GIF ,mp4 formats are not supported.
You can create an image-frame based animation (with similar results as an animated GIF) from a series of images called ‘image set’ in SquareLine Studio. (They should have the names with the same beginning in the assets folder but be numbered, there’s a description for that). You can set the animation to loop infinitely. To stop it, I still don’t see an ‘lv_anim_stop’ command in LVGL-9.1 API-document, so I guess you could do that with ‘lv_anim_delete’. (Or maybe there’s another way/workaround to stop the animation like changing its image-source from code, whatever…)
A possibly good workaround for stopping the animation is wrapping it by a timeline. Because timeline has a ‘pause’ functionality and it seems to be able to stop any animation in the middle, as seen in the timeline example at LVGL-document: Animations — LVGL documentation
Thank you, Hermit, for your response. I couldn’t find lv_anim_delete() in the code generated by Squareline Studio, nor is it available in the software. However, I did notice that lv_anim_delete() is mentioned in the LVGL documentation.
In the code generated by Squareline Studio, I see lv_anim_timeline_stop() and lv_anim_timeline_del() instead. Could you please guide me on how I can delete the animation when the button controlling it is turned off?
I tried almost everything to my knowledge to have the desired animation yet no success. The only thing I need is to create continues wave animation but it is difficult to make it.
What I tried: increased no. of image frames, every combination in animation setting to have continues periodic wave.
Please can you help with any example for this any video or screenshot it would be very helpful
Hi, If you want a continuous wave animation, the animation in the Smartwatch demo could be a good starting point. Note that in SquareLine, there is no option to stop or delete the animation. Therefore, you need to set up the loop animation start in the initial actions section of the hierarchy panel. You can also find this example in the demo project.
I tried to make animation using frames attached below
vent frames.zip (22.7 KB)
and animation I want is
but animation i am getting is
The animation in the vend frames.zip and the first video animations are different. In the first video, the air wave path is animated. In the second video, the air wave is just moving.
Check the animation on the device. Sometimes, the Squareline preview and the actual animation on the device may have slight variations. Also, refer to the LVGL documentation for more information.
if you like you can check my video and check pinned comment. https://youtu.be/kH3wrss0phg
that was a great help Now I am able to have smooth animation
