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 的状态机还允许在布局调整时控制动画的每个细节，使设计师可以在一个设计中混合多种响应式和互动动画。无论是整体布局还是局部组件都可以设置不同的互动效果，为用户提供更丰富的视觉体验。