Uber / V219
Uber Go Get It｜品牌图形动效片段
重复行李箱围绕固定短句滑动与翻转，让旅行主张在连续图案中保持可读。
构图与编排 可播放 · 可替换内容
整体编排规则示例
查看 HTML 源码
<!doctype html><html lang="zh-CN"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Uber Go Get It｜品牌图形动效片段 · sequence</title><style>html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#bceae6}canvas{display:block;width:100%;height:100%;object-fit:contain}</style><body data-mode="sequence"><canvas width="1000" height="600"></canvas><script src="data.js"></script><script src="common.js"></script><script src="scene.js"></script><script src="bridge.js"></script></body></html>画面元素重复行李箱拉杆中心短句倾斜排列
MOTION LANGUAGE
动作与构图
局部动作 · 构图规则
01
同一箱体用不同位置形成图案
同一箱体用不同位置形成图案规则示例
查看 HTML 源码
<!doctype html><html lang="zh-CN"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Uber Go Get It｜品牌图形动效片段 · sequence</title><style>html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#bceae6}canvas{display:block;width:100%;height:100%;object-fit:contain}</style><body data-mode="clip" data-start="2.6" data-end="4.5"><canvas width="1000" height="600"></canvas><script src="data.js"></script><script src="common.js"></script><script src="scene.js"></script><script src="bridge.js"></script></body></html>各箱保持相同透视，斜向平移时使用一致间距。拉杆先伸出，再整体翻转；画面边缘的箱体允许裁切，中心短句保留主要阅读区。
02
冷色产品与暖色文字分层
浅青背景、深蓝箱体和橙红大写短句形成三层。标题用粗无衬线分两行，箱体可短暂遮挡局部字，但不能长时间盖住整句。
03
更换旅行或出行物件
可换背包、鞋或票夹，使用可辨的统一物件。短句不超过两行，循环的始末位置对齐，重复物件不要随机改变颜色与尺度。
SEQUENCE
段落与节奏
点击段落，定位到上方编排示意。
画面参考 · 离散静帧
KEEP THE RELATIONSHIPS
制作其他主题
- 可换背包、鞋或票夹，使用可辨的统一物件。短句不超过两行，循环的始末位置对齐，重复物件不要随机改变颜色与尺度。
制作约束
重复行李箱 / 拉杆 / 中心短句 / 倾斜排列
- 重复行李箱围绕固定短句滑动与翻转，让旅行主张在连续图案中保持可读。
- 各箱保持相同透视，斜向平移时使用一致间距。拉杆先伸出，再整体翻转；画面边缘的箱体允许裁切，中心短句保留主要阅读区。
- 浅青背景、深蓝箱体和橙红大写短句形成三层。标题用粗无衬线分两行，箱体可短暂遮挡局部字，但不能长时间盖住整句。