企业官网建设流程全解析

用 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/height，Circle传radius，Callout再加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} fill="rgba(59,130,246,0.15)" x={80} y={140} /> <Circle radius={70} fill="rgba(250,204,21,0.25)" x={640} y={420} /> <Arrow length={180} direction="left" fill="#f87171" x={760} y={200} /> <Callout width={320} height={90} cornerRadius={8} pointerDirection="left" 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} fill="rgba(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} fill="rgba(59,130,246,0.12)" x={60} y={100} /> <Rect width={560} height={30} fill="rgba(250,204,21,0.3)" x={90} y={200} /> </Sequence> <Sequence from={80} durationInFrames={330}> <Arrow length={160} direction="left" fill="#f87171" x={700} y={210} /> <Circle radius={40} fill="rgba(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