The editor of Downcodes will take you to learn about Rive’s latest Layouts feature! It completely solves the problem of screen adaptation for designers and developers, making it easier than ever to create dynamic responsive animated graphics. Instead of creating separate versions for different devices and screen sizes, Layouts can automatically adapt to various platforms to ensure consistent animation effects. It also supports multiple languages and automatically adjusts the layout size to adapt to the text length of different languages. This is undoubtedly a huge boon for developers who pursue a consistent visual experience across platforms.
Designers and developers can finally get rid of the fear of being dominated by "screen adaptation"! Rive recently released a new feature called Layouts, which allows users to create dynamic and responsive animated graphics that can automatically adapt to different devices and screen sizes , while maintaining Rive's signature interactivity and smooth animations.
One of the highlights of Layouts is cross-device compatibility. Graphics transition smoothly between car dashboards and smartphones, maintaining consistent visuals. Designers only need to create a graphic once and it will automatically adjust across platforms, eliminating the need to create separate versions for each platform.
Layouts also supports multiple languages, with the ability to automatically resize layouts based on language length . For example, when the text is long, Layouts can rearrange or resize the text box to accommodate the display requirements of different languages. This ensures consistent display in all languages, and developers don’t need to worry about layout issues that may arise in different languages.
For designers who need to create complex layouts, Layouts offers options for deeply nested and flexible layouts. Designers can use alignment, wrapping, and spacing options to create complex UI layouts, such as multiple levels of UI elements, or complex structures that need to be adjusted on different screens.
Layouts also supports breakpoints , which can trigger Rive's state machine to perform different animations or layout changes based on changes in component width, height, or proportion. For example, Layouts can automatically switch to another layout or animation state when the screen switches from landscape to portrait.
Unlike other design tools, Rive Layouts allows designers to freely choose whether objects participate in the layout engine, and they can also break layout rules at any time and design freely. This means designers can embed free elements such as highly animated characters into more structured layouts for flexible design effects. Even when layout adjustments are made, the character's animation remains fluid and is not restricted by the layout engine.
In addition, Layouts also supports integration with Rive's constraints (Constraints) system, allowing you to break away from traditional hierarchical relationships in design. Even if the UI layout changes, the animation can accurately and controllably maintain the original position and shape, ensuring the stability of the visual effect. For example, when the page layout changes, the constraint system will automatically adjust related elements to avoid layout confusion.
Components in Layouts can be controlled through Rive's state machine, triggering different state changes based on the width, height, or proportion of the component. This allows designers to add interactive animations to their layouts, such as triggering different animation sequences or responsive effects depending on the device screen. Rive's state machine also allows you to control every detail of the animation as the layout adjusts, allowing designers to mix multiple responsive and interactive animations in a single design to provide users with a richer visual experience.
Details: https://rive.app/blog/introducing-layouts
All in all, the emergence of Rive Layouts has brought great convenience to designers and developers, greatly simplified the process of cross-platform animation design, and made better animation design within reach. Go explore it now!