Создание продвинутой 2D-анимации с помощью Vanilla JavaScript — очень творческий и полезный процесс. Это требует глубокого понимания фундаментальных принципов анимации и хорошего владения программированием на JavaScript. В этом руководстве мы рассмотрим некоторые продвинутые примеры 2D-анимации с использованием ванильного JavaScript и предоставим четкие пошаговые инструкции по их созданию.

Пример 1: Системы частиц

Системы частиц — широко используемый метод в 2D-анимации. Они состоят из большого количества мелких отдельных частиц, которые объединяются для создания большего визуального эффекта. В этом примере мы создадим систему частиц, имитирующую фейерверк.

Чтобы создать систему частиц, мы сначала определим объект частицы с его собственными свойствами, такими как положение, скорость, ускорение и время жизни. Затем мы создадим массив объектов-частиц и обновим их свойства, чтобы имитировать их движение и поведение.

Вот пример кода для создания системы частиц:

  1. Сначала создайте HTML-файл, я предпочитаю называть его particle.html, и поместите этот HTML-код:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Particle</title>
</head>
<body>
    <canvas id="canvas" width="800" height="500"></canvas>
    <script src="./particle.js"></script>
</body>
</html>

это создаст холст для анимации шириной 800 пикселей и высотой 500 пикселей.

  1. Создайте particle.js и поместите этот код:
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

var particles = [];
var numberOfParticles = 50;

function createParticles() {
  for (var i = 0; i < numberOfParticles; i++) {
    var particle = {
      x: canvas.width / 2,
      y: canvas.height / 2,
      vx: (Math.random() - 0.5) * 10,
      vy: (Math.random() - 0.5) * 10,
      ax: 0,
      ay: 0.1,
      color: 'rgb(' + Math.floor(Math.random() * 256) + ',' + Math.floor(Math.random() * 256) + ',' + Math.floor(Math.random() * 256) + ')',
      size: Math.random() * 5 + 5,
      life: Math.random() * 100 + 100
    };
    particles.push(particle);
  }
}

function updateParticles() {
  for (var i = 0; i < particles.length; i++) {
    var particle = particles[i];
    particle.vx += particle.ax;
    particle.vy += particle.ay;
    particle.x += particle.vx;
    particle.y += particle.vy;
    particle.life--;
    if (particle.life <= 0) {
      particles.splice(i, 1);
    }
  }
}

function drawParticles() {
  for (var i = 0; i < particles.length; i++) {
    var particle = particles[i];
    ctx.fillStyle = particle.color;
    ctx.fillRect(particle.x, particle.y, particle.size, particle.size);
  }
}

function loop() {
  ctx.fillStyle = 'rgba(0, 0, 0, 0.1)';
  ctx.fillRect(0, 0, canvas.width, canvas.height);

  createParticles();
  updateParticles();
  drawParticles();

  requestAnimationFrame(loop);
}

loop();

В этом примере мы сначала создаем элемент холста и контекст 2D-рендеринга. Затем мы создаем пустой массив для частиц и устанавливаем количество частиц, которые хотим создать. Функция createParticles() вызывается для создания частиц, а функция updateParticles() вызывается для обновления положения и времени жизни частиц. Функция drawParticles() вызывается для рисования частиц на холсте.

Функция loop() используется для непрерывного обновления и рисования частиц. Он использует метод requestAnimationFrame() для создания плавного цикла анимации. В функции цикла мы сначала очищаем холст полупрозрачным черным цветом, чтобы создать эффект следа. Затем мы вызываем функции createParticles(), updateParticles() и drawParticles() для обновления и рисования частиц.

Пример 2: Интерактивная анимация

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

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

Вот пример кода для создания интерактивной анимации:

  1. Создайте HTML-файл, я предпочитаю называть его interactive.html, и поместите этот HTML-код:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Interactive</title>
</head>
<body>
    <canvas id="canvas" width="800" height="500"></canvas>
    <script src="./interactive.js"></script>
</body>
</html>

это будет содержать анимацию внутри холста.

  1. Затем создайте interactive.js и поместите этот код:
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

var mouseX = 0;
var mouseY = 0;

canvas.addEventListener('mousemove', function(event) {
  mouseX = event.clientX - canvas.offsetLeft;
  mouseY = event.clientY - canvas.offsetTop;
});

function loop() {
  ctx.fillStyle = 'rgba(0, 0, 0, 0.1)';
  ctx.fillRect(0, 0, canvas.width, canvas.height);

  var dx = mouseX - canvas.width / 2;
  var dy = mouseY - canvas.height / 2;
  var angle = Math.atan2(dy, dx);
  var distance = Math.sqrt(dx * dx + dy * dy);
  var radius = distance / 10;

  ctx.beginPath();
  ctx.arc(canvas.width / 2, canvas.height / 2, radius, 0, Math.PI * 2);
  ctx.strokeStyle = 'white';
  ctx.lineWidth = 2;
  ctx.stroke();

  ctx.save();
  ctx.translate(canvas.width / 2, canvas.height / 2);
  ctx.rotate(angle);
  ctx.beginPath();
  ctx.moveTo(0, 0);
  ctx.lineTo(radius, 0);
  ctx.strokeStyle = 'red';
  ctx.lineWidth = 2;
  ctx.stroke();
  ctx.restore();

  requestAnimationFrame(loop);
}

loop();

В этом примере мы сначала создаем элемент холста и контекст 2D-рендеринга. Затем мы добавляем прослушиватель событий mousemove, чтобы определять, когда пользователь перемещает мышь по холсту. Слушатель событий обновляет переменные mouseX и mouseY с помощью текущей позиции мыши.

Функция loop() используется для непрерывного обновления и отрисовки анимации. Он использует метод requestAnimationFrame() для создания плавного цикла анимации. В функции цикла мы сначала очищаем холст полупрозрачным черным цветом, чтобы создать эффект следа.

Затем мы используем переменные mouseX и mouseY для вычисления угла и расстояния между положением мыши и центром холста. Мы используем эту информацию для рисования круга с радиусом в зависимости от расстояния и линии, указывающей на положение мыши. Линия поворачивается, чтобы указывать на положение мыши, используя угол, рассчитанный ранее.

Заключение

Создание продвинутой 2D-анимации с помощью Vanilla JavaScript требует глубокого понимания основных принципов и уверенного владения языком программирования. Благодаря примерам, представленным в этом руководстве, у вас теперь есть основа для создания продвинутых и сложных 2D-анимаций с использованием ванильного JavaScript. Экспериментируйте с различными техниками и расширяйте границы возможного с помощью 2D-анимации. Помните, единственным ограничением является ваше воображение.

Вам нравится то, что вы читаете? Если да, пожалуйста, дайте мне кнопку хлопка 👏. Это многое значит для меня. И не забудьте подписаться на меня, чтобы быть в курсе других советов, подсказок и новостей от меня 👍.

Подпишитесь на мою учетную запись Twitter, чтобы получать последние обновления здесь 😊