搜索框:打错再改
搜索框:输入中打错一个字母、发现、删掉改正,下拉建议出现并选中第一条。
实时循环 · 7 秒 · 1920×1080 · 24 fps
参数
| 参数 | 类型 | 作用 |
|---|---|---|
| text (必填) | string | 要打出(或粘贴)的文字 |
| placeholder | string | 空输入框里的灰色提示字 |
| result | string | string[] | 提交后翻入的内容:一行标题,再加最多 3 行 |
| resultSrc | "/assets/<screen>.jpg" | 用一张真实页面截图做结果卡,代替文字行 |
| cps | number默认: 15 | 每秒字符数(真人约 8–20;中文输入法约 5–8) |
| mistype | {at, wrong} | false | 在第 at 个字符处打错再改回 |
| x / y / width | px | 输入框中心 x、顶部 y、宽度 |
| 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 直接得到曲线 |
| 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: { "<动作>": <曲线> } 重调其中一个,可写曲线名或贝塞尔手柄。
| 动作 | 曲线 | 作用 |
|---|---|---|
| enter.release | {"spring":[2.5,1]} | 按回车后输入框回弹 |
| drop.open | out-cubic | 下拉框在输入框下方展开 |
| drop.close | in-quad | 按回车后下拉框收起 |
| row.highlight | out-cubic | 第一条建议亮起 |
| submit.rise | out-quint | 提交后输入框上移让位 |
| card.flip | {"spring":[1.33,0.88]} | 结果卡片逐张向下翻入(间隔 110 ms) |
本演示的取值
| variant | "search" |
|---|---|
| text | "发布片模板" |
| suggestions | ["发布片模板","App 发布片","发布片配乐"] |
| result | ["发布片模板","选一种风格,放进你的页面截图。"] |
| cps | 6 |
| brand | #2F9E6E |
| stage | dark |
<script src="/vendor/motion-vocab.js"></script>
MV.bind("s3", MV.typeInput(el, {"variant":"search","text":"发布片模板","suggestions":["发布片模板","App 发布片","发布片配乐"],"result":["发布片模板","选一种风格,放进你的页面截图。"],"cps":6,"brand":"#2F9E6E","stage":"dark","display":"NotoSansSC-Bold","body":"NotoSansSC-Regular"}));在发布片里什么时候用
以搜索为入口的产品,或用观众自己的问题做开场。
为什么有效
一个真实的打错让手显得像人,也让视线在输入框多停一拍。
不要和这些一起用
- 同一画面再放一个打字组件(每帧只能有一个光标)
- 超过一个打错(第二个就成了笑料)
在片中的作用
自然时长
4.0–7.0 秒