Урок 29: Анимации в JavaScript
Анимации являются важной частью современных веб-приложений, делая их более интерактивными и привлекательными для пользователей. В этом уроке мы рассмотрим, как использовать CSS-анимации в JavaScript, а также основы работы с Canvas API для создания графики и анимаций.
Использование CSS-анимаций в JavaScript
CSS-анимации могут быть управляемы и инициированы с помощью JavaScript. Это позволяет создавать более сложные и интерактивные анимации, комбинируя возможности CSS и JavaScript.
Пример CSS-анимации, управляемой JavaScript
Рассмотрим пример, в котором анимация запускается при нажатии на кнопку.
// HTML
<style>
@keyframes slide {
from { left: 0; }
to { left: 100px; }
}
#animate {
position: relative;
width: 50px;
height: 50px;
background-color: red;
}
</style>
<div id="animate"></div>
<button id="startAnimation">Start Animation</button>
// JavaScript
document.getElementById('startAnimation').addEventListener('click', function() {
let element = document.getElementById('animate');
element.style.animation = 'slide 2s forwards';
});
// При нажатии на кнопку элемент будет анимирован
В этом примере при нажатии на кнопку элемент начинает анимацию перемещения с использованием CSS-анимаций, управляемых JavaScript.
Основы Canvas API
Canvas API предоставляет способ рисования графики на веб-странице. Canvas элемент представляет собой контейнер для графики, и с помощью JavaScript можно рисовать различные фигуры, изображения и анимации.
Пример рисования на Canvas
Рассмотрим простой пример рисования прямоугольника на Canvas.
// HTML
<canvas id="myCanvas" width="200" height="200" style="border:1px solid #000000;"></canvas>
// JavaScript
let canvas = document.getElementById('myCanvas');
let context = canvas.getContext('2d');
context.fillStyle = '#FF0000';
context.fillRect(50, 50, 100, 100);
// Красный прямоугольник будет нарисован на Canvas
В этом примере мы используем Canvas API для рисования красного прямоугольника на холсте.
Пример анимации на Canvas
Рассмотрим пример создания анимации перемещения круга по Canvas.
// HTML
<canvas id="myCanvas" width="400" height="400" style="border:1px solid #000000;"></canvas>
// JavaScript
let canvas = document.getElementById('myCanvas');
let context = canvas.getContext('2d');
let x = 50;
let y = 50;
let dx = 2;
let dy = 2;
function drawCircle() {
context.clearRect(0, 0, canvas.width, canvas.height);
context.beginPath();
context.arc(x, y, 20, 0, Math.PI * 2);
context.fillStyle = '#FF0000';
context.fill();
context.closePath();
x += dx;
y += dy;
if (x + dx > canvas.width - 20 || x + dx < 20) {
dx = -dx;
}
if (y + dy > canvas.height - 20 || y + dy < 20) {
dy = -dy;
}
requestAnimationFrame(drawCircle);
}
drawCircle();
// Красный круг будет перемещаться по Canvas
В этом примере создается анимация перемещения красного круга по холсту с использованием Canvas API.
Упражнения
Упражнение 1: Анимация элемента
Создайте HTML-документ с элементом <div id="box"></div> и кнопкой <button id="animateBox">Animate Box</button>. Используйте CSS-анимацию и JavaScript для перемещения элемента <div> вправо при нажатии на кнопку.
Решение:
// HTML
<style>
@keyframes moveRight {
from { left: 0; }
to { left: 200px; }
}
#box {
position: relative;
width: 50px;
height: 50px;
background-color: blue;
}
</style>
<div id="box"></div>
<button id="animateBox">Animate Box</button>
// JavaScript
document.getElementById('animateBox').addEventListener('click', function() {
let box = document.getElementById('box');
box.style.animation = 'moveRight 2s forwards';
});
// При нажатии на кнопку элемент переместится вправо
Объяснение: Мы создали HTML-документ с элементом <div> и кнопкой, добавили CSS-анимацию для перемещения элемента вправо и использовали JavaScript для запуска анимации при нажатии на кнопку.
Упражнение 2: Анимация круга на Canvas
Создайте HTML-документ с элементом <canvas id="circleCanvas" width="400" height="400"></canvas>. Используйте Canvas API для создания анимации перемещения круга по диагонали холста.
Решение:
// HTML
<canvas id="circleCanvas" width="400" height="400" style="border:1px solid #000000;"></canvas>
// JavaScript
let canvas = document.getElementById('circleCanvas');
let context = canvas.getContext('2d');
let x = 50;
let y = 50;
let dx = 3;
let dy = 3;
function drawCircle() {
context.clearRect(0, 0, canvas.width, canvas.height);
context.beginPath();
context.arc(x, y, 20, 0, Math.PI * 2);
context.fillStyle = 'blue';
context.fill();
context.closePath();
x += dx;
y += dy;
if (x + dx > canvas.width - 20 || x + dx < 20) {
dx = -dx;
}
if (y + dy > canvas.height - 20 || y + dy < 20) {
dy = -dy;
}
requestAnimationFrame(drawCircle);
}
drawCircle();
// Синий круг будет перемещаться по диагонали холста
Объяснение: Мы создали HTML-документ с элементом <canvas> и использовали Canvas API для создания анимации перемещения круга по диагонали холста.