Remotion:如何用形状组件给视频添加专业标注的实用指南

Remotion:如何用形状组件给视频添加专业标注的实用指南【免费下载链接】remotion Make videos programmatically with React项目地址: https://gitcode.com/GitHub_Trending/re/remotion录教程视频时最常见的翻车瞬间是屏幕上一堆元素观众不知道该看哪。Remotion 是 React 程序化制作视频的工具配合它的形状组件系统你可以直接用代码把箭头、圆圈、高亮框这些视频标注画在画面上而不必逐帧拖拽剪辑软件。一、准备工作一行命令装好形状组件包先装两个包remotion/shapes负责画形状remotion/animation-utils负责批量做变换动画。注意把所有remotion和remotion/*包锁到同一个版本去掉版本号前面的^npm install remotion/shapes remotion/animation-utils --save-exact装完后在组件里import {Rect, Circle} from remotion/shapes就能直接用了。二、给画面贴标签文本高亮文本高亮是最常用的一种视频标注。思路很简单先定位再着色。先定位用矩形盖住文字把文字放进一个position: relative的容器再往里面塞一个绝对定位的Rect让它正好压在目标文字后面import {AbsoluteFill} from remotion; import {Rect} from remotion/shapes; const HighlightedLine () ( AbsoluteFill style{{alignItems: center}} div style{{position: relative, fontSize: 44, padding: 8}} Rect width{330} height{72} fillrgba(255, 214, 0, 0.45) style{{position: absolute, left: -8, top: 0}} / span style{{position: relative}}这一行是重点/span /div /AbsoluteFill );运行后你会看到一行文字下面压着一条黄色色带就像用荧光笔划过的效果。形状组件的完整清单可以看 packages/shapes/src/components/ 源码。再着色半透明才是正解fill用带 alpha 的 rgba 值0.3~0.5 之间高亮才不会把底下的文字糊掉。想更柔和把cornerRadius调成 8~12色带四角就会圆润下来。三、把视线拽到关键处箭头与形状速查remotion/shapes内置了十几个形状做标注最常用的是这几个形状适用场景关键属性Rect高亮区域、代码块框选width、height、cornerRadiusCircle强调单点头像、按钮radiusEllipse强调横向宽区域width、heightArrow指向某个元素length、direction、headWidth、shaftWidthTriangle警告、注意标记points顶点数Star新功能角标points角数比手搓 SVG path 省事的是内置Arrow直接用direction属性就能朝上、下、左、右四个方向。封装一个可复用的指向组件接收目标坐标import React from react; import {Arrow} from remotion/shapes; type PointingArrowProps { targetX: number; targetY: number; direction?: right | left | up | down; color?: string; }; export const PointingArrow: React.FCPointingArrowProps ({ targetX, targetY, direction right, color #ff3b30, }) ( Arrow length{160} headWidth{70} headLength{55} shaftWidth{26} direction{direction} fill{color} style{{ position: absolute, transform: translate(${targetX}px, ${targetY}px), }} / );运行后你会看到一个红色实心箭头停在 (targetX, targetY) 处。之后想指哪儿改两个数字就行。四、让标注动起来帧驱动动画帧是动画的燃料useCurrentFrame()给你当前帧号任何随帧号变化的属性都会动起来。单帧计算让高亮淡入登场先根据当前帧算一个 0 到 1 的透明度再交给style.opacityimport {interpolate, useCurrentFrame} from remotion; import {Rect} from remotion/shapes; const FadeInRect () { const frame useCurrentFrame(); const opacity interpolate(frame, [0, 15], [0, 1], { extrapolateLeft: clamp, extrapolateRight: clamp, }); return ( Rect width{330} height{72} fillrgba(255, 214, 0, 0.45) style{{opacity, position: absolute, left: 60, top: 200}} / ); };运行后你会看到前 15 帧高亮色带从完全透明平滑变到 45% 不透明之后一直亮着。随时间变化让圆圈呼吸再进一步用正弦函数让圆圈周期性地放大缩小像雷达一样锁定目标import {useCurrentFrame} from remotion; import {Circle} from remotion/shapes; const BreathingCircle () { const frame useCurrentFrame(); // 每 24 帧完成一次 1 → 1.12 → 1 的脉动 const pulse 1 0.12 * Math.abs(Math.sin((frame / 24) * Math.PI)); return ( Circle radius{44} fillrgba(59, 130, 246, 0.35) style{{position: absolute, left: 280, top: 400, transform: scale(${pulse})}} / ); };运行后你会看到蓝色圆圈围绕目标每 24 帧呼吸一次视线会被它自然地拽过去。五、一个完整教学视频标注配方把前面的零件组装起来Sequence控制每个标注的出场时间矩形高亮代码行箭头指向重点脉动圆圈锁定按钮import React from react; import { AbsoluteFill, Sequence, interpolate, useCurrentFrame, } from remotion; import {Circle, Rect} from remotion/shapes; import {PointingArrow} from ./PointingArrow; const CodeHighlight: React.FC () { const frame useCurrentFrame(); const opacity interpolate(frame, [0, 12], [0, 1], { extrapolateLeft: clamp, extrapolateRight: clamp, }); return ( Rect width{560} height{52} cornerRadius{8} fillrgba(255, 214, 0, 0.28) style{{position: absolute, left: 56, top: 112, opacity}} / ); }; const TargetCircle: React.FC () { const frame useCurrentFrame(); const opacity interpolate(frame, [0, 10], [0, 1], { extrapolateLeft: clamp, extrapolateRight: clamp, }); const pulse 1 0.12 * Math.abs(Math.sin((frame / 24) * Math.PI)); return ( Circle radius{44} fillrgba(59, 130, 246, 0.35) style{{ position: absolute, left: 280, top: 400, opacity, transform: scale(${pulse}), }} / ); }; export const TutorialAnnotations: React.FC () ( AbsoluteFill style{{background: #1e1e2e}} AbsoluteFill style{{ padding: 60, fontFamily: monospace, fontSize: 24, color: #cdd6f4, }} divconst user await fetchUser(id);/div divnbsp;nbsp;if (!user) throw new Error();/div divnbsp;nbsp;return user.name;/div /AbsoluteFill Sequence from{10} CodeHighlight / /Sequence Sequence from{30} PointingArrow targetX{640} targetY{130} color#ff3b30 / /Sequence Sequence from{60} TargetCircle / /Sequence /AbsoluteFill );运行后你会看到第 10 帧黄色高亮淡入盖住代码第二行第 30 帧红色箭头出现指向该行第 60 帧蓝色圆圈在下方开始呼吸——一段有节奏感的教学标注就齐了。六、避坑清单静态标注位置、尺寸都不变的抽成组件或用useMemo缓存别在每一帧渲染里重新构造对象。需要阴影、模糊这类效果时把effects属性传给形状组件别在 SVG 上叠 CSSfilter渲染会慢一个量级。高亮用 alpha 0.2~0.4 的半透明色同一色相固定代表同一语义黄色重点红色警告别一屏混五种颜色。标注要比画面主体更轻线更细、色更淡、面积更小否则观众先看到标注反而漏了内容。坐标全是绝对像素。要适配不同分辨率画布先用useVideoConfig()拿到width、height再统一乘缩放系数或者用remotion/paths的scalePath()缩放路径。别拿 1920×1080 试出来的坐标直接搬去 1280×720先按目标画布排一遍。七、标注速查表想实现什么用什么组件/函数高亮一行文字或一块区域Rect 半透明fill强调画面中的单点Circleradius强调横向宽区域Ellipsewidth、height指向某个元素Arrowdirection、lengthstyle.transform定位标注淡入/淡出interpolate()style.opacity脉动、呼吸效果Math.sin()算缩放或interpolateStyles()一次变换多个样式属性remotion/animation-utils的interpolateStyles()沿曲线路径移动图形remotion/paths的interpolatePath()具体属性细节想查的时候直接翻官方文档 packages/docs/每个形状组件都有独立页面。【免费下载链接】remotion Make videos programmatically with React项目地址: https://gitcode.com/GitHub_Trending/re/remotion创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考