Bodymovin json можно создавать и экспортировать из after effects с помощью bodymovin

Обновлено: 05.07.2024

Всем привет, меня зовут Артем Сафаров, я — дизайнер из веб-студии Pyrobyte. Мы используем Lottie-анимации на проектах студии, эта технология нам очень нравится, поэтому сегодня и вас с ней познакомим :)

Lottie — это библиотека для веб-разработки, iOS, Android и React Native, которая отображает анимацию After Effects в режиме реального времени, позволяя сайтам и приложениям использовать анимацию так же легко, как и статическое изображение. Создателями этой библиотеки являются инженеры из компании Airbnb.

В прошлом создание сложных анимаций для приложений на Android, iOS и React Native было трудным и длительным процессом. Приходилось либо добавлять объемные файлы изображений для каждого размера экрана, либо писать тысячу строк хрупкого и сложного в поддержке кода. Из-за этого в большинстве сайтов и приложений не использовалась анимация, несмотря на то, что это — мощный инструмент для улучшения пользовательского опыта.

Эта библиотека использует анимации, экспортированные в виде файлов JSON из After Effects путем кодирования в данный формат плагином Bodymovin. Расширение подключается на сайт с проигрывателем JavaScript, который позволяет отображать анимацию в вебе.

Как обычно реализовываются анимации в приложениях и сайтах

GIF. Распространенный формат, но имеет довольно много ограничений, связанных с потерей качества и большим весом.
AVI, mp4. Большой вес финальных файлов, нет возможности экспортировать видео с прозрачным фоном.
Анимированные вручную разработчиком html-элементы. Трудоемкий процесс в разработке, который влечет за собой большое количество правок от дизайнера. К тому же разработчик ограничен в реализации анимации из-за трудностей с контролированием скорости движения анимированного элемента, они выглядят неестественно, так как перемещаются в пространстве с линейной скоростью.

Из-за таких ограничений приходится жертвовать либо качеством анимации, либо временем для её оптимизации. В подобной ситуации на помощь и приходит Lottie.

Благодаря возможностям, которые предоставляет Lottie-анимация, неудивительно, что данную технологию используют такие известные компании как: Google, Elevate, eero, The New York Times, Instacart, Uber, Walgreens, iHeartRadio, Сбербанк, Telegram.

Область применения Lottie-анимации на сайтах и приложениях имеет большой охват — от анимированных иллюстраций, как у Google и Elevate

до анимированных UI-эффектов и статичных логотипов как у The New York Times.

Последние в своем приложении используют Lottie для статичного логотипа темной и светлой темы, раньше им приходилось создавать 2 отдельных логотипа — белый и черный. Благодаря Lottie приложение автоматически меняет цвет логотипа в зависимости от выбранной темы на противоположный.

Используя Lottie, дизайнер может не только спроектировать и отрисовать навигацию для мобильного приложения, но и реализовать приятную визуальную обратную связь при переходе в другой раздел меню.

Анимированная кнопка «гамбургер» усиливает ощущение прямой манипуляции и делает переход к новому состоянию более очевидным для пользователей.

Очень важно держать пользователя в курсе состояния системы — чтобы было понятно, что происходит. Когда пользователь выполняет какое-либо действие и не получает никакой обратной связи, есть вероятность, что он будет раздражен таким безразличием к себе и покинет этот сайт или приложение. Продуманная анимация поможет удержать внимание пользователя в моменты загрузки открывающейся страницы.

Хорошо продуманные анимированные UI-эффекты для кнопки «лайк». Подобные анимации служат для того, чтобы взаимодействие с продуктом стало более увлекательным и приятным.

Telegram используют данную технологию для анимированных стикерпаков, так как Lottie позволяет получить высококачественную анимацию без потери качества весом в несколько килобайт. А еще мы создали свой стикерпак, который ждет, чтобы вы его добавили к себе в коллекцию: )

Чтобы вам не запутаться при установке плагина Bodymovin, мы разбили процесс на несколько шагов:

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

О реализации веб-анимации

