企业官网建设流程全解析

• AI 技能
• 媒体生成
• 视频

本指南围绕 video-shotcraft 仓库中的动效参考卡doc-park-left-pill-deal展开，完整拆解其"文档不淡出、靠左驻留 + 右侧按旁白节奏慢速发牌结论药丸"的镜头设计，并结合仓库内的原生 Remotion 实现源码逐参数说明。读完你将掌握：驻留（park）与自动滚动的写法、双曲线并行入场的手感控制、逐词加深字幕的四段编排，以及换文案、改时长时必须同步调整的参数联动关系，可直接复用到文档理解、推荐理由、审阅意见类产品的说明镜头中。

摘要

doc-park-left-pill-deal是 video-shotcraft 中用于"旁白驱动的分析结论逐条给出"段落的动效卡片：来源文档不淡出，而是向左滑出只露约 35% 宽并微缩到 0.92，右侧按旁白节奏慢速发牌三张白底描边药丸（outBack 弹入），每张落定后其下方字幕逐词加深、下一张到来前整句淡出；左侧文档全程做极缓慢自动滚动，保持"正在被读"的语义。卡片时长约 5.8s（174 帧 @30fps），能量等级为低——全片无峰值，靠自动滚动维持画面活性。

一、这张卡要解决的问题：结论要有出处

卡片元信息（参考文档 的 frontmatter）将其定位为：

• 适用场景：旁白驱动的"分析结论逐条给出"段落；文档理解、推荐理由、审阅意见类产品的核心说明镜头；
• 时长：约 5.8s（174f @30fps）；
• 能量：低——慢发牌节奏，全片无峰值，靠自动滚动维持活性。

设计意图很直接：结论要一条一条给，观众才记得住；但如果把来源文档淡出，结论就变成"空中楼阁"——观众不知道这些话从哪来。这张卡的解法是让来源留在画面里：文档靠左驻留只露一截，还在缓慢滚动（说明它正在被读），右侧的每条结论都是从这份文档里长出来的。发牌节奏刻意放慢，是为了给旁白留出说完一句的时间。

二、动效核心拆解

以下六个动效点构成了这张卡的全部行为，均可从实现源码 DocParkLeftPillDeal.tsx 中找到一一对应的代码。

2.1 驻留（park）不是淡出

文档的滑出由seg(t, 0.06, 0.24, E.inOutCubic)驱动translateX(0→-55%) scale(1→0.92)。源码中park变量与 transform 的对应关系为（源码 L130、L156）：

const park = seg(t, 0.06, 0.24, E.inOutCubic); // transform: `translateX(${lerp(park, 0, -55)}%) scale(${lerp(park, 1, 0.92)})`

关键细节是transformOrigin: '0% 50%'：缩放以左边缘为锚点，文档缩小时不会离开画框左侧，最终只露出约 35% 宽度（480 设计坐标系下约为 87px，与右侧药丸left:214px的布局配套，见下文"已知坑"）。驻留窗必须在首张药丸起点 0.26 之前收住，否则会出现"文档还在滑、药丸已在发"的浑浊观感。

2.2 常驻自动滚动：取模保证末帧稳定

左侧文档在驻留后全程以极缓慢速度自动滚动，源码为（源码 L132）：

const scrollY = (-((t * 3) % 1) * 40).toFixed(2);

内容高度比容器多 60px（height: DH + 60，源码 L180），全片走 3 个整数周期、每周期位移 40px。取模（t*3 % 1）保证t=1时回到 0，末帧画面稳定，接下一镜时位置对得上——这正是"已知坑"中"周期数必须是整数"的原因。

2.3 慢发牌：间隔即旁白句长

三张药丸的起点写死在T0 = [0.26, 0.48, 0.70]（源码 L125），间隔 0.22（约 38 帧 / 1.27s）。这个间隔对应一句短旁白的长度，而不是 UI 常规的 stagger——它是旁白驱动节奏的显式编码：每张结论给旁白留足"说完一句话"的时间。

2.4 每张药丸两条曲线并行：先看见、再落定

每张药丸的入场由两条独立曲线并行驱动（源码 L201-L202）：

const o = seg(t, f, f + 0.035, E.outQuad); // 透明度：快，约 6 帧 const b = seg(t, f, f + 0.062, E.outBack); // 位移+缩放：慢，约 11 帧且带过冲

• o管透明度（0.035 窗口 ≈ 6 帧），让药丸"先被看见"；
• b管translateY(14→0) scale(0.94→1)（0.062 窗口 ≈ 11 帧），outBack 的过冲带来"发牌落桌"的手感。

两窗不等长是有意设计：透明度比位移短，读作"先实后稳"；若两窗等长，则退化成普通淡入。将 outBack 换成 outCubic 则变成平淡的"浮上来"。

2.5 字幕四段编排：画面永远只有一句

每张药丸下方配一句逐词加深的字幕，其四段时间窗在源码中这样计算（源码 L204-L207）：

const cs = f + 0.05; // 字幕起点：药丸落定后约 3 帧 const ce = k < 2 ? T0[k + 1] - 0.03 : 0.98; // 字幕终点：下一张起点减 0.03；末张 0.98 const showV = seg(t, cs, cs + 0.02); // show：0.02 窗口快速出现 const innP = seg(t, cs, cs + (ce - cs) * 0.7); // inn：逐词加深摊在可见时长的 70% const outP = seg(t, ce - 0.05, ce, E.outQuad); // out：ce-0.05 → ce 淡出

