使用 Remotion 制作一个 5 柱状图动画：从源码到 MP4 导出

一、最终效果与技术特点这个示例展示 North、South、East、West 和 Central 五个区域的数据目标值分别为 72%、48%、86%、62% 和 94%。动画包含五根柱子错峰出现柱高和百分比数字同步变化使用缓动曲线让动画自然减速渐变色、圆角和阴影效果1280×720、30 FPS 的标准横屏视频所有动画由帧驱动导出结果稳定、可复现。二、为什么选择 RemotionRemotion 是一个通过 React 代码制作视频的框架。与传统视频编辑软件不同它把视频画面视为 React 组件并使用当前帧数控制元素状态。这种方式尤其适合数据可视化、批量视频、排行榜、产品演示和自动化报告。只要替换数据就能重复生成不同版本的视频。三、准备开发环境建议安装 Node.js 20 或 22 LTS并确认版本node-vnpm-v下载并解压项目后进入目录cdanimated-bar-chart使用 pnpm 安装依赖并启动pnpminstallpnpmdev如果没有 pnpm也可以使用 npmnpminstallnpmrun dev启动后浏览器会打开 Remotion Studio。选择AnimatedBarChart即可预览和逐帧检查动画。四、注册视频 Compositionsrc/Root.tsx定义视频的名称、时长、帧率和画布尺寸import ./index.css; import {Composition} from remotion; import {AnimatedBarChart} from ./Composition; export const RemotionRoot: React.FC () { return ( Composition idAnimatedBarChart component{AnimatedBarChart} durationInFrames{120} fps{30} width{1280} height{720} / ); };其中durationInFrames{120}与fps{30}表示视频持续 4 秒120 帧 ÷ 30 帧/秒 4 秒id既是 Studio 中显示的名称也是命令行导出时使用的 Composition ID。五、准备五组柱状图数据在src/Composition.tsx中用数组统一保存标签、数值和颜色const bars [ {label: North, value: 72, color: #7C5CFC}, {label: South, value: 48, color: #20C7A6}, {label: East, value: 86, color: #FFB84D}, {label: West, value: 62, color: #FF6685}, {label: Central, value: 94, color: #56A8FF}, ] as const;以后要修改图表只需要替换这组数据不必重新编写五份组件代码。六、用帧驱动动画Remotion 动画的核心是useCurrentFrame()和interpolate()const frame useCurrentFrame(); const progress interpolate(frame, [start, start 42], [0, 1], { extrapolateLeft: clamp, extrapolateRight: clamp, easing: Easing.bezier(0.16, 1, 0.3, 1), });这里的逻辑是frame表示当前正在渲染第几帧从第start帧到第start 42帧将进度从 0 映射到 1clamp将范围外的结果固定在 0 或 1避免柱子反向增长或超出目标贝塞尔缓动让柱子前期快速增长、后期平稳减速。柱子的实时高度与数字可以由同一个progress推导const height bar.value * 4.1 * progress; const displayedValue Math.round(bar.value * progress);这样柱高与百分比始终同步不会出现数字已经结束但柱子仍在运动的问题。七、实现五根柱子的错峰出现如果五根柱子同时开始画面会显得比较机械。可以根据数组下标增加延迟const start 18 index * 8;第一根柱子从第 18 帧开始后续柱子每隔 8 帧启动一次。在 30 FPS 下8 帧约等于 0.27 秒。这种轻微的错峰能够引导观众从左到右阅读数据。八、柱状图组件的关键结构通过map()渲染五根柱子{bars.map((bar, index) { const start 18 index * 8; const progress interpolate(frame, [start, start 42], [0, 1], { extrapolateLeft: clamp, extrapolateRight: clamp, easing: Easing.bezier(0.16, 1, 0.3, 1), }); const height bar.value * 4.1 * progress; const displayedValue Math.round(bar.value * progress); return ( div key{bar.label} style{{ flex: 1, height: 100%, display: flex, flexDirection: column, justifyContent: flex-end, alignItems: center, }} div style{{fontSize: 25, fontWeight: 800, marginBottom: 12, opacity: progress}} {displayedValue}% /div div style{{ width: 100%, maxWidth: 150, height, background: linear-gradient(180deg, ${bar.color}, ${bar.color}B8), borderRadius: 16px 16px 4px 4px, boxShadow: 0 16px 40px ${bar.color}28, }} / /div ); })}这里采用 Flex 布局并使用justifyContent: flex-end将柱子固定在基线之上。改变高度时柱子自然地从下向上生长。九、让标题也具有入场动画标题使用透明度和纵向位移实现淡入上浮const titleOpacity interpolate(frame, [0, 16], [0, 1], { extrapolateRight: clamp, }); div style{{ opacity: titleOpacity, translate: 0 ${interpolate(frame, [0, 16], [18, 0], { extrapolateRight: clamp, })}px, }} {/* 标题内容 */} /divRemotion 中不要依赖 CSStransition或keyframes。逐帧渲染时直接根据frame计算样式结果更加可靠。十、导出 MP4 视频在项目目录中执行npx remotion render AnimatedBarChart out/bar-chart.mp4渲染完成后文件位于out/bar-chart.mp4也可以先渲染一张静态图检查排版npx remotion still AnimatedBarChart out/preview.png--frame80--frame80表示截取第 80 帧此时五根柱子基本已经完成入场。十一、常见问题1. 找不到pnpm命令可以直接使用 npm或者安装 pnpmnpminstall-gpnpm2. 导出时提示找不到 Composition检查命令中的AnimatedBarChart是否与Root.tsx中的id完全一致包括大小写。3. 柱子超出画面示例中的4.1是高度缩放系数const height bar.value * 4.1 * progress;如果数据范围更大应当先归一化或减小该系数。更通用的写法是根据最大值计算比例const maxValue Math.max(...bars.map((item) item.value)); const height (bar.value / maxValue) * 385 * progress;4. 修改数据后标签拥挤减少标签长度、增大视频宽度或者降低柱子之间的gap。如果柱子数量很多更适合使用横向柱状图或分页展示。十二、进一步扩展基于这个项目还可以继续加入从 JSON、CSV 或接口动态读取数据自动计算纵轴刻度和网格线增加排序动画让柱子交换位置添加背景音乐、旁白和字幕使用输入参数批量生成不同地区或不同月份的视频增加片尾总结或品牌 Logo。总结Remotion 的关键思想是把时间转换为帧再把帧转换为组件样式。在这个五柱状图示例中我们用useCurrentFrame()获取时间用interpolate()计算动画进度再由进度统一控制柱高、数字和透明度。掌握这一模式后折线图、排行榜、数据看板和年度总结视频都可以用相同思路实现。相比手工制作视频代码化方案更容易复用也更适合自动化和批量生产。如果本文对你有帮助欢迎点赞、收藏并在评论区交流。你还可以尝试把示例中的五组数据替换成自己的业务指标生成第一段属于自己的数据可视化视频。