video-shotcraft 动效卡详解：AvatarBracketCarousel 对焦框头像轮换的填空排版实现-北京尧图网络

AI 技能媒体生成视频【免费下载链接】video-shotcraftAI video skill for Claude Code Codex — cinematic product videos with Remotion: 152 shot recipe cards, 209 motion previews, a production-ready template项目地址https://gitcode.com/gh_mirrors/vi/video-shotcraft点击查看免费下载导读本文以 gallery/source/avatar-bracket-carousel.md 为核心结合 demo 源码与公共动效原语完整拆解 video-shotcraft 中「AvatarBracketCarousel」这张 ui-entrance 动效卡的实现原理、全部参数标定与落地避坑点。读完你即可掌握「一句话填空角色轮换」类镜头的可复刻方案如何用单一距离量同步驱动缩放/透明度/模糊/位移如何在 480×270 设计坐标系下标定切换节拍以及如何在 Remotion 中把这一套参数原样落地渲染。卡片定位把一个位置的多重身份拍成一句话该卡片的适用场景是「一个位置多种角色」的能力枚举——团队、身份、预设、人格类产品的核心一句话镜头。它把「我们有设计师、客服、分析师、写手」这样一份清单压缩进一个 92×92 的槽位里句子不动只有槽里的人换。四角对焦框不参与轮换但把观众的眼睛钉死在方框内于是四次更换被读作「同一个位置」而不是「四张头像飘过」。按 gallery/api/library.json 中该卡的登记信息其规格为时长约 5.2s156f30fps源码常量 AVATAR_BRACKET_CAROUSEL_DURATION 即为 156能量中——三次等距切换构成稳定节拍器对焦框脉冲是唯一装饰性动作分类ui-entrance与源码目录 demos/ui-entrance/avatar-bracket-carousel/ 一致workbench 侧有同源副本 workbench/demosrc/ui-entrance/avatar-bracket-carousel/AvatarBracketCarousel.tsx。动效核心一个连续位置量驱动四个属性整张卡的动效骨架是「连续位置量距离衰减」而不是索引跳变。位置量 pos 是三段 spring 的累加let pos 0; SWITCHES.forEach((s0) { pos seg(t, s0, s0 0.14, (k) E.spring(k, 0.25)); });对应源码见 demos/ui-entrance/avatar-bracket-carousel/AvatarBracketCarousel.tsx切换点为硬编码数组SWITCHES [0.24, 0.46, 0.68]L24。因为pos是连续量而非索引跳变任意时刻都能算出每个头像离槽位有多远——这是后面一切衰减计算的输入。距离量同时驱动四个属性d |k - pos|之后属性公式语义scalemax(0.5, 1 - d*0.38)入框放大、出框缩小opacitymax(0, 1 - d*0.62)出框淡化blurmin(3, d*2.4)出框模糊景深暗示translateY(k - pos) * STEPSTEP76px垂直位移源码实现位于 L62-L83。四个属性同源于一个距离量因此入框/出框的变化天然同步不需要为每个属性单独排时间线。队列的叠放与「锚点自居中」队列是绝对定位在 slot 的 0×0 锚点上叠放的left:-29px, top:-29px自居中对应 58px 头像直径的一半垂直位移全靠(k-pos)*STEP。框外的头像照样渲染只是被 opacity 和 blur 藏掉——这保证了「随时可被轮换拉回来」也暗示了队列的存在出框头像仍露出一角。入场是叠在轮换之上的另一层opacity: op * seg(t, 0.02 k * 0.03, 0.12 k * 0.03)见 L82。四张头像按 0.03 错峰在开场 0.15 内建立队列之后这一项恒为 1轮换全权接管。角色标签独立一套但共享 pos标签不位移只换透明度opacity max(0, 1 - |k-pos|*2.2)见 L108-L125。衰减斜率 2.2 比头像的 0.62 陡得多——标签在约 0.45 格距离外就完全消失永远不会出现两个标签同屏两句文字同时半透明叠着最难读。对焦框呼吸breath Math.sin(seg(t, s0, s0 0.1) * Math.PI); // scale(1 Math.min(1, breath) * 0.07)见 L36-L39 与 L97。正弦包络让脉冲在切换动作的正中达峰、走完归零取min(1, breath)后乘 0.07 加到 scale 上是「咬合了一下」的量不喧宾夺主。参数表全部标定值与调节手感以下参数均在 480×270 设计坐标系下标定DesignStage等比放大时数值不动来自原文档并对照源码常量逐一核实参数典型值调节手感切换点0.24 / 0.46 / 0.68间隔 0.22≈34f / 1.14s间隔就是「读得完一个角色」的时长0.12 观众来不及看标签0.3 节拍器感散掉切换行程窗 0.14≈22fE.spring(k, 0.25)行程占间隔的 64% → 静置时间约 12f阻尼 0.25 是明确一次回弹调小会抖两下与相邻切换互相干扰步距STEP76px框 92px、头像 58px步距必须大于头像直径否则相邻两张会咬边76/92 意味着出框的头像仍露出一角队列的存在被暗示缩放衰减1 - d*0.38下限 0.5一格距离缩到 0.62斜率调大出框更决绝但下限 0.5 会更早触顶队列变成「两档尺寸」透明度衰减1 - d*0.621.6 格距离外完全消失 → 画面里始终有约 3 张可见斜率降到 0.3 会看到整列四张都在取景框的「锁定」语义被削弱模糊衰减d*2.4上限 3px模糊是景深暗示2.4 的斜率让邻位约 2.4px4px 邻位糊成色块队列读不出是头像标签衰减1 - d*2.2斜率必须显著大于头像的 0.62——标签是文字两句同时半透明叠着最难读框脉冲窗 0.1sin(·π)× 0.077% 是「咬合了一下」的量15% 框自己变成主角抢过头像更换其中STEP 76与切换点数组在源码 L23-L24 直接可见。已知坑落地前必须确认的六件事四张头像对三次切换pos最终停在 3正好是末位。加第五张必须加第四次切换且末次切换要在 0.86 之前结束才有静置时间否则队列末尾永远进不了框。切换点是硬编码数组出现两处pos累加与breath累加即源码 L30-L33 与 L36-L39。改节拍必须同时改两处漏改一处会出现「框脉冲和头像换位错开」。入场 stagger 与首次切换的间隔只有 0.09入场末 0.15 → 切换 0.24。加头像数会推后入场结束点0.12k*0.035 张以上就要把首次切换往后挪。头像用 emoji 中性灰阶底色圆灰度分层仅用于区分队列项见 AV 数组强调色只在对焦框的四个 SVG 角标上。落地换成真实头像后仍应保持这个分工头像本身别抢色。对焦框 SVG 的四条 path 与 92×92 viewBox 是写死的坐标M4,26 L4,4 L26,4等见 CORNERS。改框尺寸要整套重标只改容器宽高会让角标缩放失真。句子用 flex gap:22px 居中槽宽固定 92pxflex: none所以句干不会因头像更换而重排——但换成中文句子时要确认槽两侧的字宽变化不会让槽偏离画面中心。源码原语支撑E.spring、seg、useT 与 DesignStage动效卡并非自造一套时间轴而是建立在 demos/_fixtures/Motion.tsx 的公共原语之上seg(t, t0, t1, ease)L33-L34把 t 在 [t0,t1] 内归一化后过缓动函数越界钳位——所有动效的时间轴原语。上文所有seg(t, s0, s00.14, ...)都在用它。E.spring(t, bounce)L24-L271 - exp(-6t) * cos(w * t * bounce * 2.2)bounce 默认 0.25即参数表中的「明确一次回弹」。useT()L43-L47由useCurrentFrame驱动的全片归一化进度 t∈[0,1]末帧恰为 1与样片渲染的 t 映射逐帧一致保证确定性。DesignStageL54-L81480×270 设计坐标容器按合成分辨率等比放大默认 transform scalerasterzoom时用 CSS zoom文字密集场景字形有可感差异时选 zoom。这些纯函数由 Remotion 的useCurrentFrame驱动满足确定性渲染要求——同一帧在任何机器上渲染结果一致这正是它适合做成可复用的 shot recipe 卡片的原因。如何查看与运行这张卡看成品该卡的视频预览收录在 gallery 媒体库avatar-bracket-carousel的 poster 与 mp4画廊目录登记于 gallery/api/library.jsoncategory:ui-entrancesource 指向 gallery/source/avatar-bracket-carousel.md。看源码主副本在 demos/ui-entrance/avatar-bracket-carousel/AvatarBracketCarousel.tsxworkbench 侧副本在 workbench/demosrc/ui-entrance/avatar-bracket-carousel/AvatarBracketCarousel.tsx二者结构一致。运行渲染仓库采用 Remotion 技术栈公共依赖见根目录 package.jsondemo 渲染与 smoke 测试脚本可参考 lib/scripts/smoke-render-demos.py 与 demos/_fixtures/Motion.tsx 的确定性渲染约定。修改节拍类参数时务必同时留意pos累加与breath累加两处硬编码数组的一致性。赞分享AI 技能媒体生成视频【免费下载链接】video-shotcraftAI video skill for Claude Code Codex — cinematic product videos with Remotion: 152 shot recipe cards, 209 motion previews, a production-ready template项目地址https://gitcode.com/gh_mirrors/vi/video-shotcraft点击查看免费下载相关推荐es-toolkit 兼容版 forOwn 完全指南对象自有属性迭代的实现原理与性能取舍es toolkit 兼容版 forOwn 完全指南对象自有属性迭代的实现原理与性能取舍 forOwn 是 es toolkit 兼容包 es toolkiAI 技能媒体生成视频Reactive Resume可以自托管的免费开源简历生成器Reactive Resume可以自托管的免费开源简历生成器投出去 20 份简历18 份死在机器筛选那关先别急着重写检查一下文件有没有被读对。ReacAI 技能媒体生成视频video-shotcraft 镜头卡 row-embed 全解析让详情页数据行从空中长进页面的入行动效实战video shotcraft 镜头卡 row embed 全解析让详情页数据行从空中长进页面的入行动效实战导读 row embed 是 videoAI 技能媒体生成视频上一篇三大核心功能解锁开源UV-K5/K6/5R对讲机固件深度解析下一篇JetCache缓存穿透保护终极指南CachePenetrationProtect深度解析与实战创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考

