页面标注
页面落定;标注点逐个出现:涟漪圆点、伸向一侧的引线和标签。
实时循环 · 7 秒 · 1920×1080 · 24 fps
参数
| 参数 | 类型 | 作用 |
|---|---|---|
| src / points | "/assets/<screen>.jpg" / [{x, y, label}] | callouts:页面截图和 2–5 个标注点(x、y 是截图内 0..1 的位置) |
| items / title / stamp | [{text, mark?: "yes"|"no"|"note", sub?}] / string / string | checklist:2–5 行、标题、最后砸下的印章 |
| hub / nodes / from | string / string[] / index | network:中枢、3–8 个节点,以及数据包沿连线铺路的那个节点 |
| step_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: { "<动作>": <曲线> } 重调其中一个,可写曲线名或贝塞尔手柄。
| 动作 | 曲线 | 作用 |
|---|---|---|
| panel.in | house | 面板落定(0.96 → 1) |
| push | in-out-sine | 整个镜头里面板和标注一起缓慢推进 2 % |
| dot.pop | [0.34,1.9,0.64,1] | 标注点弹出 |
| ripple | out-quad | 标注点的涟漪扩散(循环) |
| line.draw | out-cubic | 引线向侧边画出 |
| tag.pop | overshoot | 引线末端的标签弹出 |
本演示的取值
| variant | "callouts" |
|---|---|
| points | [{"x":0.22,"y":0.3,"label":"贴上链接"},{"x":0.7,"y":0.42,"label":"选一种风格"},{"x":0.35,"y":0.78,"label":"拿到成片"}] |
| brand | #6B5BFF |
| stage | dark |
<script src="/vendor/motion-vocab.js"></script>
MV.bind("s3", MV.diagram(el, {"variant":"callouts","points":[{"x":0.22,"y":0.3,"label":"贴上链接"},{"x":0.7,"y":0.42,"label":"选一种风格"},{"x":0.35,"y":0.78,"label":"拿到成片"}],"brand":"#6B5BFF","stage":"dark","display":"NotoSansSC-Bold","body":"NotoSansSC-Regular"}));在发布片里什么时候用
指出真实页面的各个部分:在哪里粘贴、选什么、得到什么。
为什么有效
一次一个点,让视线同时落在页面和标签上;缓慢推近让画面一直在动。
不要和这些一起用
- 一个页面超过五个标注
- 片子里在占位图上标注(要用真实页面)
在片中的作用
自然时长
4.0–7.0 秒