原片 · Vercel v0 · 0:02–0:13YouTube ↗
Motionboard 复刻

形变接力

同一个元素连续变形成下一个元素,代替切镜,整段没有硬切。

原片出处

YouTube ↗
YouTube ↗
YouTube ↗
完整配方

为什么有效

上一段的元素直接成为下一段的主体,画面里始终只有一个形体在变,周围留空;形状、圆角、文字反白在同一帧发生,变形读成一次连续动作。

参数

时长
全片 11s。标题词组上升 0.2–0.9s;标题→横线 1.1–1.3s(0.2s,6 帧),横线→胶囊 1.3–1.6s(0.3s,9 帧),胶囊→输入框 1.7–2.1s(0.4s,12 帧);打字 2.4–3.95s,发送 4.2s;输入框→窗口 4.55–5.3s(0.75s),页面区块 5.0–5.95s;窗口缩成卡片 7.0–7.8s(0.8s,24 帧),11 张画廊卡片 7.6–8.6s;收尾横线→胶囊 9.15–9.65s,停到 11s
缓动
横线展开、输入框和窗口变形 cubic-bezier(0.65,0,0.35,1)(power3.inOut);胶囊加厚、页面区块、缩成卡片和收尾胶囊 cubic-bezier(0.16,1,0.3,1)(expo.out);发送按压 back.out(1.7)
镜头
镜头基本固定;6.2–7.0s 线性慢推 1.00→1.03,7.6–8.6s 画廊出现时 1.03→1.08 并轻微平移(x −24px,y −14px);收尾漂移 9.6–11s 1.00→1.025
主体
一个黑色形体(#111111)同时插值宽、高、圆角:960×3 的横线、960×96 的胶囊(圆角 48)、920×88 的输入框(圆角 44)、1440×820 的窗口(圆角 18,填充 #f6f1e8),最后缩成 0.26 倍的画廊卡片并入其他 11 张;标题缩小成输入框里的占位文字,头像和按钮 0.3s 淡入(1.8s),页面区块上升 24px
同步
胶囊开始加厚后的下一帧标题反白(1.33s,0.04s);周围画廊在卡片成形前一直隐藏(卡片 7.6s 起出现);窗口填充在变形的前 0.3s 内翻成米色
风格
近白色柔光背景(径向 #ffffff → #e9e9e9)配黑色形体;全程只有一个主体;画廊缩略图用 11 种不同网站风格;收尾字标白字,放在 440×112 的黑色胶囊里

提示词

用「形变接力(Morph Relay)」做一段无切镜的连续变形,整段 11 秒,背景近白色柔光。64px 黑色标题按词组上升。标题下展开一条黑色横线(960×3px,0.2s,power3.inOut,cubic-bezier(0.65,0,0.35,1))。横线用 expo.out(cubic-bezier(0.16,1,0.3,1))0.3s 加厚成 96px 的胶囊,标题晚一帧反白。胶囊再用 0.4s(power3.inOut)收窄成 88px 的输入框,标题缩成占位文字,头像和按钮淡入;2.4s 起打出提示词,4.2s 点发送,然后输入框用 0.75s(4.55–5.3s)长成 1440×820、圆角 18px 的浏览器窗口,填充翻成米色,页面区块从 5.0s 起各上升 24px(expo.out 0.5s,错开 0.04–0.06s)。线性慢推 3%,再把整个窗口缩成画廊卡片(scale 0.26,expo.out 0.8s),周围每隔 0.04s 带入另外 11 张卡片。最后开场那条线回来,加厚成黑色胶囊,字标出现在胶囊里。周围元素保持空白,全程只有一个形体在变。

常见说法

  • 一个东西一直变成下一个东西
  • 没有切镜头,一镜到底
  • 标题变成输入框

容易混淆

  • 线框重排线框重排是一组元素先退成线框再整体重排;本条是单个元素逐步变成另一种元素
  • 翻面看代码翻面是同一张卡的正反两面,轴旋转 180°;本条形状连续变化,没有正反面
配方文件 (.md)

更多「讲功能」