Донецкий техникум промышленной автоматики

Экспорт анимации After Effects в HTML5

  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 году. Подпишитесь здесь ,

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

Похожие

Зачем мне магазин, если это Аллегро?
Вчера появилась информация, что Amazon готовится открыть сеть пунктов сбора в Великобритании. Представители крупнейшего в мире интернет-магазина быстро опровергли эти сообщения . В газете
Как читать XML-файл в Java (DOM Parser)
Сегодня мы научимся читать XML-файл на Java. Мы также узнаем, как анализировать XML-файл в Java для объекта с использованием DOM-анализатора. DOM XML Parser проще всего понять. Он загружает объект XML в память как Document, после чего вы можете легко перемещаться по различным элементам и узлам в объекте. Обход элементов и узлов не обязательно должен быть в порядке.
#deletefacebook или как толерантно расстаться с сетями
Надо признать - социальные сети занимают в нашей жизни так много времени, мы уже не можем наверняка сказать, это полезный инструмент, или вредная привычка. Поэтому если вы не хотите проводить свое свободное время в социальных сетях, или же вам не нравится, когда слишком много личной информации находится в интернете, то можете удалить учетные записи на некоторых площадках. Однако желание удалить свой аккаунт - это одно, а сделать это - совсем другое. Социальные сети зарабатывают деньги на
Не создавайте аккаунт YouTube Music Premium на своем iPhone
Подписка на новую услугу подписки на потоковую передачу музыки YouTube составляет 9,99 долл. США в месяц ... если вы не пользуетесь iTunes, где стоимость подписки увеличивается до 12,99 долл. США. Под вопросом: процент от 30% взят Apple, что не компенсируется Google. Пояснения.
Совет: как избавиться от плитки «Инвертировать цвета» с быстрой настройкой на вашем Moto X
Это может быть самый случайный из постов, но некоторые из вас заметили новую опцию «Инвертировать цвета» в выпадающем списке быстрых настроек Moto X (2-го поколения) в течение последнего дня мы хотели затронуть тему. Да, по какой-то причине многие из вас начали видеть кнопку вчера и задаются вопросом, почему она есть и как вы можете от нее избавиться. Хотя мы не знаем, почему он отображается случайным образом для пользователей,
Как перевести деньги за границу с лучшим обменным курсом и без комиссий
Если есть что-то, что я ненавижу, так это платить банкам комиссионные и помогать банкам зарабатывать миллиарды долларов с минимальной отдачей. Я всегда ищу способы снижения сборов, особенно когда речь идет о переводе денег за границу. Как перевести деньги за границу по лучшему курсу Банки полностью
Как проверить, защищен ли ваш компьютер или телефон от обвала и призрака?
Предупреждение. Даже если вы установили исправления из Центра обновления Windows, ваш компьютер может быть не полностью защищен от Обвал и Призрак Недостатки процессора. Вот как проверить, полностью ли вы защищены, и что делать, если нет.
MobileGo - самый простой способ поставить музыку на HTC 10, HTC U Ultra, HTC U play
Зачем размещать музыку на HTC 10, HTC HTC U Ultra U & play? Устройства Android сегодня имеют большую долю рынка мобильных телефонов, чем когда-либо прежде. Хотя Apple iPhone по-прежнему остается крупнейшим в мире доминирующим телефоном, нет никаких сомнений в том, что телефоны Android, например, сделанные с Samsung и HTC, работают поблизости. Хотя сегодня телефоны Android подходят к iPhone на всех уровнях, фактом является то, что многие все еще пытаются получить их
СЕУЛ (Рейтер) - главный финансовый регулятор Южной Кореи заявил Samsung BioLogics Co Ltd ( 207940.KS...
СЕУЛ (Рейтер) - главный финансовый регулятор Южной Кореи заявил Samsung BioLogics Co Ltd ( 207940.KS ) преднамеренно нарушил правила бухгалтерского учета в преддверии листинга в 2016 году, что привело к приостановке торговли акциями биотехнологической компании и пересмотру ее статуса листинга.
Как подключить ваш Android к интернету через ПК через USB
Люди часто «привязывают» свои компьютеры к своим смартфонам, отправляя сетевой трафик своего компьютера по сотовому каналу передачи данных устройства. «Обратный модем» - это наоборот - привязывает ваш смартфон или планшет Android к
Это лучшие антивирусные сканеры для Mac
Вирусные сканеры: это лучшие Антивирусный сканер предлагает дополнительную защиту для вас макинтош против вирусов, троянов и других вредоносных программ. Если вы ищете антивирусный пакет для пользователя Mac, вы можете выбрать из 15 или около того провайдеров. Какой самый лучший? Вы можете прочитать это в этой статье. В конце мы также обсудим, нужен ли вам такой антивирус на Mac.

Комментарии

Зачем тебе это делать?
Зачем тебе это делать? Ну, скажем, ваша компания использует G Suite в качестве службы каталогов. Разрешение только пользователям входить со своим организационным адресом электронной почты (G Suite) означает, что вам нужно только закупать пользователей в службе каталогов G Suite. Вам не нужно беспокоиться о поддержке отдельного хранилища пользователей для управления пользователями или о том, что люди из вашей организации могут войти в систему. В моем случае у меня есть домен jerriepelser.com,
Стоит ли использовать Википедию при написании статьи?
Стоит ли использовать Википедию при написании статьи? Как правило, вы не должны использовать Википедию в качестве источника для академического письма. Поскольку любой может внести свой вклад в статью, нет никакой гарантии, что информация будет точной, актуальной или оригинальной. В некоторых университетах действуют строгие правила использования Википедии. Вот что университет Мичигана должен
«Будет ли это взимать плату?
«Будет ли это взимать плату?» «Нет, мэм, это то, как вы избегаете сборов и почему мы так настроили». Ты чертовски великолепен. Помогая мне избежать оплаты банковских сборов. Я люблю тебя! Потому что, если я собирался перевести деньги со своего банковского счета в США на другой банковский счет в США, мой банк собирался взимать с меня плату. Ты можешь в это поверить? По крайней мере, в Австралии они этого не делают. Возможно, мне придется провести
Как я могу конвертировать и помещать музыку в HTC 10 со своего компьютера?
Как я могу конвертировать и помещать музыку в HTC 10 со своего компьютера? Следуйте приведенным ниже инструкциям, чтобы перенести музыку с компьютера на HTC 10. Шаг № 1: Откройте MobileGo на вашем компьютере. Нажмите «Музыка» в левой колонке. Шаг № 2:
Кроме как?
Кроме как? Эта конкретная ситуация действительно раскрывает процесс децентрализованной организации. Происхождение операции Facebook восходит к объявлению YouTube в типичном анонимном стиле, загруженному пользователем. FacebookOp 16 июля Это его единственное видео. В видео также упоминается аккаунт в Твиттере, посвященный проекту. Подвох? Ну, то Аккаунт
Представляете новые технологии стека, такие как микросервисы и контейнеры?
Представляете новые технологии стека, такие как микросервисы и контейнеры? Понял. Подход с одним агентом был разработан специально для гипер-динамических сред. Масштабируйте до 100 000 хостов, распределенных по всему миру. Обновление безболезненно. Все происходит автоматически - вам не нужно ничего делать. Другие инструменты APM ставят вас перед кошмаром ручного прикосновения к сотням различных компонентов.
Как вы находите функцию Kaspersky Safe Browser?
Как вы находите функцию Kaspersky Safe Browser? Дайте нам знать, используя функцию комментариев ниже. Мы с нетерпением ждем вашего комментария.
Новый модели iPad Pro (2018) каждый из них имеет порт USB-C в первый раз, но что это значит?
Но почему это помогает? Что делает «Force stop» и что такое кеш? Позволь мне объяснить. Force Stop В основе Android лежит ядро ​​Linux, компонент, отвечающий за управление памятью и процессами, а также целый ряд других ресурсов. Каждый раз, когда вы запускаете приложение, вы фактически запускаете процесс Linux. Процесс - это логический контейнер для программы (приложения). Он запускается ядром и используется для совместного использования системных ресурсов (включая
Нажмите «Как удалить свой аккаунт навсегда?
Нажмите «Как удалить свой аккаунт навсегда?». Здесь Facebook выведет на экран целую страницу довольно запутанного текста. Все что вам нужно - найти в тексте фразу «let us know», это и есть ключ к удалению вашего аккаунта в Facebook. Просто нажмите на ссылку, введите свой пароль и captcha-код в следующем окне позволит вам отправить запрос на удаление вашего аккаунта. Ключ
Как далеко они?
Как далеко они? Результаты могут быть возвращены в табличной форме, и пользователи имеют возможность «развернуть», чтобы раскрыть более подробную информацию об отдельных возвращенных элементах. Его гибкая функция «Поиск по области» позволяет пользователю определять область поиска по области поиска от руки, выбирать функцию, точку и буфер. Попробуйте онлайн-демонстратор Доложите об этом
Вы когда-нибудь замечали, как Netflix регулярно меняет изображения на обложках телевизионных шоу и фильмов?
Вы когда-нибудь замечали, как Netflix регулярно меняет изображения на обложках телевизионных шоу и фильмов? Есть причина для этого. Официальный Netflix Tech отмечает в блоге : Фактически, каждое изменение, которое рассматривает Netflix, проходит строгий A / B-тестирование, прежде чем становится пользовательским интерфейсом по умолчанию. Значительные

Зачем использовать Бодемовин?
Зачем использовать Бодемовин?
Думаешь, твои файлы хороши?
Выглядит потрясающе, верно?
Какой самый лучший?
Зачем тебе это делать?
Стоит ли использовать Википедию при написании статьи?
«Будет ли это взимать плату?
Ты можешь в это поверить?
Как я могу конвертировать и помещать музыку в HTC 10 со своего компьютера?