В Интернете существует множество форм анимации. Вы можете использовать CSS-анимацию, Canvas или использовать JS для управления свойствами CSS для создания анимации. Мы часто используем CSS для создания относительно простых анимаций, таких как чрезмерная анимация и анимация загрузки. Для некоторых более сложных анимаций она может быть преобразована в gif или Canvas. Степень детализации управления при использовании Canvas может быть очень высокой, а рабочая нагрузка относительно относительно. Большой. Существуют и другие способы создания анимации, то есть использование программного обеспечения для работы с видео, например After Effect (AE) / Flash / Premiere (Pr) / VideoStudio.Такой метод создания визуальных изображений проще и проще, чем писать код напрямую. естественный. Сама анимация должна создаваться с помощью инструментов, но анимация, созданная с помощью этого вида программного обеспечения для видео, в конечном итоге создает видеофайлы и, как правило, имеют большой размер, и нет возможности напрямую перенести их в Интернет. Однако хорошей новостью является то, что теперь мы можем использовать AE для анимации, а затем использовать плагин bodymovin для экспорта в файлы html для воспроизведения.

О реализации анимации в мобильном приложении

Использование Gif, безусловно, осуществимо, но использование Gif занимает много места и должно быть адаптировано для различных размеров и разрешений экрана. Поскольку Android не предоставляет встроенную поддержку Gif API, это решение также будет иметь совместимость. Сексуальные проблемы

При использовании покадровой анимации этот метод не так хорош, как использование Gif. Вообще говоря, использование покадровой анимации занимает намного больше места, чем Gif, и его также необходимо адаптировать к нескольким разрешениям экрана, но при этом не возникает проблем совместимости;

Использование видео, конечно, возможно, но в целом видео используются только для рекламных фильмов, а общая анимация далеко не реализована с помощью видео.Это немного излишне и все же занимает много места.

После Android 5.x предоставляется поддержка SVG. Комбинация VectorDrawable и AnimatedVectorDrawable позволяет реализовать несколько немного сложных анимаций. Совместимость - проблема, но весь процесс реализации очень сложен. Каждый раз, когда внедряется новая анимация, приходится начинать заново. , Самым важным является то, что если в приложении компании iOS должен реализовываться такой же набор анимаций, использование ресурсов становится слишком большим.

Бодимовин реализует анимацию

Используйте программное обеспечение Adobe After Effects для создания анимации. Используйте плагин Bodymovin AE для экспорта анимации в файлы json. Bodymovin - это интерфейсный проигрыватель для этого файла json анимации, который поддерживает три формата svg \ canvas \ html. Он может не только воспроизводить анимацию, но и полностью управлять воспроизведением анимации, паузой, скоростью, воспроизведением соответствующего кадра и т. Д. Вы даже можете изменить положение объекта рамки.

Как использовать Бодимовин

Официальное руководство:Я указываю
Руководство по переводу:Я указываю

каштан

Вы можете загрузить проект напрямую, использовать AE для самостоятельного создания анимации и заменить соответствующее местоположение проекта после создания файлов data.json и изображений для запуска.

Примечание. Здесь нужно пояснить один момент. Файл json bodymovin можно запустить в Chrome только при наличии серверной среды, в противном случае будет сообщено об ошибке. Использование сафари для локального предварительного просмотра не представляет проблем. По оценкам, это проблема протокола браузера.

Использование bodymovin для реализации анимации теперь является очень удобным методом, особенно при выполнении некоторых сложных анимаций, дизайн и реализация могут быть полностью разделены. Дизайнеры делают акцент на производстве анимации, разработчикам нужно только позвонить. Однако есть и недостатки. Дизайнерам необходимо сначала создать материалы векторной анимации с помощью AI, а затем щелкнуть правой кнопкой мыши слой AI, импортированный в AE> создать форму из векторного слоя. Но также есть много ситуаций, когда вам нужно использовать AE для перерисовки векторной графики. Я лично считаю, что рисование AE действительно утомительно (в конце концов, это не профессиональная программа для рисования), поэтому я предпочитаю проектировать напрямую с помощью эскиза или ps, а затем напрямую выводить вырезанное изображение, а затем в AE Сделайте анимацию. Этот недостаток также очевиден, слишком большой фотоматериал.

