UI 形变动画设计

一个形状如何撑起整支短片

短片时长14秒,节奏为120 BPM,源文档将其划分为7小节。一个形状从“Generate”按钮开始,依次变为加载器、对勾、灵动岛、音乐播放器、音量滑块、开关、标签指示器、图表、命令面板和提示条,最后回到按钮。

代价是每个状态都必须能通过调整同一主体的尺寸和圆角,从上一个状态到达。无法适应这种形状变化的内容,只能舍弃或重新设计。

解读播放器、标签页和命令面板画面

三个截取的画面展示了同一个形状可以多么不同。在播放器中,黑色圆角卡片承载渐变块、“motion study 02”、位于0:49且剩余−2:09的进度条,以及上一首、播放和下一首图标。在标签页画面中,白色胶囊容纳 Day、Week 和 Month,Day 后面有一个黑色指示器。

在命令面板中,输入的单词“frame”带出两条结果:“Frame rate · 60fps”和“Every frame is code”,第一条高亮显示。

01

清晰易读的播放状态

已播放和剩余时间标签位于进度条下方。它们是14秒短片内的示意性界面内容,并非展示视频本身的时长。将播放器改编到较小画布时,请保持这两个标签清晰可读。

02

标签指示器是一个运动的对象

黑色的 Day 胶囊位于白色轨道内,而光标悬停在 Month 上。由于指示器是独立的形状,它可以在标签之间滑动和拉伸,而不是简单切换高亮。

03

命令面板文字与短片呼应

结果“Frame rate · 60fps”和“Every frame is code”谈的正是作品本身。可以沿用这个思路,但请把文字替换成你自己的产品词汇。

时间驱动的构建方式及其取舍

源文档描述了一个单一的 render(t) 函数,它根据主时间轴时间绘制整个画面。每个可见数值都是 t 的纯函数,使用缓动、弹簧或关键帧,帧与帧之间不携带任何状态。因此向后拖动时间轴会重现完全相同的画面。

这让导出结果可预测,但对制作者要求更高。用事件处理很容易实现的交互,例如悬停或输入,必须改写成带时间的关键帧。

1. 只保留一个时钟

   GSAP 主时间轴是唯一的时钟。各图层读取它的当前时间,而不是运行自己的计时器。

2. 为每次变化叠加弹簧

   改编说明要求为每次变化叠加弹簧,让重叠的运动相互融合,而不是重新开始。

3. 让光标引发一切

   每次状态变化之前都需要一个指针动作。没有这条规则,形变看起来就只是装饰,而不是交互。

来源与范围

这是 OpenDesign 官方对 @twoclipping 最初发布在 X 上的一件动效作品的代码重制与改编。它根据已发布的作品用代码重建,14秒的配乐是原创配乐,而非来自原作的音频。署名仅为事实性参考,并不意味着原作者的认可。

这是一项渲染出来的动效研究,而不是可用的界面产品。短片中的播放器、图表和命令面板不会响应输入。该模板来自一个拟议中的 OpenDesign 视频工作流;能否使用取决于所安装的版本。

将形变改编到你自己的产品

说明建议替换 SHAPE 定义中的各个状态及其内容,同时保留三条规则:从不切镜的单一形状、为每次变化叠加弹簧、每次变化背后都有光标。先列出你最需要展示的五个产品状态,再按容器从小到大排序。

如果想要循环,请让首尾状态保持一致。如果各状态的尺寸差异很大,过渡帧会显得被拉伸,请相应放慢节奏。