Спрайтова анімація активно використовується в комп'ютерній графіці та іграх. Суть її у тому, що на екрані змінюється не кадр (фрейм) повністю, а лише його маленький шматочок, де з'являються спрайти. Така техніка покадрової анімації не потребує високої продуктивності та досить проста у реалізації.
Анімація руху за допомогою CSS
Якщо говорити про реалізацію спрайтової анімації на CSS, то суть такої анімації полягає в наступному:
- Декілька зображень розташовуються в одному графічному файлі.
- Щоб розкласти цей графічний файл на кілька зображень, застосовується обмеження розміру зображення за розміром одного спрайту в атласі.
- Далі здійснюється зсув background-position, або самої картинки зі спрайтами.
Таким чином, один файл може забезпечити іконками весь сайт.
CSS-спрайти дуже заощаджують трафік і прискорюють завантаження сторінки. Адже браузеру доводиться використовувати менше файлів (замість декількох картинок, лише одну).
Готова анімація CSS
Наприклад, у нас є одна картинка Діда Мороза, що біжить, з 6-ма спрайтами. Давайте на її основі зробимо покадрову анімацію, щоб цей Дід мороз не просто ворушився (імітував біг), а ще й переміщався з лівого краю екрана до правого.
Код у такому разі буде досить простим.
Файл index.html
<!DOCTYPE html>
<html lang="ru">
<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>Анімація Спрайта з Дідом Морозом</title>
<link rel="stylesheet" href="/style.css">
</head>
<body>
<div class="sprite-container">
<div class="sprite-image"></div>
</div>
</body>
</html>Файл style.css
.sprite-container {
height: 100vh; /*100% висоти екрана*/
display: flex;
align-items: center; /*щоб картинка була по центру*/
}
.sprite-image {
height: 50px; /*висота спрайту (висота одного кадру)*/
width: 50px; /*ширина спрайту (ширина одного кадру)*/
background: url(img/walk-2.png) 0px 0px; /*картинка зі спрайтами з позицією у верхньому лівому куту (0px 0px)*/
animation: play 0.8s steps(6) infinite, /*анімація називається play, швидкість анімації 0.8s, потрібно зробити 6 кроків (6 кадрів), анімація відбувається безперервно (зациклено) - infinite*/
step 15s linear infinite; /*ще одна анімація, тривалістю 15s, лінійний, зациклений*/
position: absolute;
left: 0;
}
@keyframes play {
100% {
background-position: -285px; /*ширина картинки зі спрайтами*/
}
}
@keyframes step {
100% {
left: 100%; /*пересування вліво до самого кінця*/
}
}Щоб знайти спрайт, можна використовувати пошуковий запит sprite sheet. Просто введіть у полі пошуку цей запит, а потім перейдіть до "Картинки", щоб вибрати вже готові зображення для анімації.
Пригостити автора кавою