Welcome to BRICKS.
This tutorial covers the third step in working with basic Bricks: controllable vector animations. By completing this chapter, you will easily master the fundamental usage of Bricks in the BRICKS Cloud Intelligent Display.
đ Estimated time to complete this tutorial: 2â3 minutes
Step 1: Add a Lottie Controllable Vector Animation Brick
From the Main Canvas, add a new Lottie Brick.
Step 2: Find a Lottie Animation
Go to the Lottie website: https://lottiefiles.com/
If you donât have an account, please register first in order to use animation links.
Then, under [ Discover ] â [ Free Animations ], browse available animations, or use the search bar at the top-right corner to find a specific animation.
Click on the animation thumbnail to open its details.
Step 3: Copy the Lottie Animation Link
In the animation details page, locate the [ Lottie Animation URL ] and click Copy to obtain the cloud link of the animation file.
Step 4: Paste the Link into the Lottie Brick
Paste the copied link from the Lottie website into the Lottie Brick created in Step 1.
Use the [ Speed ] property variable to adjust the playback speed of the animation.You can save and preview at any time (top-right corner) to check how the animation appears on the display.
Step 5: Adjust the Size and Position of the Lottie Brick
Since Lottie animations are vector-based, they will not lose quality regardless of scaling.
However, using too many or scaling them too large may affect display performance.
Always save your changes and check the results on the display device after adjusting size and quantity.
Congratulations! You have now learned the basic concepts of controllable vector animations.
Congratulationsâyouâve finished reading all tutorials in the Basics section!
If youâre interested in more advanced features, feel free to continue exploring the Advanced Topics collection.
âFor any assistance, please click the chat icon in the bottom-right corner. Our team will respond to your questions as quickly as possible.