我的时间去哪了——把一个月的时间记录，跑成 60 秒"时间赛马"

如果你也记过时间，大概会冒出同一个问题：

“我这个月的时间，到底都去哪了？”

表格能回答，但表格太安静。更好玩的答案，是把一个月的记录跑成一条 60 秒左右的视频：睡觉、工作、学习、交通这些柱子，像一排会移动的电梯，在屏幕上上上下下、互相超车。

数据圈管这种图叫“赛马图”——柱子你追我赶，像在赛道上冲刺。我这支跑的不是股票、城市或榜单，而是我自己的时间，所以我给它起了个更顺口的名字：「时间赛马」。

这篇讲一个真实案例：王相的 aTimeLogger 时间记录，怎样从“手工 Excel + 屏幕录制”，变成“一条命令，云端渲约 8 分钟出片”。

你不需要先学 Remotion。先看懂三件事就够了：

• 成片长什么样；
• AI 干活三次失败，最后怎么翻盘；
• 以后你验收类似自动化项目，别只看截图，要看“真东西”。

一堆时间记录，最后变成一条能播放的动态视频（AI 示意图）

先看成果：一条 60 秒左右的视频，回答“时间去哪了”

这条管线的输入，是 aTimeLogger 导出的时间记录 CSV。

它做的事很朴素：把活动类型里冒号后的名字变成柱名，把 S1 到 S7 映射成 7 个一级分类和颜色，再按同一个“名称 + 日期”把分钟数加起来。

最后输出的，就是一条「时间赛马」MP4。

定稿成片的参数是：

• 分辨率：1920×1080；
• 帧率：30fps；
• 总帧数：1818 帧；
• 时长：60.6 秒；
• 文件大小：约 17.6MB；
• 字体：HarmonyOS Sans；
• 标题：王相的五月时间。

先别看参数，直接看它跑起来的样子：

完整成片：王相的五月时间，60.6 秒（真实成片，可直接播放）

中段你会看到柱子还在不断换位：

成片中段，多个时间类别仍在移动和竞争（真实成片截帧）

结尾时，整个月的累计结果收束到最后一帧：

成片结尾，时间去向收束成最终排序（真实成片截帧）

这事以前不是没做过。

早年的办法更像“手搓视频”：Excel VBA 透视整理，打开 d3 网页，屏幕录制，再剪辑配乐。能做，但太重。重到你明明有数据，也懒得每个月重新来一遍。

现在变成一条命令：

make-barrace.ps1 -Csv <表> -Title <标题>

它会自动上传到云服务器，后台渲约 8 分钟，成片再自动落回桌面。一次端到端实测里，13:40:13 触发，13:51:28 落盘，全程约 11 分钟。

以前像搬家：表格、网页、录屏、剪辑分开搬；现在像按门铃：一条命令等成片（AI 示意图）

这里的重点不是“某个工具很厉害”。

重点是：一件多年嫌麻烦的事，被拆成了可以检查、可以复用、可以失败后继续修的流水线。

核心就一句话：省下来的不是审美判断，而是重复搬砖。

真正难的不是画柱子，是让柱子“像以前那样动”

一开始，方案并不是直接 Remotion 自建。

老版基于 Jannchie 的 d3 项目：headless Edge 用 CDP 逐帧采集，再交给 ffmpeg 按 30fps 合成。老 d3 版成片规格是 1900×1040、62 秒、思源黑体、7 类配色、每日口径。想搜索原技术名的朋友，可以搜 bar chart race / 条形竞赛图。

后来要迁移时，候选继任者 anichart.js 也被认真看过。但它的 v3 删了视频导出，Canvas 实测只能复刻约 90% 观感。用户最在意的恰恰是“观感像不像”。

所以最后拍板：不用现成库凑，Remotion 自建。

听起来很顺，实际连摔三跤。

第一跤：只验“零重叠”。

视频看起来很干净，柱子没有互相压住，于是差点以为通过了。但「时间赛马」的灵魂不是“截图干净”，而是“运动连续”。只验零重叠，就像验电梯只看门关没关，不看它有没有平稳到楼层。

第二跤：整数槽吸附。

柱子会“啪”地跳格。它不是滑过去的，是瞬移过去的。你肉眼一看就知道不对。

第三跤：对原始排名连续插值。

这次不跳了，但中段糊成一团。像所有家具都自己长腿乱跑，桌子、椅子、柜子互相穿来穿去。

三次失败不是坏事，坏的是没有把失败留成可对照的证据（AI 示意图）

转折点，是不再凭感觉调参数。

做法变成：回去读老 d3 源码 visual.js，把它当“标准答案”，逐行抽出运动语义，再在 Remotion 里显式重建。

最后固化成 7 条硬约束。翻成人话，大概是这样：

1. 每根柱子住在互斥楼层里：排名槽是离散的，不是随便飘；但楼层之间要能平滑移动。
2. 整行家具一起搬：文字、条形、数值是一个整体，用同一个 translateY 搬，不要各跑各的。
3. 上下移动像电梯缓停，左右伸缩像尺子拉长：纵向用 easeCubicInOut，横向宽度、数值、日期、x 域用线性。
4. 坐标尺要会“压缩视野”：用 big_value 的 x 域 [2*min-max, max+10]，避免画面节奏变形。
5. 进出榜别从天而降：在原槽位淡入淡出。
6. 活动少时整体居中：按活动数垂直居中，不让画面歪在上面。
7. 并列时要有稳定裁判：tiebreak 用名称 charCodeAt 累加和逆序，避免同分时乱跳。

