Menu

  • Home
  • Trending
  • Recommended
  • Latest

分类目录

  • AI 工具
  • AI新势力
  • XiaoHu.AI 学院
    • AI 教程
    • AI 课程
  • XiaoHu.AI日报
  • 开源项目案例库
    • AI 论文
    • AI 资源
    • AI 项目
XiaoHu.AI学院
  • Home
  • AI 工具
  • XiaoHu.AI 学院
    • AI 教程
    • AI 课程
  • XiaoHu.AI日报
  • 开源项目案例库
    • AI 论文
    • AI 资源
    • AI 项目
  • 加入会员
  • →社群
No Result
View All Result
  • Login
XiaoHu.AI学院
No Result
View All Result
Home AI 工具

Rive 发布 Layouts 新功能 只需设计一次 图像动画自动适应屏幕大小和各种布局

by 小互
2024年11月5日
in AI 工具, XiaoHu.AI日报
0 0
0
Rive 发布 Layouts 新功能 只需设计一次 图像动画自动适应屏幕大小和各种布局
0
SHARES
644
VIEWS
Share on FacebookShare on Twitter

Rive 引入的新功能 Layouts 为设计师和开发者提供了一种方法,可以在各种设备上创建动态、响应式的动画图形,同时保持 Rive 标志性的交互性和动画流畅性。

新功能让你可以更轻松地创建能自动适应屏幕大小的布局,比如按钮、列表或菜单,无论是在手机还是电脑上都能完美显示。你可以自由选择哪些元素跟随布局规则,哪些可以独立展示,还可以为布局元素添加动画,让界面更生动灵活。

  • 动态调整菜单大小:设计一个图形,它可以适用于所有设备。通过直观的控制功能,根据位置、尺寸、内边距和外边距自动调整图形大小。使用 Layouts 时,图形可以根据屏幕尺寸伸缩、重新对齐,而不会丢失动画效果。
  • 跨设备功能:图形可以在汽车仪表盘和智能手机之间平滑过渡。
  • 多语言支持:创建能够自动调整大小以适应不同语言的图形,不再担心文字是否合适——Rive Layouts 会为您处理好。
  • 可扩展的设计系统:构建可重用的组件,适应任何屏幕尺寸,确保在所有平台上的设计一致性。
  • 深层嵌套和灵活性:通过组合对齐、换行和间距选项来构建适应复杂用例的布局。
  • 断点(Breakpoints):检测组件的宽度、高度或纵横比,以便在 Rive 的状态机中触发不同的状态。
视频播放器
11月5日 1

Media error: Format(s) not supported or source(s) not found

下载文件: https://img.xiaohu.ai/2024/11/11%E6%9C%885%E6%97%A5-1.mp4
00:00
00:00
00:00
使用上/下箭头键来增高或降低音量。

这意味着设计者在做响应式布局时有了更大的自由,可以随心所欲地安排界面元素,不再被固定的布局限制住。

  • 支持创建响应式布局,方便动态调整内容。
  • 可以根据内容大小自动调整组件,推移其他元素,适应屏幕尺寸或固定到某一边缘。
  • 新布局功能可应用于按钮、列表、菜单等,使它们能适应各种设备大小和方向。
  • 支持为布局属性添加动画,提升设计的互动性和视觉效果。
  • Rive布局功能与其他设计工具不同,允许设计者自由选择对象是否参与布局引擎,还可以随时打破布局规则,自由设计。

1. 动态响应设计

  • 自动调整尺寸和位置:Layouts 允许设计师设计一次图形,然后在不同的设备上自动适应尺寸和比例。设计可以通过设置宽度、高度、间距和边距来实现适应性变化,从而适配从宽屏显示器到小屏幕手机等不同设备。
  • 自动适应菜单:设计的菜单和 UI 组件可以根据屏幕尺寸自动调整。Layouts 可以让图形随屏幕大小缩放、拉伸或重新排列,而不会失去动画效果或流畅性,避免了每个设备都要单独调整的麻烦。
    视频播放器
    jGRSyb0PiIOjSNLrObts60

    Media error: Format(s) not supported or source(s) not found

    下载文件: https://img.xiaohu.ai/2024/11/jGRSyb0PiIOjSNLrObts60.mp4
    00:00
    00:00
    00:00
    使用上/下箭头键来增高或降低音量。

