1. Зачем использовать Бодемовин?
2. Как подготовить файлы After Effects
3. Береги себя с масками
4. Rendering
5. Загрузите анимацию
6. Добавить взаимодействие
7. Это оно!

Анимация в сети здесь, чтобы остаться. Это во всем, от тонких движений, которые помогают нам Дизайн интерфейса к жизни, к полностью анимированным впечатлениям от 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. Выберите выбранную вами композицию, а затем выберите папку назначения внутри вашего веб-проекта. Когда вы счастливы, просто нажмите кнопку рендера и наблюдайте, как происходит волшебство. Когда это будет сделано, вы получите сообщение «готово». Поздравляем! Вы только что экспортировали файл JSON со всей информацией, необходимой игроку для воссоздания анимации.

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

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

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

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

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

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

Сначала создайте новый контейнер #anim_container для хранения вашей анимации. Вам также необходимо включить файл bodymovin.js перед закрывающим тегом body. Затем расскажите Bodymovin все о вашей анимации и загрузите ее в новый контейнер.

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

var container = document.getElementById ('anim_container'); // Настройка нашей анимации var animData = {container: container, renderer: 'svg', autoplay: true, loop: true, path: 'data.json'}; var anim = bodymovin.loadAnimation (animData);

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

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

<script src = "js / data.js"> </ script> <script> var container = document.getElementById ('anim_container'); // Настройка нашей анимации var animData = {container: container, renderer: 'svg', autoplay: true, loop: true, animationData: data}; var anim = bodymovin.loadAnimation (animData); </ Скрипт>

Обновите страницу, и ваша анимация должна воспроизводиться внутри контейнера. Выберите ваши инструменты разработки, и вы увидите, что каждый элемент в анимации теперь содержится в тегах <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 = {container: container, renderer: 'svg', autoplay: false, loop: true, path: 'data.json'}; var anim = bodymovin.loadAnimation (animData); // Когда анимация загружена, запускаем нашу функцию firstLoop anim.addEventListener ('DOMLoaded', firstLoop); // Создаем наши функции воспроизведения function firstLoop () {anim.playSegments ([0,20], true); }; function secondLoop () {anim.playSegments ([20,40], true); }; // Прослушивание события щелчка container.addEventListener ('click', function (event) {anim.addEventListener ('loopComplete', secondLoop);});

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

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

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

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

var container = document.getElementById ('anim_container'); // Настройка нашей анимации var animData = {container: container, renderer: 'svg', autoplay: false, loop: true, path: 'data.json'}; var anim = bodymovin.loadAnimation (animData); // Когда анимация загружена, запускаем нашу функцию firstLoop anim.addEventListener ('DOMLoaded', firstLoop); // Создаем наши функции воспроизведения function firstLoop () {anim.playSegments ([0,20], true); }; function transition () {anim.playSegments ([20,30], true); anim.removeEventListener ( 'loopComplete'); anim.addEventListener ('loopComplete', secondLoop); }; function secondLoop () {anim.playSegments ([30,100], true); anim.removeEventListener ( 'loopComplete'); }; // Прослушивание события щелчка container.addEventListener ('click', function (event) {anim.addEventListener ('loopComplete', transition);});

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

Это оно!

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

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

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

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

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

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

Прочитайте больше:

Похожие

Комментарии