• show用 0.02 的窗快速出现（药丸落定后约 3 帧才起字幕，避免字幕先于结论出现）；
• inn逐词加深摊在(ce-cs)*0.7上，末 30% 是全实态的静置阅读时间；
• ce是下一张的起点减 0.03，末张固定为 0.98；
• out在ce-0.05→ce淡出——每句字幕在下一张药丸入场前就已清场，画面永远只有一句。

2.6 药丸终态是静态列表

三张药丸全部落位后一直留在画面上（top = 54 + k*48，对应源码常量PY=54, PH=34, PG=14），读作"结论清单已成形"，把"分析结论逐条给出"的完成态固化在画面上。

三、源码实现与底层原语

3.1 时间轴与缓动原语

本卡所有时间参数都建立在公共动效原语上，定义于 demos/_fixtures/Motion.tsx：

• seg(t, t0, t1, ease)（L33-L34）：把t在[t0,t1]内归一化后过缓动函数，越界钳位——所有动效的时间轴原语；
• lerp(t, a, b)（L30）：线性插值，本卡中用于translateX、scale、translateY的数值换算；
• 缓动表E（L7-L28）：本卡用到inOutCubic（驻留）、outQuad（透明度）、outBack（落桌手感，默认过冲系数s=1.70158）；
• useT()（L43-L47）：把当前帧归一化为t∈[0,1]（frame / (durationInFrames - 1)），末帧恰为 1，与样片渲染逐帧一致；
• rand(seed)（L37-L40）：确定性伪随机，同种子跨帧/跨渲染可复现——文档骨架条的宽度用它生成。

DesignStage（L54-L81）提供 480×270 设计坐标系（本卡注释说明按 480×270 设计坐标、440×240 定尺画布居中排版，见 DocParkLeftPillDeal.tsx L5），等比放大铺满合成分辨率，因此参数表中所有数值都在该坐标系下标定。

3.2 逐词加深字幕组件

字幕由本系列统一的Caption组件实现（DocParkLeftPillDeal.tsx L56-L105），其语法为"浅灰占位 → 逐词加深到黑 → 逐词淡回浅灰 → 整行归零"：

• 入场逐词交错：st = 0.78 / n、窗宽win = st * 1.5，每个词按(innP - i*st) / win钳位得到加深进度q；
• 颜色通过mix(q, DIM, TXT)在浅灰#C9C9CE与正文黑#111111之间插值（mix 定义 L22-L26）；
• 出场逐词交错stw = 0.55 / n，整行透明度由outP控制（1 - (outP - 0.7) / 0.3）；
• 字距随加深进度收紧：letterSpacing: (-0.03 * (1 - q))em，加深越充分字距越紧凑，强化"被读"的质感。

三张药丸的文案与对应字幕均为占位数据（L119-L123）：Quick Start（leaf 图标）/ Bundle Plan（bowl 图标）/ Starter Kit（wrap 图标），配三句英文结论字幕。

3.3 布局数字

药丸定位写死为left: 214px, top: 54 + k*48、宽 172px、高 34px（PX=214, PY=54, PH=34, PG=14，L124），是 480 宽画布下与驻留后文档（露出约 87px）配套的一组数字。

四、参数表（可调手感速查）

五、已知坑与调参注意点

• 自动滚动的周期数必须是整数，否则末帧文档停在半个周期上，接下一镜时位置对不上；改时长时这个3要重新选（内容溢出量固定 60px，位移写死 40px，两者不能超）；
• 末张字幕的ce = 0.98意味着它在 0.93→0.98 淡出，末帧只剩三张药丸没有字幕。若要末句留到底，把末张的ce改成 >1 并去掉out；
• 药丸位置是写死的 PX 组：left:214px, top:54+k*48、宽 172px。改文档驻留幅度必须同步改 PX，否则两者重叠；
• 占位文案要重调行程：字幕长度直接影响"逐词加深"读起来快慢——换真实文案后要按新句长重调inn行程（源码中st = 0.78 / n、stw = 0.55 / n均与词数 n 挂钩）；
• 药丸数写死为 3（T0的长度）：加到 4 条时间就不够——末张起点会超过 0.9，字幕根本走不完；4 条以上应考虑缩短单句而不是硬塞；
• 字幕ce依赖T0[k+1]：改任一张的起点都会连带改变前一张字幕的可见时长。这是有意的联动（字幕永远填满到下一张之前），但调参时要意识到它不是独立参数。

六、仓库内的配套与参考实现

这张卡的完整链路在仓库中可逐层追溯：

• 参考文档：references/shots/ui-entrance/doc-park-left-pill-deal.md（本指南的主体来源，含动效核心、参数表与已知坑）；
• 原生 Remotion 实现：demos/ui-entrance/doc-park-left-pill-deal/DocParkLeftPillDeal.tsx（时长常量DOC_PARK_LEFT_PILL_DEAL_DURATION = 174帧，即 5800ms @30fps，见 L9）；
• 公共动效原语：demos/_fixtures/Motion.tsx（seg/lerp/E/useT/DesignStage）；
• 图文同源卡片源文档：gallery/source/doc-park-left-pill-deal.md（与参考文档内容一致，供展示层使用）；
• 画廊索引：gallery/api/library.json 中收录了该卡的 summary、适用场景、时长、能量等级及source指向，供画廊页渲染与检索。

如需在 30fps 项目中原样使用，将DocParkLeftPillDeal组件挂入 Remotion 合成、设置durationInFrames: 174即可；改文案、改时长时，重点对照上文参数表与已知坑中的联动关系逐项复核。

• AI 技能
• 媒体生成
• 视频