Создание продвинутой 2D-анимации с помощью Vanilla JavaScript — очень творческий и полезный процесс. Это требует глубокого понимания фундаментальных принципов анимации и хорошего владения программированием на JavaScript. В этом руководстве мы рассмотрим некоторые продвинутые примеры 2D-анимации с использованием ванильного JavaScript и предоставим четкие пошаговые инструкции по их созданию.
Пример 1: Системы частиц
Системы частиц — широко используемый метод в 2D-анимации. Они состоят из большого количества мелких отдельных частиц, которые объединяются для создания большего визуального эффекта. В этом примере мы создадим систему частиц, имитирующую фейерверк.
Чтобы создать систему частиц, мы сначала определим объект частицы с его собственными свойствами, такими как положение, скорость, ускорение и время жизни. Затем мы создадим массив объектов-частиц и обновим их свойства, чтобы имитировать их движение и поведение.
Вот пример кода для создания системы частиц:
- Сначала создайте 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 пикселей.
- Создайте
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: Интерактивная анимация
Интерактивная анимация — это эффективный способ привлечь аудиторию и создать более захватывающий опыт. В этом примере мы создадим интерактивную анимацию, которая реагирует на действия пользователя.
Чтобы создать интерактивную анимацию, мы будем использовать прослушиватели событий, чтобы определять, когда пользователь взаимодействует с элементом холста. Затем мы будем использовать этот ввод для обновления положения и поведения анимации.
Вот пример кода для создания интерактивной анимации:
- Создайте 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>
это будет содержать анимацию внутри холста.
- Затем создайте
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, чтобы получать последние обновления здесь 😊