Motionboard
原片 · Notion Calendar · 0:04–0:08YouTube ↗
Motionboard 复刻

Dock 登场

放大的 Dock 撑开空位长出新图标，冒一次小火花，光标点击后开窗。

完整配方

为什么有效

用观众熟悉的 macOS Dock 动作讲「装了一个新 App」，不需要文字；放射短线只给一次、尺寸极小，强调落点又不抢画面。

参数

时长
空位撑开、图标长出 0.45–0.95s（0.5s，15 帧）；放射短线 0.95–1.30s（每条 0.29s，错开 0.02s，约 9 帧）；光标 1.5s 入画并移动 1.5–2.1s（0.6s，18 帧）；提示标签 2.2s；按下变暗 2.4s（0.1s，3 帧）；窗口 2.5s 起 0.55s 打开；打字 3.45–4.84s；复选框点击 5.8s；窗口 7.4s 收回（0.42s）；图标 7.8s 落定，字标 8.4s 展开（1.2s）；全片 11s
缓动
长出 cubic-bezier(0.34,1.56,0.64,1)（back.out(1.4)）；光标 cubic-bezier(0.65,0,0.35,1)（power3.inOut）；开窗 cubic-bezier(0.16,1,0.3,1)（expo.out）；短线绘出 power2.out、收回 power2.in；关窗 power3.in；字标 expo.out
镜头
Dock 放大 3.0x 锁定在一个点上，到 2.5s 缓推到 3.06x；点击后切到中景（1.0x，缓推到 1.012x），窗口从中心小尺寸放大打开
主体
13 个槽位（12 个图标加一条分隔线）的 macOS Dock；新图标所在槽位 width 0→64px（间距 0→8px），图标 scale 0.6→1 并淡入，Dock 重新居中使相邻图标向两侧滑开；落定后图标右上角弹出四条 2.1px 短线（角度 −96°、−62°、−30°、2°）；光标靠近时 Dock 图标放大 1.58x；打开的窗口是带清单的笔记 App
同步
光标按下的 2.4s 那一帧图标变暗（透明度 0→0.32），0.1s 后 2.5s 开窗；窗口里清单新行以每字符 0.042s 打字，5.8s 点击让复选框打勾、计数变成「3 of 5」、进度条变成 60%，三者同一帧
风格
浅灰白 #efeff2 底，橙、粉、蓝柔和渐变壁纸；磨砂 Dock 底板（backdrop-filter: blur(24px)）；渐变圆角方形图标；尾卡是大图标加字标和一行标语

提示词

用「Dock 登场（Dock Arrival）」展示你的 App 安装：画面是放大 3x、锁定在一个点上的 macOS Dock，镜头极缓慢地推到 3.06x。从 0.45s 起，在两个图标之间用 0.5s 撑开空位，你的 App 图标从空位长出（width 0→64px，间距 0→8px，scale 0.6→1，back.out(1.4)）。落定后图标右上角弹出四条 2.1px 短线，每条 0.13s 绘出、0.29s 内收回，错开 0.02s。1.5s 光标入画，用 0.6s、power3.inOut 移到图标上，光标附近的 Dock 图标放大 1.58x，并出现提示标签。2.4s 图标用 0.1s 变暗，2.5s 切到中景，笔记窗口用 0.55s、expo.out 从 scale 0.16 放大到 1。窗口里按每字符 0.042s 打出一条新清单项，5.8s 点击它的复选框，复选框、计数和进度条同一帧变化。7.4s 窗口用 0.42s、power3.in 收回中心，落下一个大图标（back.out(1.5)），随后图标左移，字标用 clip-path 加 blur 10px→0，在 1.2s 内以 expo.out 展开。

常见说法

  • Dock 里多出一个新图标
  • 图标长出来冒点小火花
  • 点击图标打开窗口

容易混淆

  • 形变接力形变接力是元素连续变形；本条是在 Dock 里新增一个元素，随后点击开窗
  • 堆积清空堆积清空是元素越堆越多再清空；本条只新增一个元素
配方文件 (.md)

更多「亮出产品」