如何提取双原子链振动动画并转换为GIF格式？

方案1：直接录屏转GIF（最简便） #

• 打开目标页面，调整到你想要的动画状态（比如固定k值或M1参数）
• 用录屏工具录制动画区域：
  • Windows：按Win+G调出Xbox Game Bar，选择录制画布区域
  • Mac：打开QuickTime Player，选择「新建屏幕录制」，框选动画部分
• 把录制好的视频用GIF转换工具（比如GIMP、ScreenToGif）转成GIF，按需调整帧率、尺寸和颜色优化

方案2：修改原网页脚本批量导出帧再合成 #

1. 打开目标页面，按F12调出开发者工具，切换到Console标签
2. 输入 cancelAnimationFrame(step); 暂停原动画
3. 复制以下代码替换原step函数，执行后会自动收集动画帧：

// 初始化帧计数器和存储数组
let frameCount = 0;
const maxFrames = 60; // 控制导出帧数，60帧对应原动画12秒内容
const frames = [];

function step() {
  // 保留原动画的绘制逻辑
  for (i=-300; i<301; i++) {
    ka = i*pi/300;
    omgac = Math.sqrt(C*(M1+M2)/(M1*M2)-Math.sqrt(Math.pow((M1+M2)/(M1*M2),2)-4*Math.pow(Math.sin(ka/2),2)/(M1*M2)));
    omgop = Math.sqrt(C*(M1+M2)/(M1*M2)+Math.sqrt(Math.pow((M1+M2)/(M1*M2),2)-4*Math.pow(Math.sin(ka/2),2)/(M1*M2)));
    d1[i+300]=[ka,omgac/Math.sqrt(2*C*(M1+M2)/(M1*M2))];
    d3[i+300]=[ka,omgop/Math.sqrt(2*C*(M1+M2)/(M1*M2))];
  }

  ctx.clearRect(0, 0, 600, 40);

  // 绘制弹簧
  ctx.beginPath();
  ctx.moveTo(0,10);
  ctx.lineTo(600,10);
  ctx.stroke();

  ctx.beginPath();
  ctx.moveTo(0,30);
  ctx.lineTo(600,30);
  ctx.stroke();

  omg_ac = Math.sqrt(C*(M1+M2)/(M1*M2)-Math.sqrt(Math.pow((M1+M2)/(M1*M2),2)-4*Math.pow(Math.sin(k/2),2)/(M1*M2)));
  omg_op = Math.sqrt(C*(M1+M2)/(M1*M2)+Math.sqrt(Math.pow((M1+M2)/(M1*M2),2)-4*Math.pow(Math.sin(k/2),2)/(M1*M2)));
  R = 3;

  ac_c = C*(1+Math.cos(k))/(2*C-omg_ac*omg_ac*M2);
  ac_s = -C*Math.sin(k)/(2*C-omg_ac*omg_ac*M2);
  op_c = C*(1+Math.cos(k))/(2*C-omg_op*omg_op*M1);
  op_s = C*Math.sin(k)/(2*C-omg_op*omg_op*M1);

  R = 3*Math.sqrt(M1);

  for (i=0; i<16; i++) {
    x_ac1 = 2*18.75*i+4*Math.cos(omg_ac*t+i*k)+9.375;
    x_ac2 = 2*18.75*(i+0.5)+ac_c*4*Math.cos(omg_ac*t+i*k)+ac_s*4*Math.sin(omg_ac*t+i*k)+9.375;
    x_op1 = 2*18.75*i+op_c*4*Math.cos(omg_op*t+i*k)+op_s*4*Math.sin(omg_op*t+i*k)+9.375;
    x_op2 = 2*18.75*(i+0.5)+4*Math.cos(omg_op*t+i*k)+9.375;
    ctx.beginPath();
    ctx.arc(x_ac1,30,R,0,2*pi);
    ctx.fill();
    ctx.beginPath();
    ctx.arc(x_ac2,30,3,0,2*pi);
    ctx.fill();
    ctx.beginPath();
    ctx.arc(x_op1,10,R,0,2*pi);
    ctx.fill();
    ctx.beginPath();
    ctx.arc(x_op2,10,3,0,2*pi);
    ctx.fill();
  }

  // 收集当前帧
  if (frameCount < maxFrames) {
    const imgData = c.toDataURL('image/png');
    frames.push(imgData);
    frameCount++;
    t += dt;
    requestAnimationFrame(step);
  } else {
    console.log('帧收集完成，复制frames数组里的base64字符串转成PNG后即可合成GIF');
  }
}

// 重置参数并启动帧收集
t = 0;
frameCount = 0;
requestAnimationFrame(step);

4. 等待Console提示帧收集完成后，把frames数组里的每个base64字符串转成PNG图片
5. 用GIMP或ImageMagick等工具将PNG按顺序合成GIF，设置帧率为5帧/秒（匹配原动画速度）

方案3：用ImageMagick批量截图合成 #

• 安装ImageMagick工具
• 固定浏览器窗口位置，用以下脚本循环截取画布区域（替换X、Y为画布的实际坐标，可通过xwininfo工具获取）：

# Linux/macOS示例脚本
for i in {0..59}
do
  import -window "浏览器窗口名称" -crop 600x40+X+Y frame_$i.png
  sleep 0.2
done
# 合成GIF
convert -delay 20 -loop 0 frame_*.png phonon_animation.gif

内容的提问来源于stack exchange，提问作者Mphon