Создаем анимацию для PNG-картинки
В этой статье мы рассмотрим процесс создания анимации, на примере PNG-картинки. Для работы понадобится Adobe Photoshop и Adobe AfterEffects, а также сама картинка.
Приступим к реализации:
Открываем свою картинку в Photoshop-е и дублируем ее при помощи сочетания клавиш «Ctrl+J», выбираем инструмент лассо:
При помощи ранее выбранного инструмента выделяем первый глаз, затем с зажатой клавишей Shift выделяем второй (На этом этапе важно выделить только глаза, не задевая ничего лишнего):
Нажимаем правую кнопку мыши по любому из выделенных глаз и копируем их на новый слой:
Выключаем видимость у нового слоя:
Отдельно вырезаем ресницы, для этого дублируем слой с глазами и повторяем действия из предыдущих шагов. Не забываем удалить копию слоя:
Сохраняем результат в формате .psd:
Открываем Adobe AfterEffects и импортируем PSD с параметром «Composition»:
После переноса файла, перекидываем саму композицию на timeline и открываем ее двойным кликом:
*Выбираем инструмент, указанный на скриншоте:
Ставим точки на ресницах:
После этого пролистываем на пару кадров или секунд вперёд и тянем за каждую точку, при необходимости выравнивая:
Повторяем те же действия со вторым глазом. Во вкладке с эффектами находим эффект «Linear Wipe»/»Линейное стирание», переносим его на отрезок с глазами:
Вот примерные настройки, значения можно чуть-чуть изменить:
Создаем два значения, в самом начале устанавливаем ноль, а на карде с закрытыми глазами ставим Transition Completion на +/- 30%. Если стирание работает неправильно, то корректируем значения(Wipe Angle изменяем в зависимости от угла наклона персонажа, Feather служит для сглаживания краёв):
После этого копируем первый ключ «CTRL + C», создаем отступ длинной в столько же кадров сколько и до второго, и вставляем его «CTRL + V»:
Повторяем тоже самое и с кадрами на ресницах:
Копируем отрезки с глазами и ресницами сочетанием клавиш «CTRL + D» и перемещаем на пару кадров или секунд вправо, обрезаем отрезки снизу при помощи «Ctrl+Shift+D»:
Нажимаем на данную вкладку со своим названием:
Анимируем персонажа, для этого расставляем точки примерно как на скриншоте:
Повторяем все те же действия что делали после выбора инструмента(Пункт со *), только с самой верхней точки:
Вот пример того, что у Вас должно получиться:
Анимация png-спрайта по слайдам
Недавно применял на сайте интересную анимацию, выглядит она как гифка, но по факту это одна png-картинка разбитая не несколько слайдов, которые крутятся с заданными параметрами. Если быть совсем точным, то, они не крутятся, а переключаются. Почему не гифка, потому что в гифке есть проблемы с прозрачностью, и поэтому будем использовать png-картинку и обычное правило animation , подробнее здесь, но для нас важно будет свойство animation-timing-function и его функция steps()
.logo < background: url("http://denis-creative.com/wp-content/uploads/2018/10/meteor.png") 0 0 no-repeat; width: 130px; height: 130px; animation: logo 2s steps(47, end) infinite; >@keyframes logo < from to >
Главная особенность данной функции состоит в том, что вместо плавного движения от 0px к −6110px происходят резкие прыжки с паузами между ними. Это идеально подходит для анимации кадров в png-спрайте. Шаг анимации равен ширине картинки, в приведенном выше примере это 130px, всего 47 шагов, которые проходят 1 полный круг за 2 секунды.
Рабочий пример анимированной png-картинки:
Второй пример анимированного png-спрайта
В данном примере анимация проигрывается за 6 секунд и останавливается.
Чтобы просмотреть анимацию сначала — нажмите Rerun в нижнем правом углу окна Codepen.
Более подробно расписаны все составные свойства animation:
.planet
Что в сокращенном виде будет выглядеть так:
.planet
Плюс — в том, что можно задать прозрачный фон, чего нельзя задать для гифки,
а минус в том, что нужно подготовить спрайт с большим количествоми кадров, которые должны быть четко подогнаны друг под друга.
Столкнулся с проблемой редиректа в ModX. Стандартные варианты редиректа не работают. Нашел такое решение: Если…
Анимируем элементы на странице при прокрутке. В данном примере рассмотрим плавное появление элементов при скроле…
CSS правило @keyframes Создание CSS анимации начинается с объявления имени анимации в блоке @keyframes и…
Самый простой скролл вверх страницы HTML
Конвертер GIF в PNG
Сконвертируйте ваши gif-файлы в png онлайн и бесплатно
Выберите файлы
Выберите файлы
Перетащите файлы сюда. 100 MB максимальный размер файла или Регистрация
- Image
- Document
- Ebook
- Audio
- Archive
- Video
- Presentation
- Font
- Vector
- CAD
- Image
- Document
- Ebook
- Audio
- Archive
- Video
- Presentation
- Font
- Vector
- CAD
Формат для обмена изображениями
GIF ― это формат для обмена изображениями. Этот графический формат является весьма популярным. Он позволяет сохранить сжатые данные без потери качества в формате с не более чем 256 цветами. Формат GIF был разработан в 1987 году (GIF87a) компанией CompuServe для передачи растровых изображений через сети. В 1989 году в формат были внесены изменения (GIF89a) посредством добавления поддержки прозрачности и анимации.
больше информации
Портативная сетевая графика
PNG ― это формат хранения растровых графических данных, в котором для уменьшения размера используется алгоритм сжатия без потери качества. PNG был создан как бесплатный формат для замены GIF. PNG поддерживает три основных типа растровых изображений: изображение в оттенках серого, изображение с цветным индексом и цветное изображение. Формат PNG сохраняет графическую информацию в сжатой форме.
Анимированный PNG в Firefox, Opera и WebKit? Легко!
Однажды, от скуки, мне захотелось создать красивую полноцветную анимацию с 8-битной прозрачностью. Понятно, что GIF для этой цели никак не подходил и я стал искать альтернативы. Flash в этом качестве даже не рассматривался – слишком нагружает процессор, плохо встраивается в страницу поверх других элементов, да и стоит не у всех.
Сперва мой взгляд пал на MNG, родственника PNG. «Спецификация формата выпущена ещё в 2001 году, поэтому он наверняка реализован во всех современных браузерах!». И тут меня ждало первое разочарование. Формат оказался слишком сложным для реализации – реализация Mozilla, по их словам, содержала столько же строк кода, сколько все остальные форматы вместе взятые, за что и была удалена из их продуктов. Другие производители браузеров, похоже, даже не пытались внедрить у себя этот формат. Конечно, существует плагин для браузеров, поддерживающих плагины Netscape, но это ничем не лучше Flash. Отмечу лишь, что, возможно, формат слишком опередил свое время. Судя по описанию возможностей, это такой растровый SVG.
Дальше поиски привели меня к формату APNG. Формат прост, как два рубля: в файле записаны изменения в кадре от предыдущего с некоторыми мелкими нюансами. Но самое главное, что браузеры, не поддерживающие этот формат, отобразят статичную картинку. В целом, по возможностям формат схож с GIF. Он был предложен Mozilla как замена монструозному MNG. Проверяю в Firefox – все отлично работает. Opera – также. Открываю в Chrome и… получаю статичную картинку. Что произошло: Mozilla предложила включить APNG в спецификацию PNG. Путем голосования эта идея была отвергнута. И теперь часть браузеров поддерживает этот формат, а часть – нет.
Предо мной явственно предстала картина:
Mozilla: Ваш формат плохой, вы ничего не понимаете в анимированных PNG! Мы сделали свой, без шахмат и поэтесс. Включите его в спецификацию!
Группа разработчиков PNG: А вот вам!
Как это часто бывает, из-за людского самомнения мы уже десять лет имеем удовольствие пользоваться давно устаревшим GIF.
И тут меня посетила идея: вроде же в SVG можно вставлять растровые изображения?!
Если гора не идет к Магомету
Для экспериментов я одолжил картинку у Mozilla:
Разбиваем картинку на отдельные кадры: 
И так далее. Получилось 25 кадров.
Указываем размеры SVG, равные размеру самого большого кадра, и вставляем изображения. Порядок, кстати, не важен.
Дальше я было попытался просто накладывать последовательно кадры друг на друга, но не учел прозрачности и получил солнышко из уха лисы (этот же эффект можно пронаблюдать в IE9):
Эффект можно использовать для реализации одного из режимов APNG: отрисовка следующего кадра поверх предыдущего.
Теперь анимируем свойство прозрачности (opacity). Можно анимировать и координаты и сдвигать кадры за пределы видимости.
Тут проблема может проявиться в том, что прозрачность будет меняться плавно и появится шлейф или мерцание. Для этого мы указываем calcMode как «discrete».
Список опорных значений: values=«1;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0». Как видно, это первый кадр. Первое значение – 1 – изображение не прозрачно. На всех остальных кадрах – полностью прозрачно.
Продолжительность анимации (dur) выбираем так, чтобы при делении на число кадров получить время одного кадра. Если какой-то кадр должен находиться на экране вдвое большее время, список опорных значений придется удваивать, либо менять длительность одного значения, что несколько сложнее.
Теперь у нас остается лишь одно неудобство – анимация состоит из множества файлов. Эту проблему мы решим с помощью data:URL, встроив изображения прямо в SVG.
Размер исходного APNG: 613321 байт;
Размер SVG: 799692 байт;
Размер SVG, сжатого gzip: 601409 байт. Даже меньше исходного!
Кадры PNG были оптимизированы при помощи pngout.
Внимательный читатель мог заметить, что данная «тайная техника» не работает в IE. Могу посоветовать только отдавать ему другой код с GIF или Flash, ждать IE10 и готовить лопату.