設計師、開發者們終於可以擺脫被“屏幕適配”支配的恐懼了!Rive 近期發佈了名爲 Layouts 的全新功能，允許用戶創建動態且響應式的動畫圖形，這些圖形可以自動適應不同的設備和屏幕尺寸，同時保持 Rive 標誌性的交互性和流暢的動畫效果。

image.png

Layouts 到底是個啥?簡單來說，它就像個“萬能佈局神器”，可以讓你的動畫自動適應各種屏幕大小，而且還能保持 Rive 一貫的絲滑流暢!

使用 Layouts，設計師可以輕鬆創建自動適應屏幕大小的佈局，例如按鈕、列表或菜單，無論是在手機還是電腦上都能完美顯示。 設計師可以自由選擇哪些元素跟隨佈局規則，哪些可以獨立展示。 

此外，還可以爲佈局元素添加動畫，使界面更生動靈活。 例如，可以設計一個圖形，根據位置、尺寸、內邊距和外邊距自動調整大小，以適應所有設備。 使用 Layouts 時，圖形可以根據屏幕尺寸伸縮、重新對齊，而不會丟失動畫效果。

Layouts 的一大亮點是跨設備兼容性。 圖形可以在汽車儀表盤和智能手機之間平滑過渡，保持一致的視覺效果。 設計師只需創建一次圖形，它就會在各個平臺上自動調整，無需爲每個平臺單獨創建版本。

Layouts 還支持多語言，能夠根據語言長度自動調整佈局大小。 例如，當文本長度較長時，Layouts 可以重新排列或調整文本框大小，以適應不同語言的顯示要求。 這確保了所有語言的顯示效果一致，開發者無需擔心不同語言可能造成的排版問題。

對於需要創建複雜佈局的設計師來說，Layouts 提供了深層嵌套和靈活佈局的選項。 設計師可以使用對齊、換行和間距選項創建複雜的 UI 佈局，例如多層級的 UI 元素，或在不同屏幕上需要調整的複雜結構。

Layouts 還支持斷點（Breakpoints）功能，可以根據組件的寬度、高度或比例變化觸發 Rive 的狀態機，執行不同的動畫或佈局變化。 例如，當屏幕從橫屏切換爲豎屏時，Layouts 能夠自動切換到另一種佈局或動畫狀態。

與其他設計工具不同的是，Rive Layouts 允許設計師自由選擇對象是否參與佈局引擎，還可以隨時打破布局規則，自由設計。 這意味着設計師可以將高度動畫化的角色等自由元素嵌入到更結構化的佈局中，實現靈活的設計效果。 即使在進行佈局調整時，角色的動畫也能保持流暢，不會受到佈局引擎的限制。

此外，Layouts 還支持與 Rive 的約束（Constraints）系統結合，允許在設計中脫離傳統的層級關係。 即使 UI 佈局發生變化，動畫也能精確且可控地保持原有位置和形狀，保證視覺效果的穩定性。 例如，當頁面佈局發生改變時，約束系統會自動調節相關元素，避免出現佈局錯亂。

Layouts 中的組件可以通過 Rive 的狀態機進行控制，根據組件的寬度、高度或比例觸發不同的狀態變化。 這讓設計師可以在佈局中添加互動動畫，例如根據設備屏幕的不同，觸發不同的動畫序列或響應效果。 Rive 的狀態機還允許在佈局調整時控制動畫的每個細節，使設計師可以在一個設計中混合多種響應式和互動動畫，爲用戶提供更豐富的視覺體驗。

詳情：https://rive.app/blog/introducing-layouts