javascript - Canvas 摆动动画 - Canvas 平移

Question

我正在尝试在 HTML5 Canvas 中制作简单的钟摆，但我被卡住了。我想将它向左和向右摆动 25 度，所以我计算出我应该在 y 轴上平移大约 -3.5 px 的每一帧(向右摆动时为 3.5 px)。我正在使用下面的代码

var rotation = Math.PI/180, //rotate about 1deg
    translation = -3.5,
    counter = 0; //count rotations

function draw() {
    var element = document.getElementById('canvas');
    var ctx = canvas.getContext('2d');

    ctx.clearRect(0,0,element.width,element.height);
    ctx.translate(0, translation);
    ctx.rotate(rotation);

    //function draws all objects
    objects(element,ctx);

    if (counter == 25) {
      rotation *= -1;
      translation *= -1;
      counter = -25;
    } 
    counter += 1;

    window.requestAnimationFrame(draw);
  }

一切看起来都不错，但是当钟摆改变方向时，一切都在 x 轴上平移，几秒钟后从屏幕上消失。这段代码有什么问题？或者也许我在计算中遗漏了什么？我的代码在这里 https://jsfiddle.net/qskxjzv9/2/

预先感谢您的回答。

Answer 1

问题在于，当涉及到旋转，然后是平移时，x 和 y 的平移方向将与看似逻辑的方向不同。

为了解决这个问题，我们实际上不需要更多地涉及平移，只需使用它来放置枢轴(旋转点)，然后使用基于计算摆运动的不同方式的绝对旋转。

例如，这将解决平移问题以及平滑钟摆运动:

• 更改绘制方法以绘制原点 (0,0) 的钟摆 - 只需更改初始坐标，使其围绕 (0,0) 演化
• 转换为屏幕的枢轴点 - 这是将发生旋转的位置。
• 使用 sin() 作为一个因子进行旋转 - 这将创建一个平滑的动画，看起来更像一个钟摆，并且它将运动限制在范围为 [-1,1] 的 Angular
• 改为使用计数器来移动 sin() - 这充当频率因素(您稍后可以将其转换为实际频率，例如，让钟摆每分钟移动 n 次等)。为了简单起见，我刚刚使用了现有的 counter 变量并减少了它的步长值。

然后是主要代码:

var maxRot = 25 / 180 * Math.PI,    // max 25° in both directions
    counter = 0,

    // these are better off outside loop
    element = document.getElementById('canvas');
    ctx = element.getContext('2d');

function draw() {

  // reset transform using absolute transformation. Include x translation:
  ctx.setTransform(1,0,0,1,element.width*0.5,0);

  // clear screen, compensate for initial translate
  ctx.clearRect(-element.width*0.5,0,element.width,element.height);

  // rotate using sin() with max angle
  ctx.rotate(Math.sin(counter) * maxRot);

  // draw at new orientation which now is pivot point
  objects(element, ctx);

  // move sin() using "frequency"-ish value
  counter += 0.05;

  window.requestAnimationFrame(draw);
}

Fiddle

额外的

感谢@Blindman67 提供额外的改进:

要根据振荡控制频率，您可以做一些小的更改 - 首先定义频率:

var FREQUENCY = 3;

定义一个函数来进行转换:

function sint(time) {
    return Math.sin(FREQUENCY * time * Math.PI * 0.002); // 0.002 allow time in ms
}

如果您现在更改 draw() 方法以获取时间参数而不是计数器:

function draw(time) {
   ...
}

然后你可以这样调用旋转:

ctx.rotate(sint(time) * maxRot);