8 сентября 2015, 18:24

Небольшая заметка про работу с png (анимация с помощью css)

Краем уха слышу разговор:
— А можешь мне вот эти все кадры анимации из png сделать gif? Так меньше весить будет при верстке!
— Да конечно!

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

— Твои предложения?
Соберем из всех картинок анимации (т. е. кадров) спрайт, например через этот сервис. Я делаю его вертикальным и без отступов (можно и с ними, дальше в коде скажу где поправить).

— А дальше что?
Дальше надо сжать картинку, например тут. Где, разницы нет, нормальный сжиматель удалит лишнюю информацию из png и оставит только ту, что строит картинку. Качество не пострадает. Сжимать с потерей качества можно, но не стоит.

Дальше по коду:

  1. В html создаем div в нужном месте, например, с классом «film»
  2. Пишем в css следующие строки
.film {
    background: url('spritesheetmin.png');
    animation: play 2s steps(60) infinite;
    height: 100px;
    width: 100px;
    display: block;
}
@keyframes play { 
      0% { background-position:    0 0px; } 
    100% { background-position: 0 -6000px; }
}

steps — количество кадров
100% {ba... — смещение (размер в высоту * количество кадров), тут же добавляем отступ, если добавляли при создании спрайта.

На выходе получаем анимацию из png, принцип как у пленки в кино. Тут за 2 секунды, мы показываем все 60 кадров.

Еще немного интересного о png
Картинка весит меньше, если у нее по горизонтали больше одинаковых пикселей. Это потому, что png записывает для каждого пикселя отдельно цвет. Но если встречается, что подряд идут 10 одинаковых, он напишет диапазон «с 1 по 10 пиксель — черный», что значительно сокращает размер файла.

Плюсануть
Поделиться
Запинить