2. 跨设备兼容性

  • 多设备一致性:Layouts 支持图形在不同设备之间平滑过渡,例如在汽车仪表盘、智能手机、游戏控制台等不同平台上保持一致的视觉效果。用户可以创建一个图形,它会在各个平台上自动调整,而不需要为每个平台单独创建版本。
    视频播放器
    1OW6s7XXhvILXyhQbP6QOvGk

    Media error: Format(s) not supported or source(s) not found

    下载文件: https://img.xiaohu.ai/2024/11/1OW6s7XXhvILXyhQbP6QOvGk.mp4
    00:00
    00:00
    00:00
    使用上/下箭头键来增高或降低音量。
  • 设计系统的可扩展性:Layouts 允许设计师构建可复用的 UI 组件,这些组件能够适应任何屏幕尺寸,确保在不同设备和平台上的设计一致性。可以将同一组件嵌入多个界面,不用担心适应性问题。
    视频播放器
    Bn3gaioFjLBAnXurrNaae31nqH8

    Media error: Format(s) not supported or source(s) not found

    下载文件: https://img.xiaohu.ai/2024/11/Bn3gaioFjLBAnXurrNaae31nqH8.mp4
    00:00
    00:00
    00:00
    使用上/下箭头键来增高或降低音量。

3. 多语言支持

  • 自动调整文本布局:Layouts 支持多语言,能够根据语言长度自动调整布局大小。例如,当文本长度较长时,Layouts 可以重新排列或调整文本框大小,以适应不同语言的显示要求。这让开发者无需担心不同语言可能造成的排版问题,保证了所有语言的显示效果一致。
    视频播放器
    0scqpymva6SmK0ZDGayFB9vN3E

    Media error: Format(s) not supported or source(s) not found

    下载文件: https://img.xiaohu.ai/2024/11/0scqpymva6SmK0ZDGayFB9vN3E.mp4
    00:00
    00:00
    00:00
    使用上/下箭头键来增高或降低音量。

4. 深层次嵌套和灵活布局

  • 复杂布局支持:Layouts 提供了深层嵌套和灵活布局的选项,设计师可以使用对齐、换行和间距选项创建复杂的 UI 布局。这种深度嵌套的灵活性允许设计师应对最复杂的设计需求,例如多层级的 UI 元素,或在不同屏幕上需要调整的复杂结构。
    视频播放器
    5HnRclWKgeKHshByjYbqtgIpJk4

    Media error: Format(s) not supported or source(s) not found

    下载文件: https://img.xiaohu.ai/2024/11/5HnRclWKgeKHshByjYbqtgIpJk4.mp4
    00:00
    00:00
    00:00
    使用上/下箭头键来增高或降低音量。
  • 断点支持:通过设置断点(breakpoints),Layouts 可以根据组件的宽度、高度或比例变化触发 Rive 的状态机,执行不同的动画或布局变化。例如,当屏幕从横屏切换为竖屏时,Layouts 能够自动切换到另一种布局或动画状态。
    视频播放器
    NphGufvWC36rxf1MpVYz8qykvJQ

    Media error: Format(s) not supported or source(s) not found

    下载文件: https://img.xiaohu.ai/2024/11/NphGufvWC36rxf1MpVYz8qykvJQ.mp4
    00:00
    00:00
    00:00
    使用上/下箭头键来增高或降低音量。

5. 独特的布局方式

  • 自由绘图与布局引擎的结合:Rive 保留了自由绘图的灵活性,让设计师可以选择是否将对象纳入布局引擎。这意味着,设计师可以将高度动画化的角色等自由元素嵌入到更结构化的布局中,实现灵活的设计效果。即使在进行布局调整时,角色的动画也能保持流畅,不会受到布局引擎的限制。
    视频播放器
    ilA10a5Pe4SkPIrFIQa7trUqzU

    Media error: Format(s) not supported or source(s) not found

    下载文件: https://img.xiaohu.ai/2024/11/ilA10a5Pe4SkPIrFIQa7trUqzU.mp4
    00:00
    00:00
    00:00
    使用上/下箭头键来增高或降低音量。
  • 约束与布局的结合:Layouts 支持与 Rive 的约束(Constraints)系统结合,允许在设计中脱离传统的层级关系。即使 UI 布局发生变化,动画也能精确且可控地保持原有位置和形状,保证视觉效果的稳定性。例如,当页面布局发生改变时,约束系统会自动调节相关元素,避免出现布局错乱。
    视频播放器
    reorder-fun-with-rive-layouts-720-ytshorts.savetube.me

    Media error: Format(s) not supported or source(s) not found

    下载文件: https://img.xiaohu.ai/2024/11/reorder-fun-with-rive-layouts-720-ytshorts.savetube.me_.mp4
    00:00
    00:00
    00:00
    使用上/下箭头键来增高或降低音量。

6. 交互性增强

  • 状态机的交互控制:Layouts 中的组件可以通过 Rive 的状态机进行控制,根据组件的宽度、高度或比例触发不同的状态变化。这让设计师可以在布局中添加互动动画,例如根据设备屏幕的不同,触发不同的动画序列或响应效果。
  • 全局与局部动画的结合:Rive 的状态机还允许在布局调整时控制动画的每个细节,使设计师可以在一个设计中混合多种响应式和互动动画。无论是整体布局还是局部组件都可以设置不同的互动效果,为用户提供更丰富的视觉体验。
    视频播放器
    DFDXYwpAJJn9200jGkHbmeLjI

    Media error: Format(s) not supported or source(s) not found

    下载文件: https://img.xiaohu.ai/2024/11/DFDXYwpAJJn9200jGkHbmeLjI.mp4
    00:00
    00:00
    00:00
    使用上/下箭头键来增高或降低音量。

