聊天对话
手机里的 WhatsApp 风格聊天:对方正在输入、我方打字发送、气泡弹出、已读勾、自动滚动。
实时循环 · 10 秒 · 1920×1080 · 24 fps
参数
| 参数 | 类型 | 作用 |
|---|---|---|
| src | "/assets/<picture>.jpg" | 真实页面截图,按设备屏幕宽度显示 |
| screen | html string | 或者用镜头自己的 HTML 当屏幕内容 |
| scroll | [{at, y, dur?}] | 稀疏的滚动动作(正弦缓入缓出,默认 900 毫秒) |
| taps | [{at, x, y}] | 点击位置,屏幕像素 |
| notifications | [{at, app?, title, body?, hold_ms?}] | 从顶部落下的通知横幅 |
| messages | [{at, from: "me"|"them", text}] | chat:对话内容 |
| url / name / chatPalette | string | 浏览器地址;聊天联系人名字;配色 "brand" 或 "whatsapp" |
| x / y / scale / tilt / enter | px / deg | 位置与缩放;tilt 是 rotateY;enter 为 "rise" 或 "none" |
| lang | "en" | "zh" | 设备界面自带的字(在线、输入消息、现在);内容是中文时默认中文 |
| 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: { "<动作>": <曲线> } 重调其中一个,可写曲线名或贝塞尔手柄。
| 动作 | 曲线 | 作用 |
|---|---|---|
| device.in | out-quart | 设备上移 90 px 并从 0.96 倍长到原大入场 |
| tap.approach | out-cubic | 手指圆点缩到点击位置 |
| tap.ring | out-cubic | 点击处扩散出光环 |
| note.drop | {"spring":[1.82,0.84]} | 通知从顶部落下,轻微过冲 |
| note.up | in-cubic | 停留后通知收回顶部 |
| chat.scroll | out-quint | 每条消息或输入气泡到来时对话上滚(360 ms) |
| bubble.pop | {"spring":[2.22,0.82]} | 每个消息气泡从 0.7 倍弹出 |
本演示的取值
| variant | "chat" |
|---|---|
| name | "LaunchReel" |
| chatPalette | "whatsapp" |
| messages | [{"at":1300,"from":"them","text":"你好!把产品链接发给我。"},{"at":3000,"from":"me","text":"给你:launchreel.ai"},{"at":4800,"from":"them","text":"收到。我为你的片子规划了六个镜头。"},{"at":6600,"from":"me","text":"看起来不错,开始做片。"},{"at":8200,"from":"them","text":"正在渲染。"}] |
| brand | #2F9E6E |
| stage | light |
<script src="/vendor/motion-vocab.js"></script>
MV.bind("s3", MV.device(el, {"variant":"chat","name":"LaunchReel","chatPalette":"whatsapp","messages":[{"at":1300,"from":"them","text":"你好!把产品链接发给我。"},{"at":3000,"from":"me","text":"给你:launchreel.ai"},{"at":4800,"from":"them","text":"收到。我为你的片子规划了六个镜头。"},{"at":6600,"from":"me","text":"看起来不错,开始做片。"},{"at":8200,"from":"them","text":"正在渲染。"}],"brand":"#2F9E6E","stage":"light","display":"NotoSansSC-Bold","body":"NotoSansSC-Regular"}));在发布片里什么时候用
在对话里工作的产品(客服、助手、机器人),或用客户原话做证明。
为什么有效
人人都知道聊天怎么动,观众读的是内容而不是界面。
不要和这些一起用
- 编造的客户原话(只能用 brief 或网站里的话)
- 一个镜头超过约六条消息
在片中的作用
自然时长
4.0–14.0 秒