compreel

动效词汇 · 字幕动画

下三分之一字条

品牌色竖条长出,字板从中滑出带出文字;换行时字板变宽变窄,结束时收回。

实时循环 · 8 秒 · 1920×1080 · 24 fps

参数

参数类型作用
lines (必填)[{text, start, end, words?}]字幕行,时间是镜头内毫秒;可选逐词时间 words [{text, start, end}]
kickerstringlowerThird:文字上方的短标签
sizepx字号(默认按变体 48–72)
maxCharsnumber
默认: 38 / 16 CJK
超过这个字数就拆成两行均衡的字幕
bottompx
默认: 120
离底边的距离(在标题安全区内)
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 直接得到曲线
brandhex
默认: #6B5BFF
网站的品牌色;组件由它推出强调色(在舞台上对比度 ≥ 3:1)、面板色和文字色
stage"dark" | "light"
默认: "dark"
组件所在的舞台:深色或浅色
displayfont stem
默认: "Inter-Bold"
标题字体;在调用里写出它的名字,运行时才会加载
bodyfont stem
默认: "Inter-Regular"
界面 / 正文字体;在调用里写出它的名字,运行时才会加载
start_msms
默认: 300
组件开始的时间,镜头内的毫秒数
backgroundboolean
默认: false
画出舞台背景(关闭时透明,叠在镜头自己的背景上)
place{x, y, w, h, z?}组件在镜头布局里的位置:把它 1920x1080 的构图缩放进这个舞台矩形(居中、保持比例);z 决定组件之间的前后。默认整个舞台

动作与缓动曲线

每个动作都有自己的缓动。用 ease: { "<动作>": <曲线> } 重调其中一个,可写曲线名或贝塞尔手柄。

动作曲线作用
plate.inout-quart这组字幕开始时底板从左到右揭开
plate.outin-cubic这组结束后底板收回
bar.grow{"spring":[2.5,1]}强调竖条从下往上长出
plate.widthout-quint底板宽度跟着正在说的那一行变化
line.swap.inout-quint下一行升入底板
line.swap.outin-quad上一行向上离开

本演示的取值

variant"lowerThird"
kicker"使用方法"
lines[{"text":"贴上你的产品页","start":300,"end":2400},{"text":"LaunchReel 读取每一个页面","start":2500,"end":4600},{"text":"你会拿到一份分镜方案","start":4700,"end":6600}]
brand#6B5BFF
stagedark
<script src="/vendor/motion-vocab.js"></script>
MV.bind("s3", MV.captions(el, {"variant":"lowerThird","kicker":"使用方法","lines":[{"text":"贴上你的产品页","start":300,"end":2400},{"text":"LaunchReel 读取每一个页面","start":2500,"end":4600},{"text":"你会拿到一份分镜方案","start":4700,"end":6600}],"brand":"#6B5BFF","stage":"dark","display":"NotoSansSC-Bold","body":"NotoSansSC-Regular"}));

在发布片里什么时候用

在画面继续播放时标注一个步骤、说话人或功能。

为什么有效

固定在左下,永远不挡中间的产品界面。

不要和这些一起用

  • 同一镜头再用另一种字幕样式
  • 屏幕延伸到左下角的设备框

在片中的作用

  • 功能
  • 证明

自然时长

2.0–12.0 秒

在 LaunchReel 里用这些动作做片

更多字幕动画

全部动效组件 →