原片 · Stripe Reader S700 · 0:04–0:08YouTube ↗
Motionboard 复刻

地图落钉

定位钉回弹落下并爆出碎片,镜头拉远到全国,轨迹线划向下一座城市。

原片出处

YouTube ↗
YouTube ↗
完整配方

为什么有效

地图、钉、碎片只用一个品牌色加深蓝和白,信息只有一个点位和一个地名。同一套钉加碎片爆发从图形世界延续到实景街景,把客户从地图上的一个点接到真实门店。

参数

时长
全片 11s。第一座城市:城市名 0.12s 升起,0.5s 落钉(0.3s),0.63s 触地,碎片到 1.27s,停到 3.9s。3.9–4.9s 拉远到全国;4.45s 起 19 枚网络小钉依次弹出;5.0–5.8s 画轨迹线;5.85–6.95s 推近到第二座城市;7.0s 第二枚钉落下;8.05–8.6s 扎进钉里;8.6–11s 结尾卡
缓动
落钉 cubic-bezier(0.34,1.56,0.64,1),0.3s;碎片外扩 cubic-bezier(0.16,1,0.3,1),0.6s(线段先 power2.out 拉长 0.22s,再 power2.in 缩短 0.38s);拉远、轨迹线和推近用 cubic-bezier(0.65,0,0.35,1)(缩放按对数插值);扎入用 t^3;城市名和标签 expo.out
镜头
第一座城市取景约 26 公里宽,每秒推近 4%;1.0s 拉远到全国,之后每秒漂移 2%,1.1s 推近到第二座城市(取景约 23 公里宽,同样每秒推近 4%),8.05–8.6s 扎入,缩放再放大 2.2 倍,钉从 1.45 倍放大到 12 倍
主体
一枚深海军蓝定位钉(缩放 1.45)从上方 360px 落下;触地时爆出 9 个碎片(4 条白线、3 个圆点、2 个方块,其中 1 个为海军蓝),第二枚钉爆出 10 个(4 条线、2 个圆点、3 个方块,其中 2 个为海军蓝,外加一个半径 48 到 150 向外扩张的圆环)。一条 5px 白色轨迹线向北弧形连接两座城市,线头是 11px 圆点。19 枚靛蓝小钉标出已上线城市。结尾卡:钉落定为 1.2 倍,迷你地图上 20 个点加三圈脉冲环,字标、副标和三项数据(21 个美国城市、94 分钟、$0)
同步
168px 城市名(Oswald,43% 白)锁定在地图上,随镜头推近一起缩放;两枚钉和 19 枚城市小钉都跟随镜头。8.6s 钉占满画面中心时切到结尾卡,结尾卡里的钉从同一缩放继续
风格
陆地 #7667f6,水系为更深的紫 #5d4bea,钉为海军蓝 #0f1f3d,白色道路(透明度随缩放变化)、碎片和轨迹线,靛蓝网络小钉 #4a37d6。字标 Inter 700 150px,字距 -0.055em;结尾卡同样是紫色底

提示词

用「地图落钉(Map Pin Drop)」介绍一个客户,全片 11s:陆地 #7667f6,水系为更深的紫 #5d4bea,细白道路,右下角 168px 城市名(Oswald,43% 白)用 expo.out 1 秒升起,并锁定在地图上。第一座城市取景约 26 公里宽,地图每秒推近 4%。0.5s 一枚海军蓝定位钉(#0f1f3d,缩放 1.45)从上方 360px 落下,用 cubic-bezier(0.34,1.56,0.64,1) 在 0.3 秒内回弹;触地时向外爆出 9 个白色碎片(4 条线、3 个圆点、2 个方块),用 cubic-bezier(0.16,1,0.3,1) 外扩 0.6 秒,在触地后 0.42–0.64 秒淡出,钉的标签在 0.24 秒后淡入。3.9s 用 cubic-bezier(0.65,0,0.35,1) 1 秒拉远到全国,19 枚靛蓝小钉以 0.022 秒的间隔弹出。5.0s 用同一条曲线 0.8 秒沿偏北的弧线画出 5px 白色轨迹线(线头为 11px 圆点)连到第二座城市,随后 1.1 秒推近到 23 公里取景,轨迹线尾部收缩成 170px 的短线。7.0s 落下第二枚钉,爆出 10 个碎片(含一个向外扩张的圆环),然后用 0.55 秒(t^3,钉放大到 12 倍)扎进钉里,8.6s 切到结尾卡:钉落定为 1.2 倍,迷你地图上 20 个点加三圈脉冲环,字标、副标和三项数据。

常见说法

  • 地图上落下一枚定位钉,周围炸出碎片
  • 地图拉远到整个国家再飞到下一个城市
  • 一条线从一个城市划到另一个城市

容易混淆

  • 确认爆发确认爆发是点击或付款瞬间的接触点碎片;地图落钉的碎片出现在地图上钉的落点
  • 同位替换同位替换用实景钉换掉地图钉;地图落钉是钉落下、碎片和拉远轨迹
配方文件 (.md)

更多「讲功能」