用 Remotion 给视频加箭头和高亮：从静态标注到动态标注的完整教程

用 Remotion 给视频加箭头和高亮从静态标注到动态标注的完整教程【免费下载链接】remotion Make videos programmatically with React项目地址: https://gitcode.com/GitHub_Trending/re/remotion想在教程视频里加箭头、高亮框和会呼吸的圆圈这套玩法就藏在 Remotion 视频标注里装好remotion/shapes和remotion/paths两个 npm 包标注就能写进代码里——跟着画面走、踩着节拍进场。读完你能自己拼出一个完整教程场景高亮框先出现箭头沿曲线滑入圆圈随讲解节奏脉动。一、先解决定位问题让标注钉在画面的指定位置这一节回答标注出现在哪。结论先行Remotion 给每个画面一块画布——AbsoluteFill铺满整个视频尺寸标注组件靠 x、y 两个数字落位就像往桌面上贴便利贴。关键只有一个钩子useCurrentFrame()取当前帧号它相当于视频的计时器。把标注的位置、大小、透明度都写成帧号的函数静态和动态标注就都在你手边了。import {AbsoluteFill} from remotion; const Stage ({children}) ( AbsoluteFill style{{backgroundColor: #0f172a}} {children} /AbsoluteFill );之后所有标注都放进这个容器Rect x{80} y{120} ... /就表示图形左上角距画面左边 80px、距顶部 120px。在 Studio 里拖帧预览坐标改多少画面立刻变多少不用肉眼猜。二、3 步画出静态标注高亮框、焦点圆与气泡指注一次到位这一节回答画哪些标注。remotion/shapes自带一整套 SVG 组件Rect圆角矩形、Circle圆、Ellipse椭圆、Callout气泡指注、Star星形等——而且有现成的Arrow组件不必自己拼路径。第 1 步选形状、给尺寸Rect传width/heightCircle传radiusCallout再加pointerDirection控制小尾巴朝哪边。第 2 步调观感所有组件都吃标准 SVG 属性fill用rgba半透明就是高亮色stroke/strokeWidth画描边cornerRadius做圆角。第 3 步用上一节的 x/y 落位完成。四种常用标注合在一段代码里import {Rect, Circle, Callout, Arrow} from remotion/shapes; const StaticMarks () ( Rect width{560} height{120} cornerRadius{12} fillrgba(59,130,246,0.15) x{80} y{140} / Circle radius{70} fillrgba(250,204,21,0.25) x{640} y{420} / Arrow length{180} directionleft fill#f87171 x{760} y{200} / Callout width{320} height{90} cornerRadius{8} pointerDirectionleft fill#e2e8f0 x{1100} y{380} / / );Arrow还暴露了headWidth、headLength、shaftWidth三个参数粗短有力或细长的指示箭头都能画出来。每个形状的完整属性可直接翻 packages/shapes/src/components/ 下的组件源码。三、让标注动起来的两种方式脉动高亮与沿路径滑行这一节回答标注怎么动。核心只有一句话把组件属性写成帧号的函数。方式一脉动高亮。帧号套进正弦函数再映射成缩放圆圈就像在呼吸pathStyle{{transform: scale(1.2)}}。注意用pathStyle改图形本身直接传style改的是外层 SVG 容器。方式二沿曲线滑行这是最出效果的一招。remotion/paths里的getPointAtLength(path, distance)接收 SVG 路径串和一个距离返回该距离处的坐标让距离随帧号增长标注就会贴着曲线滑过去。两种方式合进一个组件import {useCurrentFrame, interpolate} from remotion; import {getPointAtLength} from remotion/paths; import {Circle} from remotion/shapes; const TRACK M 120 520 C 420 120 720 120 880 420; const GuideDot () { const frame useCurrentFrame(); const distance interpolate(frame, [0, 59], [0, 380]); const {x, y} getPointAtLength(TRACK, distance); const scale 1 0.25 * Math.sin(frame / 4); return ( Circle radius{26} fillrgba(248,113,113,0.9) x{x} y{y} pathStyle{{transform: scale(${scale})}} / ); };想同时插值平移、旋转、缩放整段transform字符串remotion/animation-utils里的interpolateStyles和makeTransform是现成工具源码在 packages/animation-utils/。四、拼出一个教程场景4 种元素按节拍登场这一节回答怎么组合。把Sequence当分镜表用给每块标注一个from第几帧登场和durationInFrames展示多久一屏画面就变成有起承转合的小剧本。import {AbsoluteFill, Sequence} from remotion; import {Rect, Arrow, Circle} from remotion/shapes; const TutorialScene () ( AbsoluteFill style{{backgroundColor: #0f172a}} Sequence from{10} durationInFrames{400} Rect width{620} height{300} cornerRadius{8} fillrgba(59,130,246,0.12) x{60} y{100} / Rect width{560} height{30} fillrgba(250,204,21,0.3) x{90} y{200} / /Sequence Sequence from{80} durationInFrames{330} Arrow length{160} directionleft fill#f87171 x{700} y{210} / Circle radius{40} fillrgba(34,197,94,0.25) x{400} y{460} / /Sequence /AbsoluteFill );动手前记住四条 颜色固定编码红色指点、黄色标重点、绿色表成功全片统一观众不用思考就能读懂。一屏最多 2~3 个焦点标注堆多了画面只会更吵不会更专业。静态标注别每帧重算形状参数不变就抽成常量或包一层useMemo避免冗余计算。坐标对分辨率敏感要让同一场景适配不同分辨率把写死的 x/y 换成比例 × 画布宽高集中在一处缩放。五、源码在哪看自定义标注前先看这 3 个目录内置组件不够用时比如想换一种缓动、画一种新标注别从零造轮子按顺序看这三处形状组件packages/shapes/src/components/——每个Rect、Circle、Arrow、Callout如何把参数翻译成 SVG 路径这里都有。路径算法packages/paths/——getPointAtLength、getTangentAtLength、translatePath等沿路径移动、路径变形的工具全集。动画辅助packages/animation-utils/——interpolateStyles、makeTransform等变换插值函数。看完这三处标注问题就闭环了用 x/y 定位、用 shapes 画形、用帧号驱动、用Sequence排期剩下的只是调参数。【免费下载链接】remotion Make videos programmatically with React项目地址: https://gitcode.com/GitHub_Trending/re/remotion创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考