如何每0.01秒冻结Flourish Studio条形图竞速动画以捕获高质量PDF帧？

阿华AIGC实验室

2026-4-13

非常理解你的需求——要4K级别的高清矢量帧，屏幕录制完全达不到PDF的锐度，之前试了一堆自动化工具都卡在速度上，Flourish自带的暂停还会乱排条形，确实让人头疼。下面给你几个针对性的方案，完全避开屏幕录制，专注于精确控制动画帧+快速导出PDF：

方案1：浏览器控制台JS脚本（精确控制Flourish动画时间戳）

Flourish的可视化是JS驱动的，你可以直接在浏览器控制台编写脚本，精确跳转到每一个0.01秒的时间点，同时优化打印流程跳过冗余等待，解决之前手动操作的低效问题。

具体操作步骤：

打开你的Flourish嵌入页面，按F12打开Chrome/Firefox的开发者控制台

先获取Flourish的动画核心实例（执行后如果报错，刷新页面再试一次）：

// 定位Flourish可视化实例
let viz = window.Flourish?.visualizations?.[0];
if (!viz) console.error("未找到Flourish实例，请刷新页面后重新执行");

运行步进导出脚本（可根据你的动画时长和PC性能调整参数）：

// 配置参数：替换成你的动画总时长、步进间隔（固定0.01秒）、打印延迟（低配置PC调大到1500）
const totalDuration = 15; // 你的条形图动画总时长（秒）
const step = 0.01;
const printDelay = 800; // 给PC留足渲染和打印的时间（毫秒）

// 先禁用Flourish自动播放，避免干扰
viz.pause();

// 循环逐帧导出
let currentTime = 0;
const exportInterval = setInterval(async () => {
    if (currentTime > totalDuration) {
        clearInterval(exportInterval);
        console.log("所有帧已导出完成！");
        return;
    }

    // 精确跳转到指定时间点（完全保留该帧状态，不会触发条形重排）
    viz.setTime(currentTime);
    await new Promise(r => setTimeout(r, 100)); // 给100ms让画面稳定渲染

    // 触发无交互打印（需提前把Chrome的"打印到PDF"设为默认打印机，关闭打印预览）
    document.execCommand('print');

    currentTime += step;
    console.log(`已处理帧：${(currentTime*100).toFixed(0)}/100`);
}, printDelay);

提速关键设置（针对低配置PC）：

进入Chrome设置chrome://settings/printing，将"打印到PDF"设为默认打印机，勾选"无预览打印"
关闭浏览器所有扩展程序，打开Chrome的性能模式（chrome://settings/system里关闭硬件加速，改用软件渲染更稳定）
打印设置里固定缩放为100%，关闭页眉页脚，勾选"打印背景图形"

方案2：优化后的Puppeteer脚本（解决你之前的5秒/帧速度问题）

你之前用Puppeteer慢的核心原因是默认打印流程带了太多冗余步骤（预览、弹窗、资源加载），下面这个优化版脚本直接调用Chrome的原生PDF导出接口，跳过所有交互环节，单帧速度能压缩到1秒以内：

const puppeteer = require('puppeteer');

(async () => {
  // 启动轻量无头浏览器（针对低配置PC优化）
  const browser = await puppeteer.launch({
    headless: "new", // 新版无头模式比旧版快30%+
    args: [
      '--disable-extensions',
      '--disable-gpu', // 低配置PC禁用GPU，减少资源占用
      '--no-sandbox',
      '--disable-dev-shm-usage', // 解决内存不足问题
    ]
  });
  const page = await browser.newPage();

  // 打开你的Flourish嵌入页面（替换成你的页面URL）
  await page.goto('替换成你的Flourish可视化页面完整URL', {waitUntil: 'networkidle0'});

  // 获取动画总时长并禁用自动播放
  const totalDuration = await page.evaluate(() => window.Flourish.visualizations[0].getDuration());
  await page.evaluate(() => window.Flourish.visualizations[0].pause());

  let currentTime = 0;
  const step = 0.01;

  // 逐帧导出PDF
  while (currentTime <= totalDuration) {
    // 精确跳转到当前时间帧
    await page.evaluate(t => {
      window.Flourish.visualizations[0].setTime(t);
    }, currentTime);

    // 直接导出PDF（跳过所有预览和弹窗）
    await page.pdf({
      path: `frame_${(currentTime*100).toString().padStart(5, '0')}.pdf`, // 按帧编号命名，方便后续排序
      printBackground: true,
      displayHeaderFooter: false,
      scale: 1,
      preferCSSPageSize: true,
      timeout: 0 // 给低配置PC足够的渲染时间
    });

    currentTime += step;
    console.log(`已导出帧：${(currentTime/totalDuration*100).toFixed(1)}%`);
  }

  await browser.close();
})();

方案3：Flourish高级导出（付费版专属，效率最高）

如果你的Flourish项目是付费版，可以直接导出逐帧SVG文件（完全矢量，锐度拉满），再用免费工具批量转成PDF，速度比浏览器打印快N倍，低配置PC也能轻松跑：

在Flourish编辑器里找到"导出"选项，选择"逐帧SVG"，设置帧间隔为0.01秒
用ImageMagick（免费开源）批量转换SVG到PDF，命令行执行：
```
magick convert -density 300 *.svg frame_%05d.pdf
```
这个命令会把所有SVG按顺序转换成300DPI的PDF，完全没有质量损失。