Rive 發佈 Layouts 新功能 只需設計一次 圖片動畫自動適應螢幕大小和各種佈局

Home » 學習資源 » Rive 發佈 Layouts 新功能 只需設計一次 圖片動畫自動適應螢幕大小和各種佈局

Rive 引入的新功能 Layouts 為設計師和開發者提供了一種方法,可以在各種裝置上創建動態、響應式的動畫圖形,同時保持 Rive 標誌性的互動性和動畫流暢性。

新功能讓你可以更輕鬆地建立能自動適應螢幕大小的佈局,例如按鈕、清單或選單,無論是在手機或電腦上都能完美顯示。你可以自由選擇哪些元素跟隨佈局規則,哪些可以獨立展示,還可以為佈局元素添加動畫,讓介面更生動靈活。

動態調整選單大小:設計一個圖形,它可以適用於所有裝置。透過直覺的控制功能,根據位置、尺寸、內邊距和外邊距自動調整圖形大小。使用 Layouts 時,圖形可以根據螢幕尺寸伸縮、重新對齊,而不會失去動畫效果。
跨裝置功能:圖形可以在汽車儀錶板和智慧型手機之間平滑過渡。
多語言支援:創建能夠自動調整大小以適應不同語言的圖形,不再擔心文字是否合適——Rive Layouts 會為您處理好。
可擴展的設計系統:建立可重複使用的元件,適應任何螢幕尺寸,確保在所有平台上的設計一致性。
深層巢狀和靈活性:透過組合對齊、換行和間距選項來建立適應複雜用例的佈局。
斷點(Breakpoints):偵測元件的寬度、高度或縱橫比,以便在 Rive 的狀態機中觸發不同的狀態。這意味著設計者在做響應式佈局時有了更大的自由,可以隨心所欲地安排介面元素,不再被固定的佈局限制住。

支援建立響應式佈局,方便動態調整內容。

可依內容大小自動調整組件,推移其他元素,適應螢幕尺寸或固定到某一邊緣。

新佈局功能可應用於按鈕、清單、選單等,使它們能適應各種裝置大小和方向。

支援為佈局屬性添加動畫,提升設計的互動性和視覺效果。

Rive佈局功能與其他設計工具不同,讓設計者自由選擇物件是否參與佈局引擎,還可以隨時打破佈局規則,自由設計。

1. 動態響應設計

自動調整尺寸和位置:Layouts 允許設計師設計一次圖形,然後在不同的裝置上自動適應尺寸和比例。設計可以透過設定寬度、高度、間距和邊距來實現適應性變化,從而適配從寬螢幕顯示器到小螢幕手機等不同裝置。

自動適應選單:設計的選單和 UI 元件可以根據螢幕尺寸自動調整。 Layouts 可以讓圖形隨螢幕大小縮放、拉伸或重新排列,而不會失去動畫效果或流暢性,避免了每個裝置都要單獨調整的麻煩。

2. 跨裝置相容性

多裝置一致性:Layouts 支援圖形在不同裝置之間平滑過渡,例如在汽車儀錶板、智慧型手機、遊戲控制台等不同平台上保持一致的視覺效果。使用者可以建立一個圖形,它會在各個平台上自動調整,而不需要為每個平台單獨建立版本。

設計系統的可擴展性:Layouts 允許設計師建立可重複使用的 UI 元件,這些元件能夠適應任何螢幕尺寸,確保在不同裝置和平台上的設計一致性。可以將同一元件嵌入多個介面,不用擔心適應性問題。

3. 多語言支持

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

4. 深層嵌套與彈性佈局

複雜佈局支援:Layouts 提供了深層巢狀和靈活佈局的選項,設計師可以使用對齊、換行和間距選項來建立複雜的 UI 佈局。這種深度嵌套的靈活性允許設計師應對最複雜的設計需求,例如多層級的 UI 元素,或在不同螢幕上需要調整的複雜結構。

斷點支援:透過設定斷點(breakpoints),Layouts 可以根據元件的寬度、高度或比例變化觸發 Rive 的狀態機,執行不同的動畫或佈局變更。例如,當螢幕從橫向螢幕切換為垂直螢幕時,Layouts 能夠自動切換到另一種佈局或動畫狀態。

5. 獨特的佈局方式

自由繪圖與佈局引擎的結合:Rive 保留了自由繪圖的靈活性,讓設計師可以選擇是否將物件納入佈局引擎。這意味著,設計師可以將高度動畫化的角色等自由元素嵌入到更結構化的佈局中,以實現靈活的設計效果。即使在進行版面調整時,角色的動畫也能保持流暢,不會受到版面引擎的限制。

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

6. 互動性增強

狀態機的交互控制:Layouts 中的元件可以透過 Rive 的狀態機進行控制,根據組件的寬度、高度或比例觸發不同的狀態變化。這讓設計師可以在佈局中添加互動動畫,例如根據裝置螢幕的不同,觸發不同的動畫序列或回應效果。

全局與局部動畫的結合:Rive 的狀態機還允許在佈局調整時控制動畫的每個細節,使設計師可以在一個設計中混合多種響應式和互動動畫。無論是整體佈局或局部組件都可以設定不同的互動效果,為使用者提供更豐富的視覺體驗。

返回頂端