Как изменить направление анимации в холсте HTML5

Мне сложно понять, как работает анимация HTML5. Мне нужно некоторое просветление.Как изменить направление анимации в холсте HTML5

Что я хочу сделать, это сделать прямоугольник анимировать внизу холста, а затем вернуться к вершине холста. Кажется, проблема в том, что я не задаю правильное расположение прямоугольника. Я заметил, что когда я устанавливал скорость прямоугольника, отличную от текущей скорости, она реагирует так, как я ее хочу. Прямоугольник хочет вернуться назад, но он помнит, что он должен идти вниз. Поэтому он застревает, пытаясь решить, что делать.

Как изначально установить местоположение y прямоугольника, и нужно ли его обновлять постоянно?

<!doctype html> 
<html> 
<head> 
<title>canvas animation</title> 
<style> 
#animated { 
    border: 1px solid black; 
} 
</style> 
</head> 
<body> 

<h1>canvas animation</h1> 

<canvas id="animated" width="500" height="300"></canvas> 

<script> 
     var xLoc = 0; 
     var yLoc = 0; 
     var speed = 5; 

     window.requestAnimFrame = (function(callback) { 
      return window.requestAnimationFrame || 
      window.webkitRequestAnimationFrame || 
      window.mozRequestAnimationFrame || 
      window.oRequestAnimationFrame || 
      window.msRequestAnimationFrame || 
      function(callback) { 
       window.setTimeout(callback, 1000/60); 
      }; 
     })(); 

     function animateDown() { 
      var canvas = document.getElementById("animated"); 
      var context = canvas.getContext("2d"); 

      context.clearRect(0, 0, canvas.width, canvas.height);   

      context.beginPath(); 
      context.rect(xLoc, yLoc, 300, 150); // yLoc-canvas.height = -300 
      context.fillStyle = "rgb(247, 209, 23)"; 
      context.fill(); 

      yLoc += 4; 

      if (yLoc > canvas.height - 150) { 
       yLoc -= speed; 
      } else if (yLoc < 0) { 
       yLoc += speed; 
      } 

      requestAnimFrame(function() { 
       animateDown(); 
      }); 
     } 

     window.onload = function() { 
      animateDown(); 
     }; 
</script> 
</body> 
</html>

источник

2013-07-02 milkIt

Проблема в том, что вы не говорите ей об обратном. Вы говорите об этом, и он попадает в бесконечный цикл.

Alter свой код, чтобы иметь переменную direction, чтобы сказать ему, куда идти (вверх/вниз):

<script> 
     var xLoc = 0; 
     var yLoc = 0; 
     var speed = 5; 
     var direction = 1; // Defaults to 'down' 

     window.requestAnimFrame = (function(callback) { 
      return window.requestAnimationFrame || 
      window.webkitRequestAnimationFrame || 
      window.mozRequestAnimationFrame || 
      window.oRequestAnimationFrame || 
      window.msRequestAnimationFrame || 
      function(callback) { 
       window.setTimeout(callback, 1000/60); 
      }; 
     })(); 

     function animateDown() { 
      var canvas = document.getElementById("animated"); 
      var context = canvas.getContext("2d"); 

      context.clearRect(0, 0, canvas.width, canvas.height);   

      context.beginPath(); 
      context.rect(xLoc, yLoc, 300, 150); // yLoc-canvas.height = -300 
      context.fillStyle = "rgb(247, 209, 23)"; 
      context.fill(); 

      yLoc += speed * direction; // Increase by speed in the given direction 

      if (yLoc > canvas.height - 150) { 
       direction = -1; // Move up again (decrease) 
      } else if (yLoc < 0) { 
       direction = 1; // Move downwards 
      } 

      requestAnimFrame(function() { 
       animateDown(); 
      }); 
     } 

     window.onload = function() { 
      animateDown(); 
     }; 
</script>

источник

2013-07-02 16:41:22 Eric

Эрик, почему я не могу использовать yLoc -; изменить направление? Я пытаюсь понять, почему мне нужно создать новую переменную, чтобы управлять направлением yLoc против использования собственных свойств yLoc для самореализации. – milkIt

Я получил его сейчас. Я должен сначала установить приращение движения yLoc, чтобы логический оператор захватил позиционирование yLoc для выполнения логического оператора. – milkIt

Причина в том, что yLoc сначала уменьшается, поэтому он меньше, чем 'canvas.height - 150'. В следующий раз, когда он будет вызван, он будет увеличиваться выше этого порога; который снова уменьшает *. Так что в основном он застревает, увеличивая/уменьшая на '5' все время. – Eric

Как изменить направление анимации в холсте HTML5

ответ

Смежные вопросы