video-shotcraft 动效卡详解：AvatarBracketCarousel 对焦框头像轮换的填空排版实现

相关推荐

Meson i18n 模块完全指南：gettext 国际化与本地化构建实战

WinCC语音报警实现指南：C#+TTS让报警开口说话

定义判断和类比推理，为什么总在两个选项之间反复纠结

更多资讯

MASTG iOS 非生产资源详解：如何识别并从生产构建中剔除调试日志、测试端点与开发凭据

AI 为什么能学习？以及AI 与人脑的本质差距是什么？

2026年SMT贴片打样与量产产线选型指南

智慧政务AI大模型应用方案：从私有化部署到RAG落地实践

Julep mem-mcp Phase 2 兼容：让 .ctx 提示词包在 dotctx 加载器中忠实落地

计及氢能的综合能源优化调度：Matlab建模与实现

今日更新

PHP htmlentities()函数用法讲解

AI Agent工程实战：从七要素到七个决策点的系统设计指南

AI入局芯片设计验证：验证收敛50倍加速的真相与应对

本周精选

CMOS设计三大物理效应：体效应、沟道长度调制与亚阈值导电

微信小程序在线阅读毕设全解析：Java后端+MySQL+避坑实战

Android音频问题五层分析法：从App到Codec的系统化诊断

本月热门

我发现了一个新思路：用 Remotion + Claude Code 像写代码一样自动化生成短视频

Windows下 Codex 中 Chrome 和 Computer Use 插件不可用问题排查及解决参考方式：TaoToken 统一 Key 配置与验证

2026 大模型集体涨价：用 Python 做企业 Token 成本测算与选型避坑（附配置）

读完文章，想聊聊您的网站？