Downcodes小编带你了解Rive最新发布的Layouts功能!它彻底解决了设计师和开发者在屏幕适配上的难题,让创建动态响应式动画图形变得前所未有的简单。无需为不同设备和屏幕尺寸单独创建版本,Layouts 能够自动适应各种平台,保证动画效果的一致性,同时支持多语言,自动调整布局大小以适应不同语言的文本长度。这对于追求跨平台一致性视觉体验的开发者来说,无疑是巨大的福音。
设计师、开发者们终于可以摆脱被“屏幕适配”支配的恐惧了!Rive 近期发布了名为 Layouts 的全新功能,允许用户创建动态且响应式的动画图形,这些图形可以自动适应不同的设备和屏幕尺寸,同时保持 Rive 标志性的交互性和流畅的动画效果。
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 的出现,为设计师和开发者带来了极大的便利,极大地简化了跨平台动画设计的流程,让更优秀的动画设计触手可及。赶紧去探索一下吧!