卡住时别光问“怎么调”，要回去找能跑的标准答案（AI 示意图）

这就是这次最有价值的地方：AI 没有一次做对。

它先假通过，再跳格，再糊成团。真正翻盘靠的不是“再试一次”，而是把旧系统里已经被认可的运动方式，拆成可执行的验收规则。

你能带走的，不是安装教程，而是三条验收方法

这篇不是教你今天就装一套 Remotion。

更值得带走的，是做自动化项目时的三条笨办法。它们不性感，但能少返工。

1. 验收要验运动，不要只验截图

“零重叠”听起来很合理，实际会假通过。

「时间赛马」要看的，是连续滑动、超车轨迹、没有长时间冻结、日期连续推进。截图只能证明某一帧没崩，不能证明 60 秒的运动是对的。

以后你验收任何动态产物，都可以多问一句：

我是在验一张漂亮截图，还是在验一段真实过程？

2. 别信 AI 自报，先看三样真东西

这条管线最后认的交付，不是“我已经完成”的一句话。

它认三样：

• MP4 真的存在；
• 文件大小对得上；
• 日志里有 Encoded 1818/1818 这种完整渲染证据。

这也解释了为什么真实抽帧很重要。AI 示意图可以帮你讲故事，但不能冒充成片证据。真实帧必须从 MP4 里抽出来，文件要足够大，还要能看出不是黑帧、不是空图。

3. 卡住时，回去找“标准答案”

很多自动化失败，不是因为工具不够新，而是因为你忘了旧流程到底哪里好。

这次的标准答案，就是老 d3 的运动语义。新框架可以换，判断标准不能丢。

如果你也有类似项目，比如月报、复盘、数据图、视频模板，别急着让 AI 从零发挥。更稳的做法是：

• 先找一份你认可的旧成品；
• 把“为什么它看起来对”拆成规则；
• 再让新工具按规则重建；
• 每次失败都留下实物对照。

想自己跑一支？脚本包直接拿

它需要什么：

• 一台 Windows 或 macOS 电脑；本机就能渲，不需要服务器。
• Node.js 18+；去 nodejs.org 装一次 LTS 版就行。
• 你的时间记录 CSV；aTimeLogger 导出可以直接喂，或者照 samples/demo.csv 自制。
• 一个你有权使用的单文件中文 TTF 字体；比如 HarmonyOS Sans 或思源黑体 / Source Han Sans，包里只告诉入口名称，不随包带字体。
• 可选：你自己的 MP3 配乐；不放就没有配乐。

⬇ 下载 time-race-kit-v1.zip

这个包里有渲染脚本原件、虚构演示数据和说明书；字体和音乐不随包，说明书里讲怎么放。

使用方法：

unzip time-race-kit-v1.zip
cd time-race-kit-v1
npm install
mkdir -p public/fonts public/audio
# 把你的单文件中文 TTF 放到 public/fonts/MyChineseFont.ttf
# 如果要配乐，把 mp3 放到 public/audio/bgm-clip.mp3
node scripts/render-job.mjs samples/demo.csv out.mp4 "我的时间" 2.0 14 fonts/MyChineseFont.ttf

你应该看到日志里出现 Encoded N/N，当前目录里出现 out.mp4。

换自己的数据： 把命令里的 samples/demo.csv 换成自己的 CSV 即可；aTimeLogger 导出可以直接喂，手工整理就照 demo.csv 的 date,type,name,value 四列来。

常见卡点：

• 中文变方块：字体没放对，或传进去的不是单文件 TTF。
• 没声音：正常；包里没有音乐，想要配乐就自备 MP3 放到 public/audio/bgm-clip.mp3。
• 第一次渲染要几分钟：正常；装依赖和启动渲染内核都需要时间。

再诚实补一句：脚本是我实际出片用的原件；装依赖是标准 Node 流程，我没法替每台电脑打包票，卡住了按说明书排查。

真正可迁移的是这个顺序：

• 先拿虚构样例跑通；
• 再换自己的数据；
• 先确认视频真的生成；
• 再看文件大小是否正常、能不能播放；
• 最后才谈改颜色、改标题、加音乐。

别一上来追求“全自动”。

全自动省的是你的手，不是你的脑。

方向、边界、验收口径，仍然要人拍板。

老实说几句边界

这篇不是“任何人随手点一下就能复刻”的教程。现在有现成脚本包，但你仍然要准备自己的时间记录数据，装一次 Node.js，放好字体，再等机器渲几分钟。不能只靠手机点两下就出片；能做的是先把数据准备好，再在本机跑通这套流程。

早年手工做视频那段，是背景故事。它能解释为什么这件事值得自动化，但不能拿来当这次亲手验证过的旧成片证据。不能把故事当证据；能放心看的，是这次留下来的 MP4、日志和截图。

AI 插画也一样。它负责把流程讲得更直观，像在旁边画白板；它不能证明视频真的渲出来了。能证明成片的，只有真视频、真日志、真截帧。

最后，这条流水线没有做成网页服务，也没有上 cron 常驻，不是漏做，是故意不养。一个月跑一次的东西，不能为了“看起来全自动”就常年开着；能更省心的做法，是需要时跑一条命令，成片回来就收工。

这个案例最值得学的不是某个命令，而是一句话：

凡是没有证据的，都只能叫线索；凡是要长期复用的，都要把验收规则写成机器和人都看得懂的东西。