在JavaScript中设置坐标动画-预计算值与动态计算

我正在使用JavaScript和HTML5制作循环动画。动画包括使用canvas“

lineTo（）

方法连接10到200个坐标以创建动画形状。动画正在循环，持续时间为10-20秒。使用

requestAnimationFrame（）

我看到的是大约60fps，每次迭代都会更新每个坐标的位置

处理此类动画最有效的方法是什么

方法1-动态计算

目前，我正在计算并更新

requestAnimationFrame（）

每次迭代中每个点的位置。性能还行，但在旧设备上，我注意到CPU使用率急剧上升，偶尔出现渲染延迟。计算是相当基本的几何操作

方法2-预先计算的位置

我一直在考虑预先计算一个点可能具有的每个位置，并将其存储在内存中。然后在

requestAnimationFrame（）

循环期间，我可以简单地访问每个点的坐标并更新其位置。但我不确定这对性能的影响，以及这是否真的会产生影响

我计划测试方法2，看看是否有明显的差异。但我很好奇，我是否应该考虑另一种方法呢？canvas是适合这项工作的工具吗，还是我应该看看类似WebGL的东西

***编辑：以下是计算和画布绘制功能，以便您了解在每个帧上运行的计算：

Animation.prototype = {

  ... the rest of the prototype setup ...

  // This function runs once per `requestAnmiationFrame()` call:
  updateNodes: function() {
    let progress = this.getProgressRadians(); // simple time offset

    // This loops over between 10-200 node objects, updating their positions
    this.nodes.forEach(node => {
      let offset =
        ((Math.sin(progress - node.numberOffset) + 1) / 2) *
        this.pixelWaveHeight;

      if (this.waveGrows) {
        offset =
          offset * (node.index / (this.nodes.length - 1)) * this.waveGrows;
      }

      if (this.waveAngleRadians) {
        offset +=
          Math.tan(this.waveAngleRadians) * this.spaceBetweenNodes * node.index;
      }

      let yValue = this.canvas.height - offset - this.pixelBaseHeight;

      node.y = yValue;
    });
  },

  // This function runs at the end of each `requestAnimationFrame()` call
  draw: function() {
    let ctx = this.canvas.ctx;
    ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
    ctx.beginPath();
    ctx.moveTo(0, this.canvas.height);
    this.nodes.forEach(node => {
      ctx.lineTo(node.x, node.y);
    });
    ctx.lineTo(this.canvas.width, this.canvas.height);
    ctx.lineTo(0, this.canvas.height);
    ctx.closePath();
    ctx.fill();
  }
}

这些属性中的大多数是静态的，例如，在开始时计算一次，然后才访问：

像素波高

-编号

---

wavegrowth

-数字

200向量算不了什么，即使对于TI计算器也是如此。如果您的代码难以维持60帧/秒，您可能会做错什么，我们需要查看一些代码来判断。但无论如何，瓶颈可能在渲染步骤中，而不是在简单的计算中

lineTo（）

不花时间，

stroke（）

另一方面，我也对性能问题感到惊讶。也许我需要重新计算一下，试着减少一些脂肪。我刚刚用在上下文的

requestAnimationFrame（）

循环中调用的函数更新了这个问题。。。。不幸的是，你做得对。您的draw方法是完美的，您的update one可以从这里或那里的微观优化中获益（例如，您可以使用两个不同的迭代器在循环之前只进行一次分支，而不是每个节点进行一次分支，您还可以在循环外声明所有常量，以避免访问内部道具），但这将开始对100K+节点产生明显影响，而不仅仅是几百个节点。你能试着在速度较慢的机器上运行开发工具的性能分析，看看瓶颈在哪里吗？200个向量算不了什么，即使对于TI计算器也是如此。如果您的代码难以维持60帧/秒，您可能会做错什么，我们需要查看一些代码来判断。但无论如何，瓶颈可能在渲染步骤中，而不是在简单的计算中

lineTo（）

不花时间，

stroke（）

另一方面，我也对性能问题感到惊讶。也许我需要重新计算一下，试着减少一些脂肪。我刚刚用在上下文的

requestAnimationFrame（）

循环中调用的函数更新了这个问题。。。。不幸的是，你做得对。您的draw方法是完美的，您的update one可以从这里或那里的微观优化中获益（例如，您可以使用两个不同的迭代器在循环之前只进行一次分支，而不是每个节点进行一次分支，您还可以在循环外声明所有常量，以避免访问内部道具），但这将开始对100K+节点产生明显影响，而不仅仅是几百个节点。您是否可以尝试在速度较慢的机器上使用开发工具运行性能分析，看看瓶颈在哪里？