Я также видел, что многие сторонние анимационные приложения могут напрямую генерировать код и могут легко стыковаться со Sketch, напрямую импортировать файлы эскизов, но недостатки также очевидны, не подходят для разработки нескольких платформ, функций создания анимации Очевидно, не такой мощный, как Adobe AE. Но он по-прежнему очень полезен для интерактивной анимации. Такие как главный🌚.

Анимация в сети здесь, чтобы остаться. Это во всем, от тонких движений, которые помогают нам Дизайн интерфейса к жизни, к полностью анимированным впечатлениям от Canvas и экспериментам WebGL, которые бросают вызов тому, что мы когда-то считали возможным в браузере.

В то время как творческие способности разработчиков и возможности браузеров растут, анимация в Интернете долгое время плохо относилась к видео - к этому сообщество анимационной графики с осторожностью подходило годами.

Разработчики полагались на библиотеки, такие как GreenSock и Snap.svg, чтобы сделать тяжелую работу по воспроизведению анимации через JavaScript. Хотя эти инструменты обладают большой гибкостью, они не могут сравниться с точностью и тонкостью анимации, которую можно достичь с помощью After Effects CC Хронология и смягчение графиков. С веб-точки зрения After Effects очень хорошо подходит для настройки и опробования движения перед его фиксацией в коде.

Бодемовин: волшебная функция «Рендеринг для веб» Adobe забыл [все изображения: Hungry Sandwich Club]

Войти Bodymovin революционное расширение для Adobe After Effects, которое экспортирует анимацию непосредственно из After Effects в JavaScript для отображения и управления в браузере. Создано Эрнан Торриси Бодемовин устраняет многие барьеры между аниматором и разработчиком. На своем базовом уровне плагин действует как волшебная функция «рендеринга для веб», которую Adobe забыл. В его самом продвинутом это открывает новые возможности для интерактивной мультипликации.

Bodymovin - это связующее звено в цепочке инструментов, плагинов и систем, растущих для удовлетворения некоторых из этих новых возможностей. Airbnb's Lottie а также Ключевые кадры Facebook оба опираются на эти основы - и, наконец, они предлагают самый мощный инструмент анимации в сети.

Зачем использовать Бодемовин?

SVG завладел интернетом и принес с собой ожидание того, что все должно быть качественным, легким и масштабируемым. Бодемовин переводит все в вашей композиции в великолепно четкий SVG, который сохраняет свое векторное качество в любом размере. Больше никаких компромиссов, чтобы облегчить этот GIF или заставлять пользователей загружать раздутые видеофайлы.

Помимо упрощения процесса экспорта ваших анимаций, Bodymovin открывает перед разработчиками гораздо больше возможностей для творчества с помощью новых интерактивных возможностей. Посетите CodePen, чтобы узнать о некоторых фантастических способах использования расширения - от интерактивных оснасток IK до интерактивного текста с анимацией по мере ввода текста.

Все отрисовано в дружественном к сети SVG, и четком, и легком

Экспортированной анимацией можно управлять в браузере, как и любым другим элементом, что позволяет нам рассматривать анимацию как интерактивный и экспериментальный инструмент в веб-дизайне. А теперь, благодаря Бодимовину, показ ваших анимаций в Интернете стал еще проще. В этом руководстве вы узнаете, как экспортировать анимацию из After Effects и создать простую циклическую анимацию, которая реагирует на щелчки пользователя.

Как подготовить файлы After Effects

Поддержка функций After Effects значительно улучшилась, и вы можете ожидать, что получите довольно хорошие результаты прямо из коробки. Тем не менее, ваши модные летающие 3D-слои не будут играть хорошо, поэтому имейте в виду ограничения, прежде чем начать. Прежде чем начать проект, всегда загружайте последнюю версию Bodymovin и проверяйте страницу GitHub, чтобы увидеть, какие функции в настоящее время поддерживаются.

