Спрайтовая анимация активно используется в компьютерной графике и играх. Суть её в том, что на экране сменяется не кадр (фрейм) целиком, а только его маленький кусочек, где появляются спрайты. Такая техника покадровой анимации не требует высокой производительности и достаточно проста в реализации.
Анимация движения с помощью CSS
Если говорить о реализации спрайтовой анимации на CSS, то суть такой анимации заключается в следующем:
- Несколько изображений располагаются в одном графическом файле.
- Чтобы разложить этот графический файл на несколько изображений, применяется ограничение размеров изображения по размеру одного спрайта в атласе.
- Далее осуществляется сдвиг background-position, или самой картинки со спрайтами.
Таким образом, один файл может обеспечить иконками весь сайт.
CSS-спрайты очень экономят трафик и ускоряют загрузку страницы. Ведь браузеру приходится запрашивать меньше файлов (вместо нескольких картинок, всего лишь одну).
Готовая анимация CSS
Например, у нас есть одна картинка бегущего Деда Мороза с 6-ю спрайтами. Давайте на её основе сделаем покадровою анимацию, чтобы этот Дед мороз не просто шевелился (имитировал бег), а ещё и перемещался с левого края экрана до правого.
Пример анимации спрайта на CSS
Код в таком случае будет достаточно простым.
Файл 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>Анимация Спрайта c Дедом Морозом</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. Просто введите в поле поиска этот запрос, а затем перейдите в раздел "Картинки", чтобы выбрать уже готовые изображения для анимации.
Угостить автора чашечкой кофе