官方介绍:https://rive.app/blog/introducing-layouts

Related Posts

Meta AI提出了一种新的语言模型架构“Large Concept Model (LCM)  让模型更像人类思考
XiaoHu.AI日报

Meta AI提出了一种新的语言模型架构“Large Concept Model (LCM) 让模型更像人类思考

2024年12月25日
480
阿里巴巴推出QVQ-72B 一个基于Qwen2-VL-72B的新型多模态推理模型
XiaoHu.AI日报

阿里巴巴推出QVQ-72B 一个基于Qwen2-VL-72B的新型多模态推理模型

2024年12月25日
334
Fireworks AI新功能 能够将图像或PDF等非文本内容转化为LLM可理解的结构化文本
AI 工具

Fireworks AI新功能 能够将图像或PDF等非文本内容转化为LLM可理解的结构化文本

2024年12月24日
445
Hume AI推出全能文本与语音引擎 OCTAVE 根据文本实时生成特定人格特质的声音
XiaoHu.AI日报

Hume AI推出全能文本与语音引擎 OCTAVE 根据文本实时生成特定人格特质的声音

2024年12月24日
277
Anthropic 公布了一种全新的 AI 越狱技术 可以轻松破解所有前沿模型
AI 论文

Anthropic 公布了一种全新的 AI 越狱技术 可以轻松破解所有前沿模型

2024年12月23日
611
INFP:基于音频驱动的双人对话中的互动头像生成  能自动区分谁在说话,谁在听
AI 项目

INFP:基于音频驱动的双人对话中的互动头像生成 能自动区分谁在说话,谁在听

2024年12月22日
425

Recommendeds

Newton:能理解和推理物理世界的模型 实时了解真实世界

Newton:能理解和推理物理世界的模型 实时了解真实世界

453 VIEWS
2024年4月14日
Upwork 研究报告:96%的高管希望AI工具能提高企业效率 而71%的员工却感到适得其反

Upwork 研究报告:96%的高管希望AI工具能提高企业效率 而71%的员工却感到适得其反

171 VIEWS
2024年7月30日
Med-Gemini:基于Google Gemini的多模态医学大模型 可以理解手术视频

Med-Gemini:基于Google Gemini的多模态医学大模型 可以理解手术视频

553 VIEWS
2024年4月30日
MeloTTS: 高质量多语言文本转语音(TTS)库 支持中英混合

MeloTTS: 高质量多语言文本转语音(TTS)库 支持中英混合

226 VIEWS
2024年3月11日
Imagine Flash:加速Emu扩散模型 提高生成图像的速度和质量

Imagine Flash:加速Emu扩散模型 提高生成图像的速度和质量

158 VIEWS
2024年4月19日
让 AI 像人类一样通过试错法学习决策和推理 提高其逻辑推理和数学能力

让 AI 像人类一样通过试错法学习决策和推理 提高其逻辑推理和数学能力

92 VIEWS
2024年6月16日
Multi-LoRA:动态集成多个LoRAs 来精确控制图像的生成过程

Multi-LoRA:动态集成多个LoRAs 来精确控制图像的生成过程

126 VIEWS
2024年3月2日
SAMPLE:自动化蛋白质设计系统 自己设计和测试新的蛋白质

SAMPLE:自动化蛋白质设计系统 自己设计和测试新的蛋白质

23 VIEWS
2024年3月6日
谷歌开发出一种名为HeAR的生物声学模型 可通过咳嗽、说话、呼吸检测疾病

谷歌开发出一种名为HeAR的生物声学模型 可通过咳嗽、说话、呼吸检测疾病

145 VIEWS
2024年8月21日
Seed-TTS:由字节跳动开发的几乎完美接近人类的文本到语音(TTS)模型

Seed-TTS:由字节跳动开发的几乎完美接近人类的文本到语音(TTS)模型

2.3k VIEWS
2024年6月7日

Copyright (c) 2024 by Xiaohu.AI.

  • About
  • Contact

Welcome Back!

Login to your account below

Forgotten Password?

Retrieve your password

Please enter your username or email address to reset your password.

Log In

Add New Playlist

- Select Visibility -

    No Result
    View All Result
    • Home
    • AI 工具
    • XiaoHu.AI 学院
      • AI 教程
      • AI 课程
    • XiaoHu.AI日报
    • 开源项目案例库
      • AI 论文
      • AI 资源
      • AI 项目
    • 加入会员
    • →社群
    • Login

    © 2024 Xiaohu.AI

    Are you sure want to unlock this post?
    Unlock left : 0
    Are you sure want to cancel subscription?
    转到手机版