Не спешите переходить к забавной части… аккуратные файлы создают аккуратный ум. В этом случае они также помогут убрать часть дополнительной работы из браузера и дать вам плавное плавное воспроизведение. Во-первых, вы хотите убедиться, что ваш контент находится в слоях формы After Effects для полной мощности вектора. Чтобы преобразовать любой файл Illustrator в слои фигур, вы можете просто щелкнуть правой кнопкой мыши и выбрать «Создать фигуры из векторного слоя». Любые слои, которые не являются фигурами на этом этапе, будут преобразованы в изображения, и они не будут отображаться как векторы.

Затем проверьте ваши слои и подслои; есть хороший шанс, что вы можете упростить содержимое фигуры, не жертвуя чем-либо. Постарайтесь сократить количество групп, путей и заливок только до самого необходимого.

Береги себя с масками

Маски - это простой способ ускользнуть на этом этапе. Имейте в виду, что альфа-маски будут работать с рендерером SVG, но не будут отображаться, если вы решите переключиться на Canvas. Маски могут быть дорогими по производительности, поэтому используйте их эффективно.

Rendering

Bodymovin состоит из двух частей - расширения After Effects, которое преобразует данные анимации в файл JSON, и проигрывателя Bodymovin.js для включения в вашу веб-страницу, которая может интерпретировать этот файл и отображать его в браузере.

Думаешь, твои файлы хороши? Откройте расширение Bodymovin через Окно> Расширения, а затем Bodymovin.

Проверьте свои слои - это может быть неподдерживаемая функция или выражение, используемое в After Effects

Чтобы проверить только что экспортированную анимацию, нажмите «Просмотр»> «Текущие отрисовки» и не забудьте прокрутить временную шкалу, так как вы можете заметить что-то, что выглядит немного иначе, чем вы ожидаете. Если вы обнаружите какие-либо проблемы, вернитесь назад и проверьте свои слои - это может быть неподдерживаемая функция или выражение, используемое в After Effects.

Некоторые плагины After Effects, такие как Rubberhose, теперь поддерживают Bodymovin. Rubberhose использует направляющие слои и скрытые слои. Чтобы активировать их, просто нажмите на значок настройки рядом с выбранной композицией и отметьте нужные функции.

Если все выглядит хорошо, есть еще одна вещь, которую вам нужно сделать, прежде чем оставить After Effects позади. На этом этапе у вас должен быть свежий файл data.json, описывающий вашу анимацию, но нет плеера Bodymovin, который бы ее интерпретировал. В расширении нажмите кнопку «Get the player» в правом верхнем углу и сохраните ее с файлом JSON.

Загрузите анимацию

Теперь у вас есть все, что вам нужно, давайте перейдем прямо к коду и изложим основы, чтобы ваша анимация отображалась на странице.

Давайте пройдемся по настройке шаг за шагом:

var container = document.getElementById ('anim_container'); // Настройка нашей анимации var animData = ; var anim = bodymovin.loadAnimation (animData);

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

Свойство path сообщает проигрывателю Bodymovin, где найти файл данных JSON для анимации. Из-за политики совместного использования ресурсов (CORS), метод, который вы будете использовать для доступа к файлу JSON, будет работать, только если вы находитесь на сервере или локальном сервере. Чтобы работать локально, вы можете превратить этот data.json в файл JavaScript, который присваивает объект переменной. В этом случае ваша установка может выглядеть так:

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

Выглядит потрясающе, верно? Теперь у вас должна быть красивая, четкая анимация, отображаемая в браузере (без видимого убогого тега видео…). Анимация всегда будет масштабироваться так, чтобы соответствовать ее контейнеру, так что дерзайте!

У Bodymovin есть ряд мощных методов управления анимацией после ее загрузки. Вызов метода, такого как anim.pause () или anim.setDirection () , позволит вам управлять воспроизведением различными способами. Давайте посмотрим на некоторые примеры:

anim.setDirection (-1) будет воспроизводить анимацию в обратном порядке.
anim.pause () и anim.play () запустят и остановят анимацию
anim.setSpeed (0.5) будет воспроизводить анимацию с половинной скоростью

Добавить взаимодействие

