Простая анимация на JavaScript в элементе canvas

1. Делаем горизонтальный рисунок-ленту, показывающий фазы движения объекта, в простейшем случае такой:

фазы движения объекта, рисунок images.png

Рисунок должен легко "нарезаться" на кусочки одинаковой ширины и мы знаем количество этих кусочков (в данном случае - шесть).

2. Пишем функцию animate, аргументами которой будут:

• id элемента для размещения канвы, а канву скрипт создаст сам по размерам рисунка (поделив его ширину на количество кадров в рисунке);
• URL рисунка;
• количество кадров по горизонтали в рисунке, в принципе, функция drawFrame может учесть и кадры, расположенные по вертикали (см. в коде);
• количество кадров анимации в секунду, которое мы хотим установить.

По загрузке рисунка (img.onload) создаётся канва и вычисляются размерные величины.

Добавим также код, останавливающий анимацию при наведении мыши на канву и возобновляющий при убирании, чтобы ситуация отличалась от простого вывода анимированной gif'ки.

Сама анимация будет выполняться стандартным методом requestAnimationFrame, который мы заставим выполняться нужное количество раз в секунду с помощью обычного метода setInterval.

3. Запускаем функцию-обёртку animate по загрузке страницы.

Вот скрипт в работе и исходник:

<div id="animateDemo" style="margin: 0 auto; text-align: center;"></div>
<script>
 function animate(id,url,steps,fps) {
  let canvas, ctx, img, imgWidth, timerId = null;
  let currentLoopIndex = 0;
  
  img = new Image();
  img.src = url;
  img.onload = function() {
   canvas = document.createElement('canvas');
   ctx = canvas.getContext('2d');
   imgWidth = Math.floor (this.width / steps);
   canvas.width = imgWidth; 
   canvas.height = this.height;
   canvas.onmouseover = function () { clearInterval(timerId); };
   canvas.onmouseout = function () { init(); };
   document.getElementById(id).appendChild (canvas);
   init();
  };

  function drawFrame(frameX, frameY, canvasX, canvasY) {
   //https://developer.mozilla.org/ru/docs/Web/API/CanvasRenderingContext2D/drawImage
   ctx.drawImage(img,
    frameX * imgWidth, frameY * canvas.height, imgWidth, canvas.height,
    canvasX, canvasY, imgWidth, canvas.height
   );
  }

  function step() {
   ctx.clearRect(0, 0, canvas.width, canvas.height);
   drawFrame(currentLoopIndex, 0, 0, 0);
   currentLoopIndex++;
   if (currentLoopIndex >= steps) currentLoopIndex = 0;
  }

  function init() {
   timerId = setInterval( function() { window.requestAnimationFrame(step); }, 1000 / fps);
  }
 }

 window.addEventListener ('load', function (e) {
  animate('animateDemo','images.png',6,5); 
   //id элемента для размещения канвы, 
   //URL рисунка, 
   //количество кадров по горизонтали в рисунке, 
   //количество кадров в сек.
  }
 );  
</script>
<noscript>
 <div style="margin: 0 auto; text-align: center;">
  Включите в браузере JavaScript для работы приложения!
 </div>
</noscript>

В исходнике предполагается, что файл рисунка images.png находится в той же папке, что и скрипт.

06.03.2020, 21:29 [1543 просмотра]