JS canvas based animation tutorial

Туториал по JS анимации
основанной на холсте

Что вы сможете сделать после прочтения этого туториала?

Вот несколько анимированных примеров, расположенных в порядке возрастания сложности создания:

Подготовка

Для создания интересной анимации создадим новый холст и подготовим к нему скриптовый элемент:

<!-- встраиваемый холст -->
<canvas width=300 height=500 id=my-canvas>
</canvas>

<script>
  <!-- весь остальной код будет писаться внутри этого тэга -->
</script>

Размеры холста вы можете указать свои. Я буду использовать размер 300 на 500 точек.

Также скриптовый элемент не обязательно должен быть возле холста, главное, чтобы ваш скрипт смог его найти.

Что будем создавать

Эта часть туториала будет посвящена простой анимации, такой, как в первом примере.

Создадим простой эффект расходящихся волн. Эту анимацию можно будет использовать для обозначения загрузки или еще чего-нибудь. =)

Каркас

В самом начале скрипта напишем такой код:

var canvas = document.getElementById('my-canvas');
var ctx = canvas.getContext('2d');

ctx.fillStyle = 'black'; // фон
ctx.strokeStyle = 'cyan'; // контур фигур
ctx.lineWidth = 4; // толщина контура

А теперь перечень основных функций, которые я буду использовать при создании практически каждой анимации:

update() - функция, обновляющая все анимированные фигуры. (шаблонной реализации нет)

draw() - очищает холст, прорисовывает все объекты и больше ничего не делает.

loop() - главный цикл всей анимации. Вызывает обновление данных фигур и перерисовку холста. Чаще всего выглядит вот так:

(function loop() {
  // создание зацикливания
  window.requestAnimationFrame(loop);
  
  update();
  draw();
})(); // автозапуск

Наметка модели анимации

Вся суть данной анимации в том, что через равные промежутки времени в центре создаётся новое кольцо, которое со временем увеличивается в размерах, пока не станет слишком большим и не удалится.

Что представляют собой кольца? Думаю, достаточно определить кольца только их радиусами, т.к. больше они ничем друг от друга не отличаются.

Код

Создадим массив, в котором будут храниться кольца (их радиусы), и несколько функций для манипулирования им:

var rings = [];

function createNewRing() {
  // добавляем в массив кольцо радиуса 0
  rings.push(0);
}

function growRings(value) {
  // увеличиваем все кольца на value
  for(var i = 0; i < rings.length; i++)
    rings[i] += value;
}

function filterRings(r) {
  // удаляем все кольца больше данного радиуса
  while(rings[0] > r)
    rings.shift();
}

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

[0]
// добавим новое кольцо
[0, 0]
// увеличим все на 3
[3, 3]
// + ещё одно кольцо
[3, 3, 0]
// опять увеличим
[4, 4, 1] // порядок сохраняется
          // от большего к меньшему

Теперь напишем функции, которые обеспечат отображение колец на холсте:

function drawRing(r) {
  // рисует кольцо данного радиуса
  // (150, 250) - координаты центра холста
  ctx.beginPath();
  ctx.arc(150, 250, r, 0, 2*Math.PI);
  ctx.stroke();
}

function clearCanvas() {
  // окрашивает холст фоновым цветом
  // (300, 500) - размеры холста
  ctx.fillRect(0, 0, 300, 500);
}

И наконец последние три функции, связывающие всё воедино:

function update() {
  createNewRing();
  growRings(5);
  filterRings(200);
}

function draw() {
  clearCanvas();
  rings.map(drawRing);
}

(function loop() {
  window.requestAnimationFrame(loop);
  update();
  draw();
})();

Даже если вы все сделали правильно, результат вас не сильно порадует. Дело в том, что все происходит слишком быстро. Для того, чтобы создавать новые кольца через определенные промежутки времени (1 секунду), используем функцию Date.now():

var lastTime = 0;
function update() {
  if(Date.now() - lastTime > 1000) {
    createNewRing();
    lastTime = Date.now();
  }
  growRings(5);
  filterRings(200);
}

Также изменим скорость 'роста' колец, учитывая, что в среднем цикл запускается 60 раз в секунду:

var lastTime = 0;
function update() {
  if(Date.now() - lastTime > 1000) {
    createNewRing();
    lastTime = Date.now();
  }
  growRings(50 / 60); // 50 точек в секунду
  filterRings(200);
}

Результат

Теперь вы знаете, как сделать простую анимацию с помощью холста :)

// показать весь код...

JS canvas based anim. tutorial [RU]