На следующем шаге вы изучите несколько различных способов добавления взаимодействия к вашей анимации через JavaScript. В этом примере мы экспортируем анимацию After Effects с двумя секциями: секция A и секция B. Секция A использует кадры от одного до 20 (треугольник держит свою ручку-пого), секция B использует кадры от 20 до 40 (треугольник прыгает вверх и вниз на пого палку).

Теперь вы хотите воспроизвести раздел a в цикле, а затем (только после щелчка пользователем) воспроизвести и воспроизвести цикл B. Вы можете использовать свойство playSegments, чтобы разделить анимацию таким образом. Этот метод будет принимать два аргумента - массив с начальными и конечными значениями и вторым логическим значением - isFrame. Если для этого параметра установлено значение true, анимация будет считывать начальные и конечные значения в виде кадров, а значение false - для чтения этих значений как времени.

anim.pause (); anim.playSegments ([0,20], true);

Добавив это, Бодимовин должен остановиться на первом кадре и воспроизвести только анимацию от 0 до 20 кадров. Когда вы настроите анимацию с помощью свойства loop: true, она продолжит воспроизводить раздел A снова и снова.

Давайте настроим весь пример. В этом примере вы будете использовать два сегмента анимации, поэтому создадите две функции:

var container = document.getElementById ('anim_container'); // Настройка нашей анимации var animData = ; var anim = bodymovin.loadAnimation (animData); // Когда анимация загружена, запускаем нашу функцию firstLoop anim.addEventListener ('DOMLoaded', firstLoop); // Создаем наши функции воспроизведения function firstLoop () ; function secondLoop () ; // Прослушивание события щелчка container.addEventListener ('click', function (event) );

Путь! Теперь ваша анимация будет повторяться до тех пор, пока пользователь не нажмет на нее, а затем начнется второй цикл. Единственная проблема сейчас в том, что такой скачок очень резкий и может нарушить плавность анимации.

Идеальная ситуация - включить в анимацию третий раздел, переходящий от удержания пого-палки к прыжкам на нем. Теперь ваша структура будет выглядеть примерно так:

firstLoop - кадр от 0 до 20
переход - кадр с 20 по 30
secondLoop - кадр от 30 до 50

Мы хотим, чтобы ваша анимация оставалась в первом цикле, пока она не будет нажата. В этот момент вам захочется дождаться окончания цикла, в котором вы сейчас находитесь, и перейти к переходу. После завершения перехода перейдите ко второму циклу. Это звучит сложно, но оставайтесь со мной! Вот ваш код в полном объеме:

var container = document.getElementById ('anim_container'); // Настройка нашей анимации var animData = ; var anim = bodymovin.loadAnimation (animData); // Когда анимация загружена, запускаем нашу функцию firstLoop anim.addEventListener ('DOMLoaded', firstLoop); // Создаем наши функции воспроизведения function firstLoop () ; function transition () ; function secondLoop () ; // Прослушивание события щелчка container.addEventListener ('click', function (event) );

При щелчке вы используете прослушиватель loopComplete, чтобы дождаться достижения последнего кадра цикла, а затем запустите свою функцию transition () . Здесь вы удаляете последнего слушателя, воспроизводите следующий набор кадров, а затем делаете то же самое снова. После завершения перехода он вызовет secondLoop () .

Это оно!

Вы работали с некоторыми из функций Bodymovin сегодня, но если вы заинтересованы в получении дополнительной информации о плагине, вы можете найти множество информации о Бодемовин GitHub стр. Дополнительные примеры можно найти во впечатляющей коллекции Bodymovin CodePen.

Надеемся, что этот урок даст вам представление о различных способах комбинирования использования After Effects и Bodymovin для создания анимации супер-охлаждения для Интернета!

Отдельный раздел для каждой части анимации

Теперь вы можете настроить анимацию для экспорта в Интернет, перенести экспортированные файлы в браузер и сделать анимацию реагирующей на нажатия. Подумайте не только о файлах MP4, которые вы ранее использовали, и обращайтесь к Bodymovin за созданием в будущем более богатых веб-приложений.

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

Эта статья изначально появилась в чистый журнал в 2017 году. Подпишитесь здесь ,

