砸落计数器
大数字快速滚动、长长减速,落定时砸一下,背后闪光、下方划线。
实时循环 · 6 秒 · 1920×1080 · 24 fps
参数
| 参数 | 类型 | 作用 |
|---|---|---|
| value / from / decimals / unit | number / string | counter:落定的数字、起始值、小数位、数字后的单位 |
| label | string | counter:数字上方的一句短话;bars / curve:图表标题 |
| items | [{label, value, display?}] | tubes(2–4)/ bars(2–5):各项数值;display 替换落定后显示的数字 |
| ratio / max / highlight | string | false / number / index | tubes:砸在最后一根管顶的倍数(默认 ×末项/首项);满刻度;bars:主角那一条 |
| gauges | [{label, value 0..1, zone?}] | gauges:1–3 个表盘;指针摆到 value,zone 是目标弧段 |
| one / many / icon | {label} / {label, count} / icon | pictogram:左边的一个、右边的许多(最多 400)和单位图标 |
| series / xLabel / yLabel | [{label, values[], highlight?}] | curve:1–3 条曲线;短的那条提前停住并标出终点 |
| motion_ms | ms | 主运动的时长(滚动、灌注、生长、计数、描线) |
| ease | {"<move>": ease} | 重调任一具名动作(见本条的动作表):预设名("out-expo")、三次贝塞尔 [x1, y1, x2, y2]、{spring: [频率, 阻尼]} 或 {trapezoid: [加速, 减速]}。动作名或曲线写错会直接报错,绝不悄悄退回默认。参考片里量出来的动作(复刻工作台 measure/*.json,按帧号存)不用手工转换:MV.fitEase(doc, "x", {from: 133, to: 142}) 或 motion-fit <文件> --measure x --from 133 --to 142 --ease 直接得到曲线 |
| camera | {focal?, x?, y?, z?} | 场景相机:平移 x / y、推进 z,可写数字或关键帧 [[毫秒, 值, 缓动?], ...];不同深度的物体移动量不同(真实视差)。焦距默认 1800 |
| brand | hex默认: #6B5BFF | 网站的品牌色;组件由它推出强调色(在舞台上对比度 ≥ 3:1)、面板色和文字色 |
| stage | "dark" | "light"默认: "dark" | 组件所在的舞台:深色或浅色 |
| display | font stem默认: "Inter-Bold" | 标题字体;在调用里写出它的名字,运行时才会加载 |
| body | font stem默认: "Inter-Regular" | 界面 / 正文字体;在调用里写出它的名字,运行时才会加载 |
| start_ms | ms默认: 300 | 组件开始的时间,镜头内的毫秒数 |
| background | boolean默认: false | 画出舞台背景(关闭时透明,叠在镜头自己的背景上) |
| place | {x, y, w, h, z?} | 组件在镜头布局里的位置:把它 1920x1080 的构图缩放进这个舞台矩形(居中、保持比例);z 决定组件之间的前后。默认整个舞台 |
动作与缓动曲线
每个动作都有自己的缓动。用 ease: { "<动作>": <曲线> } 重调其中一个,可写曲线名或贝塞尔手柄。
| 动作 | 曲线 | 作用 |
|---|---|---|
| in | house | 数字淡入并放大(0.92 → 1) |
| roll | out-expo | 数字从起始值滚动到落定值 |
| slam.drop | in-quad | 落地时从 1.5 倍砸下到 0.94 倍 |
| slam.settle | in-out-sine | 从 0.94 倍回到 1 倍 |
| underline | out-quart | 落地后下划线扫出 |
| label | house | 上方一行字升入 |
本演示的取值
| variant | "counter" |
|---|---|
| value | 90 |
| unit | "秒" |
| label | "你的发布片" |
| brand | #F2A03D |
| stage | dark |
<script src="/vendor/motion-vocab.js"></script>
MV.bind("s3", MV.data(el, {"variant":"counter","value":90,"unit":"秒","label":"你的发布片","brand":"#F2A03D","stage":"dark","display":"NotoSansSC-Bold","body":"NotoSansSC-Regular"}));在发布片里什么时候用
整部片围绕的那一个数字:结果、时长、数量。只用一次,落在旁白说出数字的那一拍。
为什么有效
慢慢收住制造期待,砸下标记那一刻;视线落在一个数字上,而不是一张表。
不要和这些一起用
- 同一镜头第二次砸落(每镜只有一个重音)
- brief 里没有的数字
在片中的作用
自然时长
2.4–4.5 秒