Rive 推出了全新功能Layouts,徹底改變了動畫圖形的屏幕適配方式!告別繁瑣的適配工作,設計師和開發者們從此可以輕鬆創建動態且響應式的動畫,這些動畫能夠自動適應各種屏幕尺寸和設備,並始終保持Rive 獨特的交互性和流暢性。 Layouts 功能就像一個“萬能佈局神器”,讓您的動畫在不同平台上都能完美呈現,無需為每個平台單獨製作版本。它支持深層嵌套和靈活佈局,並能與Rive 的約束系統結合,實現更精細、更穩定的動畫效果。
設計師、開發者們終於可以擺脫被“屏幕適配”支配的恐懼了!Rive 近期發布了名為Layouts 的全新功能,允許用戶創建動態且響應式的動畫圖形,這些圖形可以自動適應不同的設備和屏幕尺寸,同時保持Rive 標誌性的交互性和流暢的動畫效果。

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
總而言之,Rive Layouts 的出現為動畫設計帶來了革命性的變化,它簡化了屏幕適配流程,賦予設計師和開發者前所未有的自由和創作空間,讓動畫設計更高效、更便捷,也更具創造力。 趕快體驗Rive Layouts,開啟動畫設計的新篇章吧!