2 заметки с тегом

анимации

Краем уха слышу разговор:
— А можешь мне вот эти все кадры анимации из 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 пиксель — черный», что значительно сокращает размер файла.

6 февраля 2015, 14:36

Анимация в After Effects

Пост для тех, кто так же как и я давно хотел открыть AE и сделать что-то путёвое.

Твиттер «Я дизайнер» предложил задать вопросы всем дизайнерам и подумать над решениями проблем вместе. Я не могу удержаться, что бы не спросить давно интересующий меня вопрос:

Как делают эти крутые интерфейсные анимации в AE? Ну так, что бы для чайников и в короткие сроки научиться, что бы не читать огромные книги по азам AE, времени-то нет.

Получился не плохой список ресурсов с уроками:

@gn0me рекомендует:
https://www.youtube.com/user/mtmograph — Очень крутой канал, с него начал, все прекрасно понятно и круто!
https://vk.com/motiongraphics — сообщество моушен дизайнеров.

@gesterok:
https://news.layervault.com/stories/18840-resources-for-learning-ui-animation-with-after-effects — небольшой список ресурсов с обучением UI анимациям.

@fliptheweb:
http://robots.thoughtbot.com/accessible-after-effects — с этого стоит начать
http://www.schoolofmotion.com/30dae/ — 30 дневная школа

Спасибо всем кто ответил!