如何用 Remotion 给视频加标注层手把手实现箭头、形状与高亮【免费下载链接】remotion Make videos programmatically with React项目地址: https://gitcode.com/GitHub_Trending/re/remotion录屏教程里你讲得快、屏幕动得也快观众的目光常常跟不上——等你用鼠标指过去他们早错过了。Remotion 让这类圈一下、指一下、亮一下的视频标注动作可以直接写成代码用 React 组件描述箭头、形状和高亮让它们跟着帧号准时出现。这份指南就从这个最真实的痛点出发带你一步步搭出一个可用的标注层。动手前装好两个包认清代码放哪这一步要解决的问题是依赖够不够、源码在哪里。需要装remotion/shapes各种现成形状组件和remotion/paths路径指令工具拼箭头时会用到动画用的interpolate则来自remotion核心包。组件的源码都在 packages/shapes/src/components/一个形状一个 tsx 文件想调行为可以直接翻对应文件路径工具在 packages/paths/src/动画插值辅助在 packages/animation-utils/。第一关把形状钉在画布正确的位置这一步要解决的是形状画出来之后怎么放到画面里我想放的地方。思路只有一条形状负责画什么style负责画在哪。所有形状组件本质上是一个 SVG默认渲染在容器的左上角真正的位置由你套一层的绝对定位决定。把标注元素放进一个AbsoluteFill容器再用left/top钉住AbsoluteFill style{{backgroundColor: #0b1220}} Rect width{420} height{240} cornerRadius{16} fillrgba(96, 165, 250, 0.25) style{{position: absolute, left: 96, top: 140}} / Circle radius{56} fillrgba(244, 63, 94, 0.45) style{{position: absolute, left: 620, top: 300}} / /AbsoluteFillRect用cornerRadius控制圆角Circle只吃一个radius。到这里一块半透明的蓝色区域圈住了代码块一个红圈压在按钮上——标注层的骨架就有了。第二关让箭头指到该指的地方先说结论固定方向的箭头直接有现成组件从 A 指向 B的自由轨迹没有现成的需要你自己拼路径。Arrow组件支持direction取up/down/left/right再配length、headWidth、shaftWidth调粗细比例够覆盖大多数标注场景Arrow length{220} headWidth{64} headLength{58} shaftWidth{20} directiondown fill#f43f5e style{{position: absolute, left: 320, top: 60}} /想要斜着指、弯着走的箭头怎么办看 packages/shapes/src/utils/make-arrow.ts 就明白了makeArrow内部把 7 个顶点算好后转成一串M/L/C路径指令再序列化成 SVG 的d属性。你完全可以照这个套路用自己的坐标点拼指令再通过RenderSvg画出来——这就是所有手绘感标注的底层做法。第三关让关键信息亮起来这一步要解决的是怎么点出重点而不是堆出噪音。两个手法就够了。一是半透明叠加fill用带 alpha 通道的rgba底色透出来重点区域被罩住但内容仍可读透明度控制在 0.2 到 0.5 之间比较稳妥。二是颜色编码整套视频里固定颜色语义比如蓝色圈区域、红色标警告、绿色标成功观众看几秒就会翻译颜色了。要给重点配一句简短说明别自己画框直接用带尾巴的CalloutpointerDirection决定尖角朝向天然适合指着说Callout width{280} height{110} pointerDirectiondown cornerRadius{12} fillrgba(15, 23, 42, 0.88) style{{position: absolute, left: 480, top: 40}} /说明文字作为普通子节点放进Callout里即可对齐和圆角都是现成的。第四关给标注加上节奏静态的标注观众容易忽略加一点帧驱动的动效就能把目光拽回来。一切动画的原料都来自useCurrentFrame()拿到的帧号这一步只讲两件事脉动和沿路径移动。脉动的核心是把帧号变成一个有规律的缩放系数再写进transform。用取模让动画循环interpolate配上缓动比裸Math.sin更可控const frame useCurrentFrame(); const beat interpolate( frame % 45, [0, 22, 45], [1, 1.16, 1], {easing: Easing.inOut(Easing.quad)} ); Circle radius{56} fillrgba(34, 197, 94, 0.5) style{{ position: absolute, left: 620, top: 300, transform: scale(${beat}), }} /沿路径移动则是另一半先画一条M ... C ...的轨迹每帧用remotion/paths里的取点函数如getPointAtLength查出当前进度对应的坐标把箭头或光点平移到那上面。轨迹负责路线取点负责速度两者分开调视线引导就很顺了。组合实战把标注层组装完整 这一步要解决的是前面的零件怎么拼成一个能直接用的标注层。原则是一层容器管所有标注一个AbsoluteFill罩在内容之上形状、箭头、说明框各占各的绝对坐标谁也不挡谁。下面是三个元素的组装想加脉动的话把第四关的beat变量套进任意一个的transform即可const AnnotationLayer: React.FC () { return ( AbsoluteFill Rect width{420} height{240} cornerRadius{16} fillrgba(96, 165, 250, 0.22) style{{position: absolute, left: 96, top: 140}} / Arrow length{160} headWidth{54} shaftWidth{16} directiondown fill#f43f5e style{{position: absolute, left: 240, top: 36}} / Callout width{280} height{110} cornerRadius{12} pointerDirectiondown fillrgba(15, 23, 42, 0.88) style{{position: absolute, left: 480, top: 40}} / /AbsoluteFill ); };蓝色矩形圈住目标区域红箭头从上方压下来制造看这里的压迫感深色说明框落在右侧补充一句解释——一次标注信息量到位了。避坑与优化同屏标注不超过两三个。标注是指挥棒不是装饰画全画面都在动等于什么都没指。颜色语义一旦定下就别换。红色永远表示警告观众才不会每次都要重新学习你的视频。别在每帧创建新对象。路径指令、颜色常量这类纯数据提到组件外或用useMemo缓存渲染器逐帧重跑浪费会放大 30 倍。重负载标注考虑预渲染。特效多、形状密的片段用OffthreadVideo离线合成比实时算稳定得多。坐标别裸写死。标注位置最好按画面宽高比例算left: width * 0.24换分辨率才不会整体漂移。 形状、路径、动画三块积木你现在都拿得起来了剩下的就是把标注节奏和讲解节奏对在一起。更细的参数和完整 API去仓库的 packages/docs/ 里查每一页都对应着一个可运行的示例。【免费下载链接】remotion Make videos programmatically with React项目地址: https://gitcode.com/GitHub_Trending/re/remotion创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考