Конференция завершена. Ждем вас на РИТ++ в следующий раз!
Купить доступ к видеозаписям
* Мы откроем публичный доступ к видеозаписям через ~6 месяцев после конференции

Lottie-web. Используем Adobe After Effects для анимации в webИнструменты

Доклад принят в программу конференции
Наталья Габитова
VisCom by Rambler Group

Ведущий креативный frontend-разработчик. В frontend больше 10 лет. Специализируется на специальных и промо-проектах.

Тезисы

Существует ряд библиотек, позволяющих анимировать SVG: Snap.svg, Paper.js, Velocity.js и другие. Но им не хватает наглядности. Это делает работу над сложной анимацией прерогативой опытных креативных разработчиков и дистанцирует их от дизайнеров.

Поэтому наша команда взяла на вооружение еще один инструмент для работы над векторной анимацией: Adobe After Effects. В сочетании с плагином Bodymovin он позволяет создавать анимацию в формате json и воспроизводить при помощи библиотек Lottie не только в браузере, но и в мобильных приложениях на разных платформах.

Я покажу, как быстро и просто сделать анимацию иконки, шторки или загрузчика. Вы узнаете, как использовать plugin и внедрять анимацию на сайт, как задавать стили элементов в CSS, какие преимущества и особенности работы с библиотекой имеются.

Я расскажу о нашем опыте использования plugin’а, с какими сложностями мы столкнулись во время сложного анимационного проекта и как преодолевали их.

Веб-графика, оптимизация изображений
,
WebRTC, WebGL и веб-медиа в целом
,
Совместная работа дизайнеров и верстальщиков

Другие доклады секции Инструменты