В 2017 году инженеры Airbnb увидели потенциал анимации на основе JSON и вместе с лидером анимации создали библиотеки IOS и Android, которые смогли бы отображать файлы JSON, которые назвали «Lottie». Вы можете прочитать больше об истории здесь. Разработчики в Airbnb оставили исходный код открытым и создали сообщество GitHub для общения с дизайнерами и инженерами.

LottieFiles — это независимая платформа от Airbnb, на которой дизайнеры могут загружать, тестировать, покупать и выгружать анимации.

Airbnb также являются создателями плагина LottieFiles для After Effects, который работает аналогично Bodymoving и позволяет нам просматривать анимацию, загружать её на платформу LottieFiles, сохранять на компьютере и т. д.

Приступим к работе

Для начала необходимо установить плагин, вы можете использовать Bodymovin или LottieFile.

Я создал для своего логотипа простую анимацию, которая будет отображаться в верхнем меню веб-сайта. Это дрон с вращающимися лопастями, поэтому я импортировал в слои файлы Illustrator, сделал спиральные 3D-слои и повернул их.

Будьте внимательны, не все эффекты поддерживаются этими форматами файлов. На сегодняшний день 3D-слои не поддерживаются. Поэтому, прежде чем делать анимацию, стоит проверить поддержку.

Следует заострить внимание

Создание анимации для Интернета — это не то же самое, что и создание традиционного видео. Мы должны принять во внимание несколько параметров настройки и форматирования, о которых нам никогда раньше не приходилось думать.

Файлы JSON должны быть как можно более компактными для мобильных продуктов;
Используйте свои навыки After Effect, чтобы избежать лишних ключевых кадров, например, путем родительских функций вместо добавления ключевого кадра на каждом слое;
Избегайте использования ключевых кадров пути, поскольку они создают очень большой документ из преобразования всей вершины из пути;
Лучше всего избегать покачивания, автоматической трассировки и аналогичных методов, которые создают большое количество ключевых кадров. Создание такого большого файла может сделать файл JSON очень большим и негативно повлиять на производительность;
Преобразуйте любой слой Illustrator, EPS, SVG или PDF для формирования слоёв в After Effects, в противном случае это приведёт к ошибке;
Экспорт в 1X при экспорте файла каждый пиксель на иллюстрации будет переведён в точки для IOS и DPS для Android; Вот набор метрик устройств в DPS, которые Google собрал вместе;
Lottie пока не поддерживает выражения или эффекты;
Режимы наложения, а конкретно: «Умножение», «Экран» или «Добавить» пока не поддерживаются, а также не отображаются с помощью Luma;
Стили слоёв (тень, наложение, обводка. ) пока не поддерживаются; Нули могут быть использованы, но для их работы необходимо включить видимость и изменить непрозрачность до 0%.

Зная все нюансы, приступим к работе

Импортируйте слои, откройте композицию, выберите все слои, щелкните правой кнопкой мыши и выберите: Создать / создать фигуру из векторных слоёв.

Это создаст векторные слои, которые не доставят нам хлопот при экспорте в Lottie.

Нам нужно удалить AI-файлы и работать только с векторными слоями.

Я хотел анимировать лопасти в 3D, но поскольку они не поддерживаются, мне пришлось делать это «традиционным способом» и поэтому я симулировал вращение, анимируя размер в X (ширина).

После того, как воссоздать нужную скорость, я создал нулевой объект, чтобы переместить весь логотип и заставить его «взлетать» и «приземляться». При этом используя векторы в положении, чтобы сделать движение более плавным.

Как мы читали ранее, нулевые объекты должны быть превращены в видимые и иметь 0% прозрачности, чтобы работать.

После того, как у меня появилась анимация, я захотел открыть расширение Lottie.

Откроется окно, где вы можете просмотреть анимацию, загрузить её в Lottie-файлы и сохранить на своем компьютере. Для этого вам уже нужно иметь аккаунт в LottieFiles.

Этот способ создания анимации для веб-сайтов действительно интересен, поскольку он сохраняет отличное качество и прост в реализации.

Читайте также: