如何在Webkit/Chrome中用JavaScript放慢全局时间与渲染以录制平滑动画

1 全量JS时间劫持方案 #

之前的Proxy方案未生效通常是没有覆盖所有时间相关的调度API，你需要在页面所有脚本加载前注入以下代码，即可将所有JS驱动的动画（包括anime.js等第三方库生成的动效）速度降至原有的10%：

const TIME_SCALE = 0.1; // 时间流逝速度为正常的10%，即总耗时为原来的10倍

// 劫持Date时间
const NativeDate = Date;
Date = class extends NativeDate {
  static now() {
    return NativeDate.now() * TIME_SCALE;
  }
  constructor(...args) {
    super(args.length ? ...args : NativeDate.now() * TIME_SCALE);
  }
};

// 劫持定时器
const nativeSetTimeout = window.setTimeout;
const nativeSetInterval = window.setInterval;
window.setTimeout = (cb, delay = 0, ...args) => nativeSetTimeout(cb, delay / TIME_SCALE, ...args);
window.setInterval = (cb, delay = 0, ...args) => nativeSetInterval(cb, delay / TIME_SCALE, ...args);

// 劫持帧动画调度
const nativeRAF = window.requestAnimationFrame;
const nativeCancelRAF = window.cancelAnimationFrame;
const rafMap = new Map();
window.requestAnimationFrame = (cb) => {
  const wrapped = (ts) => cb(ts * TIME_SCALE);
  const id = nativeRAF(wrapped);
  rafMap.set(id, wrapped);
  return id;
};
window.cancelAnimationFrame = (id) => {
  nativeCancelRAF(id);
  rafMap.delete(id);
};

2 CSS动画/过渡全局减速 #

CSS动画不受JS时间劫持影响，可通过JS批量修改元素的动画参数实现10倍减速：

document.querySelectorAll('*').forEach(el => {
  const computedStyle = getComputedStyle(el);
  // 处理animation时长与延迟
  const animationDuration = parseFloat(computedStyle.animationDuration);
  const animationDelay = parseFloat(computedStyle.animationDelay);
  if (animationDuration) el.style.animationDuration = `${animationDuration * 10}s`;
  if (animationDelay) el.style.animationDelay = `${animationDelay * 10}s`;
  // 处理transition时长与延迟
  const transitionDuration = parseFloat(computedStyle.transitionDuration);
  const transitionDelay = parseFloat(computedStyle.transitionDelay);
  if (transitionDuration) el.style.transitionDuration = `${transitionDuration * 10}s`;
  if (transitionDelay) el.style.transitionDelay = `${transitionDelay * 10}s`;
});

3 无代码实现方案（仅本地调试/录制适用） #

如果是本地录制场景，无需修改任何代码，直接使用Chrome内置的调试工具即可实现全局调速：

• 打开Chrome开发者工具（F12）
• 点击右上角三点菜单，选择「更多工具」→「动画」
• 拖动动画面板顶部的速度滑块至10%，即可同时全局控制所有JS、CSS动画的播放速度

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