Question

我遇到了一个问题，我的代码在Chrome中工作正常，但在Safari中开始变得口吃。我在某处读到“ Safari将间隔的上限设置为1000ms，然后添加了自己的指数延迟，使每次迭代加倍。”话虽这么说，我正在尝试使用requestAnimationFrame将代码更改为可在Safari和Chrome上使用，但是在解决问题时遇到了问题。

基本上，我想做的是使用requestAnimationFrame而不是setInterval来使每次单击简化div。

任何指导将不胜感激。

这是Javascript：

let progressAvatar = document.querySelector('.box');
progressAvatar.addEventListener('click', checkClick);


var clicks = 0;

function checkClick() {
  clicks += 1;
  if (clicks == 1) {
    startingLocationOfAvatar();
  } else if (clicks == 2) {
    locationOfAvatar();
  }
}


function startingLocationOfAvatar() {
   let speed = 10;
  // Initial location of Avatar
  let pos = 0;
  // Ending location of Avatar
  let progressBarWidthDivided = 53;
  let id = setInterval(frame, speed);

  function frame() {
    if (pos == progressBarWidthDivided) {
      clearInterval(id);
    } else {
      pos++;
      progressAvatar.style.marginLeft = pos + "px";
    }
  }
}


// Move the avatar based on its previous location
function locationOfAvatar() {
  let speed = 10;
  // Pos becomes last location of movePixels
  let pos = 53;
  let id = setInterval(frame, speed);

  // movePixels adds last location by its new location
  let movePixels = pos * 2;

  function frame() {
    if (pos == movePixels) {
      clearInterval(id);
    } else {
      pos++;
      progressAvatar.style.marginLeft = pos + "px";
    }
  }
}

这是HTML：

<div class="box">
</div>

这是CSS：

.box {
  height: 100px;
  width: 100px;
  background-color:red;
}

最后这是一个jsfiddle： Move Div Across Screen

Answer 1

我会让专家回答，但是作为2周的编码菜鸟，这就是我所知道的，您可以将所有单个动画功能编译为一个宏大的Animation函数。并使用请求动画框架调用该函数。为了自己制作一款明智的游戏，我完全放弃了使用纯Javascript操纵css值和编码的方法。

请注意，具体取决于您将微型功能放在何处-照片/图形项将在视觉上显示在彼此的上方或下方。

它应该看起来像这样：

function drawEverything(){
    context.clearRect(0,0,width,height);
    context.save();
    draw();
    draw1();
    draw2();
    context.restore();
    requestAnimationFrame(drawEverything);
}
requestAnimationFrame(drawEverything);

使用requestAnimationFrame代替setInterval

1 个答案: