compreel

动效词汇 · 文字输入动画

粘贴输入

⌘V 一次落下整段文字并闪一下选区,然后发送、出结果。

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

参数

参数类型作用
text (必填)string要打出(或粘贴)的文字
placeholderstring空输入框里的灰色提示字
resultstring | string[]提交后翻入的内容:一行标题,再加最多 3 行
resultSrc"/assets/<screen>.jpg"用一张真实页面截图做结果卡,代替文字行
cpsnumber
默认: 15
每秒字符数(真人约 8–20;中文输入法约 5–8)
mistype{at, wrong} | false在第 at 个字符处打错再改回
x / y / widthpx输入框中心 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 直接得到曲线
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: { "<动作>": <曲线> } 重调其中一个,可写曲线名或贝塞尔手柄。

动作曲线作用
chip.in{"spring":[2.22,0.85]}粘贴按钮从输入框上方弹出
chip.outlinear粘贴后按钮淡出
paste.highlightout-quad粘贴进来的文字高亮淡去
send.onlinear敲下第一个字时发送键变成品牌色
send.downout-quad发送键按下缩到 0.84 倍
send.release{"spring":[2.38,0.82]}按下后发送键弹回
rippleout-cubic发送键上扩散出一圈光环
submit.riseout-quint提交后输入框上移让位
card.flip{"spring":[1.33,0.88]}结果卡片逐张向下翻入(间隔 110 ms)

本演示的取值

variant"paste"
text"LaunchReel 把产品页变成一条发布片。"
result["脚本已就绪","已规划六个镜头"]
brand#E0563B
stagedark
<script src="/vendor/motion-vocab.js"></script>
MV.bind("s3", MV.typeInput(el, {"variant":"paste","text":"LaunchReel 把产品页变成一条发布片。","result":["脚本已就绪","已规划六个镜头"],"brand":"#E0563B","stage":"dark","display":"NotoSansSC-Bold","body":"NotoSansSC-Regular"}));

在发布片里什么时候用

输入很长(一段话、一篇文档、一个链接)时,逐字打会浪费观众时间。

为什么有效

粘贴比打字快,又仍然展示了输入;选区闪一下说明文字到了。

不要和这些一起用

  • 同一画面再放一个打字组件(每帧只能有一个光标)
  • 超过约 60 个字符的文字(手机 720p 上像一堵墙)

在片中的作用

  • 开场钩子
  • 功能

自然时长

3.0–5.0 秒

在 LaunchReel 里用这些动作做片

更多文字输入动画

全部动效组件 →