javascript - 在 google appmaker 中，无法使 requestAnimationFrame 工作

Question

不知道有没有人注意到这一点。我可以使用 setInterval 使动画工作，但时间并不像我希望的那样精确。但出于某种原因，我无法让 requestAnimationFrame 做很多事情。

下面代码的目的是让屏幕每 250 毫秒在两种不同的颜色之间闪烁，虽然这并不是我最终想要实现的，但我使用这个简化的概念来尝试获得动画工作的概念。 (如果有人想尝试一下，我正在尝试让黑色背景闪烁红色 100 毫秒，每 400 毫秒)。

诚然，我对 javascript 还很陌生，但我想知道是否还有其他人注意到类似的事情？

我正在尝试的代码，点击按钮调用 sayHello();

function sayHello(){
  var start = window.performance.now();
  var runStart = window.performance.now();
  var my_canvas = app.pages.Run.children.Panel1.children.Canvas.getElement().getElementsByTagName("CANVAS")[0];
  var requestId1;
  var totalDuration = 5000;
  var currentColor = '#000000';

  function animate1(now){
    my_canvas.style.backgroundColor = currentColor;
    console.log('animate now: ' + now + 'win' + windows.performance.now());
    if (now > start+250){
      start = now;
      now = 0;
      if (currentColor === '#ff0000') currentColor = '#000000';
      else currentColor = '#ff0000';
      console.log('switch: ' + window.performance.now());
    }

    if ((window.performance.now - runStart) > totalDuration){
      window.cancelAnimationFrame(requestId1); 
      console.log('done');
    }
    else{
      requestAnimationFrame(animate1);
      console.log('not done');
    }
  }

  function sayGoodbye(){
    window.cancelAnimationFrame(requestId1);
  }

  requestId1 = requestAnimationFrame(animate1);
  console.log('start app' + requestId1);
  console.log('info: ' + start + ' ' + runStart + ' ' + totalDuration);

}

Answer 1

你快到了。

只是替换

windows.performance.now()

与

window.performance.now()

希望对您有所帮助。