Popmotion是一个轻量级的JavaScript动画库，在浏览器中通过requestAnimationFrame驱动数值变化，并渲染到DOM或Canvas上。当我们需要在Node.js环境下把Popmotion动画导出为图片序列时，会遇到一个明显的障碍：Node.js没有window、document和requestAnimationFrame，直接引入popmotion会报错。解决思路是用jsdom模拟浏览器环境，再用node-canvas把每帧画面绘制成PNG文件。这个过程可以封装为一个工具，也就是所谓的Popmotion2Image。下面我们一步步实现这个工具，看看它的内部原理和实际代码。
先从整体架构说起。Popmotion2Image本质上是一个服务端渲染器，它接收一个动画定义（比如tween、spring或者keyframes），然后手动推进动画时间轴，在每一帧调用用户提供的渲染回调，把当前状态画到canvas上并保存图片。因为Node.js的事件循环和浏览器不同，我们不能依赖requestAnimationFrame的自动调度，而需要用固定步长或自定义时钟来生成帧。通常我们会指定帧率（如30fps或60fps）和总时长，然后循环调用动画的seek或update方法，每次更新后立即绘制并输出。
搭建jsdom与node-canvas运行环境
要让Popmotion在Node.js中运行，第一步是创建一个伪浏览器全局对象。jsdom库可以帮我们生成window、document、navigator等对象，然后把这些对象挂载到global上，这样popmotion在导入时就不会因为找不到window而失败。核心代码如下：
const { JSDOM } = require('jsdom');
const dom = new JSDOM('<!DOCTYPE html><html><body></body></html>', {
pretendToBeVisual: true,
url: 'http://localhost'
});
global.window = dom.window;
global.document = dom.window.document;
global.navigator = dom.window.navigator;
global.requestAnimationFrame = dom.window.requestAnimationFrame;
global.cancelAnimationFrame = dom.window.cancelAnimationFrame;
global.HTMLElement = dom.window.HTMLElement;
global.Element = dom.window.Element;
以上代码创建了一个极简的DOM环境，pretendToBeVisual选项让jsdom模拟渲染上下文，提供requestAnimationFrame的polyfill。不过这里的requestAnimationFrame是jsdom内部的setTimeout封装，我们并不会真正使用它，因为后续会主动控制帧进度。挂载这些全局变量后，就可以在Node.js中require('popmotion')而不会报错了。
接下来处理Canvas。浏览器中的Popmotion动画经常使用canvas元素进行绘制，但Node.js没有canvas，需要引入node-canvas库。node-canvas是一个基于Cairo的Canvas实现，API与浏览器Canvas几乎一致，可以让我们在服务端生成图像。安装后，我们创建一个canvas实例，并把它当作全局的HTMLCanvasElement，这样Popmotion的render函数中如果使用了document.createElement('canvas')，我们可以拦截或替换。一个简单的做法是注册一个自定义元素，让document.createElement('canvas')返回node-canvas实例。但这比较麻烦，更常见的做法是直接绕过DOM创建，即用户在动画渲染回调中直接使用我们传入的canvas上下文。所以我们定义一个全局的canvas对象和ctx，后面渲染时直接调用。
驱动Popmotion动画并生成帧图片
有了环境之后，就可以编写动画逻辑了。Popmotion的核心是action（如tween、spring），它们返回一个带有start方法的对象，start接收一个更新回调。在浏览器中，start会调用requestAnimationFrame循环更新；但在Node.js中，我们需要自己驱动这个循环。我们可以先启动动画，但不让它自动运行，而是手动调用ticker。Popmotion内部使用了一个全局的frame loop，我们可以通过popmotion的ticker来控制。不过更简单的方案是使用animate函数手动计算每一帧的值，绕过Popmotion的渲染循环，只使用它的缓动函数和插值能力。例如，使用popmotion的easing和mixer函数，再加上我们自己维护的时间变量。
假设我们要导出一个从0到100的tween动画，总时长2秒，帧率30fps，那么需要导出60帧图片。我们使用popmotion的easing.cubicBezier或者直接使用默认easeOut，结合mix函数计算当前值。代码如下：
const { easing, mix } = require('popmotion');
const { createCanvas } = require('canvas');
const fs = require('fs');
const path = require('path');
const canvas = createCanvas(400, 300);
const ctx = canvas.getContext('2d');
const totalDuration = 2000; // 毫秒
const fps = 30;
const totalFrames = Math.floor(totalDuration / 1000 * fps);
const easeOut = easing.cubicBezier(0, 0, 0.2, 1);
for (let i = 0; i <= totalFrames; i++) {
const t = i / totalFrames; // 0到1
const easedT = easeOut(t);
const x = mix(0, 100, easedT);
const y = 50 + Math.sin(easedT * Math.PI) * 30;
// 清空画布
ctx.fillStyle = '#ffffff';
ctx.fillRect(0, 0, 400, 300);
// 绘制动画元素
ctx.fillStyle = '#e74c3c';
ctx.beginPath();
ctx.arc(x, y, 20, 0, Math.PI * 2);
ctx.fill();
// 保存帧
const buffer = canvas.toBuffer('image/png');
const frameName = `frame_${String(i).padStart(3, '0')}.png`;
fs.writeFileSync(path.join(__dirname, 'frames', frameName), buffer);
}
这段代码演示了最直接的方式：不用Popmotion的start方法，而是用它的缓动和混合函数在循环中手动计算。但题目要求实现Popmotion2Image，意味着要更贴近Popmotion的原始用法，让动画定义可以复用。我们可以创建一个适配器，将Popmotion的action转换成可逐步seek的对象。比如创建一个tween动画，但不调用start，而是通过action中的props获取总时长和起始值，然后在循环中调用action的seek方法。Popmotion的每个action都有一个seek方法，可以跳转到指定时间。我们可以利用这一点，在循环中依次seek到不同的时间点，触发更新回调，再绘制。这样代码会更通用，支持各种动画类型。
下面是一个更完整的实现，使用Popmotion的tween和spring，通过seek驱动：
const { tween, spring, action } = require('popmotion');
const { createCanvas } = require('canvas');
const fs = require('fs');
const path = require('path');
// 准备canvas
const canvas = createCanvas(800, 600);
const ctx = canvas.getContext('2d');
const outputDir = path.join(__dirname, 'output');
if (!fs.existsSync(outputDir)) fs.mkdirSync(outputDir);
// 定义一个Popmotion动画
const myTween = tween({
from: { x: 0, y: 0 },
to: { x: 400, y: 300 },
duration: 2000,
ease: 'easeInOut'
});
// 获取动画总时长
const totalMs = 2000;
const fps = 25;
const step = 1000 / fps;
const frameCount = Math.ceil(totalMs / step);
// 手动seek循环
for (let i = 0; i <= frameCount; i++) {
const currentMs = i * step;
// 临时保存更新值
let currentState = { x: 0, y: 0 };
// 订阅更新
const unsubscribe = myTween.start({
update: (v) => { currentState = v; },
complete: () => {}
});
// seek到指定时间（ms）
myTween.seek(currentMs);
unsubscribe();
// 绘制
ctx.fillStyle = '#000';
ctx.fillRect(0, 0, 800, 600);
ctx.fillStyle = '#ffcc00';
ctx.beginPath();
ctx.arc(currentState.x, currentState.y, 30, 0, Math.PI * 2);
ctx.fill();
// 保存
const buf = canvas.toBuffer('image/png');
fs.writeFileSync(path.join(outputDir, `frame_${i}.png`), buf);
}
这个例子中，我们在每一帧先调用start订阅更新，然后立即seek到目标时间，seek会同步触发update回调，从而拿到该时间点的状态，然后取消订阅并绘制。之所以这样做是因为Popmotion的seek是同步的，可以直接获取值。不过这种频繁订阅取消可能会有效率问题，更好的方式是在循环外启动动画，但不要让它自动播放，而是使用ticker手动推进。Popmotion内部有一个帧循环，我们可以通过action的stop和start来控制。但为了简单，上述方法已经能够工作。
处理动画类型与性能优化
Popmotion支持多种动画类型，包括tween、spring、keyframes、physics等。对于spring这种没有固定时长的动画，需要指定一个截止条件，比如速度小于某个阈值或时间超过上限。在导出图片时，可以设置一个最大时长，比如5秒，然后按照帧率采样。对于keyframes，可以直接使用它的seek方法获取中间值。需要注意的是，有些动画在seek时可能不会触发完整的生命周期，比如spring的内部状态需要从初始条件开始模拟，如果直接seek到很远的时间点，可能不准确。解决方案是对于物理动画，使用小步长迭代模拟，而不是直接seek。这超出了本文的范围，但值得了解。
另一个关键点是内存管理。导出大量帧图片时，如果每帧都创建一个新的canvas或buffer，内存会迅速增长。建议复用同一个canvas实例，只重绘并toBuffer。node-canvas的toBuffer会返回一个Buffer，写入文件后即可释放。避免把所有的Buffer存在数组里。此外，考虑使用stream或异步写入，防止同步写文件阻塞事件循环。对于生产级工具，可以使用worker线程并行渲染不同片段。
时间精度方面，由于Node.js的setTimeout和setImmediate并不精确，我们最好使用performance.now()来测量循环耗时，或者指定固定的时间步长并累计。在上面的循环中，我们使用的是固定步长，没有任何延迟，因此导出的帧是严格按照时间戳映射的，不会出现实际运行时的抖动。这也是服务端渲染的优势：可以生成完全一致的帧序列，非常适合于生成动画缩略图或视频帧。
最后，Popmotion2Image可以被封装成一个npm包，提供命令行接口或编程API。例如定义一个函数renderAnimationToFrames(action, options)，内部处理环境初始化、帧计算和文件写入。这样开发者只需要传入动画定义和输出目录，就能得到一堆PNG文件。进一步，可以把这些帧用其他工具合成GIF或WebP动图。Node.js生态中有很多库可以做这件事，比如gifencoder或sharp，将帧序列合成为动画图片。
总结一下，实现Popmotion2Image的关键在于三个环节：用jsdom搭建伪浏览器全局环境，用node-canvas提供绘图能力，再用同步seek或手动时间步长生成每一帧的画面。虽然Popmotion本身是为浏览器设计的，但通过合理的适配，完全可以在Node.js中复用它的动画逻辑，实现服务端渲染。这种技术不仅用于图片导出，还能用于动画测试、可视化报告生成等场景。