Javascript requestAnimationFrame 微调器

Question

在研究了创建轻量级灵活微调器的所有可能方法之后，我最终使用了非常出色的 requestAnimationFrame。它基本上与 CSS3 animation 做同样的事情:执行计算并将结果传递给浏览器以便同步重绘和屏幕重绘(通常为 60fps)。虽然 CSS3 transition 和 animation 适用于非常基本的用途，因为只有一个 transitionend 事件在某些情况下可能不会触发，requestAnimationFrame 提供完全控制，您可以与屏幕重绘同步完美地执行多个复杂计算。

在 HTML5 worker 中执行此代码是否有意义？

CSS

i.spinner {position:relative;display:inline-block;margin:20px}
i.bar {display:block;position:absolute;top:0;left:50%;height:inherit}
i.bar i {display:block;width:100%;height:29%;background:#000}
i.bar:nth-child(2) {transform:rotate(45deg);-webkit-Transform:rotate(45deg);-moz-Transform:rotate(45deg);-ms-Transform:rotate(45deg)}
i.bar:nth-child(3) {transform:rotate(90deg);-webkit-Transform:rotate(90deg);-moz-Transform:rotate(90deg);-ms-Transform:rotate(90deg)}
i.bar:nth-child(4) {transform:rotate(135deg);-webkit-Transform:rotate(135deg);-moz-Transform:rotate(135deg);-ms-Transform:rotate(135deg)}
i.bar:nth-child(5) {transform:rotate(180deg);-webkit-Transform:rotate(180deg);-moz-Transform:rotate(180deg);-ms-Transform:rotate(180deg)}
i.bar:nth-child(6) {transform:rotate(225deg);-webkit-Transform:rotate(225deg);-moz-Transform:rotate(225deg);-ms-Transform:rotate(225deg)}
i.bar:nth-child(7) {transform:rotate(270deg);-webkit-Transform:rotate(270deg);-moz-Transform:rotate(270deg);-ms-Transform:rotate(270deg)}
i.bar:nth-child(8) {transform:rotate(315deg);-webkit-Transform:rotate(315deg);-moz-Transform:rotate(315deg);-ms-Transform:rotate(315deg)}

JS

function buildspinner(size, invert) {
  var color = '#000',
    spinner = document.createElement('i'),
    bar = document.createElement('i'),
    hand = document.createElement('i'),
    opacitymap = [0.8, 0.2, 0.2, 0.2, 0.2, 0.5, 0.6, 0.7],
    nodemap = [];
  if (invert) {color = '#fff'};
  spinner.className = 'spinner';
  spinner.style.cssText = 'width:' + size + 'px;height:' + size + 'px';
  bar.className = 'bar';
  bar.style.cssText = 'width:' + (size / 9) + 'px;height:' + size + 'px;margin-left:' + (-size / 18) + 'px';
  hand.style.cssText = 'border-radius:' + size + 'px;background:' + color;
  bar.appendChild(hand);
  for (var j = 0; j < 8; j++) {
    var clone = bar.cloneNode(true);
    clone.style.opacity = opacitymap[j];
    spinner.appendChild(clone);
    nodemap.push(clone)
  }
  document.body.appendChild(spinner);
  requestAnimationFrame(function(timestamp) {animatespinner(timestamp, timestamp, 125, opacitymap, nodemap, 0)})
}

function animatespinner(starttime, timestamp, duration, opacitymap, nodemap, counter) {
  var progress = (timestamp - starttime) / duration;
  counter++;
  if (counter % 3 == 0) {
    for (var j = 0; j < 8; j++) {
      var next = j - 1;
      if (next < 0) {
        next = 7
      };
      nodemap[j].style.opacity = (opacitymap[j] + (opacitymap[next] - opacitymap[j]) * progress)
    }
  }
  if (progress < 1) {
    requestAnimationFrame(function(timestamp) {animatespinner(starttime, timestamp, 125, opacitymap, nodemap, counter)})
  } else {
    var rotatearray = opacitymap.pop();
    opacitymap.unshift(rotatearray);
    requestAnimationFrame(function(timestamp) {animatespinner(timestamp, timestamp, 125, opacitymap, nodemap, 0)})
  }
}

counter 变量用于节流。您希望动画流畅，但又希望保持较低的 CPU 使用率。在此示例中，我们每 3 帧而不是每帧更改不透明度，从而大大减少了 CPU 开销，但对平滑度没有明显影响。 (在四核 3GHz 处理器上，CPU 使用率从 12% 降低到 5%)。

因为 CSS3 animation 依赖于 keyframes，所以您必须为每个旋转手创建一个单独的关键帧，从而导致计算量太大。使用 CSS3 动画构建的同一微调器导致 30% 的 CPU 使用率。

Demo

Answer 1

requestAnimationFrame 的要点是浏览器可以尽可能接近 60fps 或浏览器动画引擎的帧速率有效地调用它，因此您不应该在 requestAnimationFrame 回调中工作，这将花费比帧时间更长的时间。请记住，在浏览器中，javascript 的执行速度非常快……它需要非常复杂的 javascript 计算，实际执行时间比帧时间长。您将遇到的主要问题是屏幕上的布局、绘画和重绘元素。为此，网络 worker 不会帮助你。如果您有非常繁重的 javascript，执行时间超过帧时间，网络 worker 只会帮助您。

这也很容易分析...您可以查看 Chrome 的时间轴工具，了解您的 javascript 函数执行需要多长时间。很有可能它最多只有 1 毫秒，如果你的动画运行速度低于 60fps，那是因为布局和重绘花费的时间比帧时间中剩余的 16.7 毫秒更长，但这是在浏览器布局引擎本身中，而不是你可以通过网络 worker 卸载的东西。