Экспорт анимации эффектов в HTML5

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

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

• POS руководство по дизайну пользовательского интерфейса

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

Войти Bodymovin , новаторское расширение для Adobe After Effects, которые экспортируют анимацию непосредственно от последующих эффектов на JavaScript для отображения и манипулирования в браузере. Сделано Hernan Torrisi Бодимовин удаляет многие барьеры между аниматором и разработчиком. На своем базовом уровне плагин действует как Magical 'Render for Web' Adobe Adobe забыл. На самом продвижении он открывает новые возможности для интерактивной анимации.

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

Зачем использовать BodyMovin?

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

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

Чтобы дополнительно упростить процесс вашего веб-разработки, попробуйте Строитель сайта Отказ

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

Как подготовить ваши файлы после эффектов

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

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

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

Заботиться с масками

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

Рендеринг

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

Подумайте, что ваши файлы хороши, чтобы пойти? Откройте расширение BodyMovin через окно и GT; Расширения, а затем bodymovin.

После того, как вы нажмете обновление, вы увидите список всех композиций в этом проекте Effects. Выберите ваш выбранный комп, а затем выберите папку назначения внутри вашего веб-проекта. Когда вы счастливы, просто нажмите рендеринг и посмотрите, как происходит магия. Когда это сделано, вы получите «законченное» сообщение. Поздравляю! Вы только что экспортировали файл JSON со всей информацией о том, что игрок должен воссоздать анимацию.

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

Некоторые Phange Plugins Effects такие как резина теперь поддерживают BodyMovin. Резина использует направляющие слои и скрытые слои. Чтобы активировать их, просто нажмите на COG настроек рядом с выбранным вами композицией и отметьте необходимые вами функции.

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

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

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

Сначала сделайте новый контейнер #anim_container держать свою анимацию. Вам также необходимо включить bodymovin.js. Файл перед закрытием тега тела. Далее расскажите BodyMovin все о вашей анимации и загрузите его в новый контейнер.

Давайте пройдем через Setup Step за шагом:

 VAR Container = Document.GetElementById ('iniv_container');
// Настройка нашей анимации

var inivdata = {
Контейнер: контейнер,
Рендер: «SVG»,
Автозапись: правда,
Цикл: правда,
Путь: «data.json»
};
var inim = bodymovin.oldanimation (animdata); 

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

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

& lt; script src = "js / data.js" & gt; / lt; / script & gt;
& lt; скрипт & gt;
VAR Container = Document.GetelementById ('iniv_container');
// Настройка нашей анимации
var inivdata = {
Контейнер: контейнер,
Рендер: «SVG»,
Автозапись: правда,
Цикл: правда,
анимацияdata: данные
};
var inim = bodymovin.loadanimation (animdata);
& lt; / script & gt; 

Обновить страницу и ваша анимация должна воспроизводиться внутри контейнера. Выберите с вашими инструментами DEV, и вы увидите, что каждый элемент в анимации теперь содержится в & lt; G & GT; Теги и трансформируется в режиме реального времени.

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

Bodymovin имеет ряд мощных методов управления анимацией после нагрузки. Вызывая метод, как anim.pouse () или же anim.setdirection () позволит вам манипулировать воспроизведением по-разному. Давайте посмотрим на некоторые примеры:

• anim.setdirection (-1) будет играть в анимацию в обратном порядке
• anim.pouse () и anim.play () начнется и остановит анимацию
• anim.setspeed (0,5) будет играть в анимацию в половине скорости

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

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

Теперь вы хотите воспроизводить раздел A на петле (только после того, как пользовательские клики) Play и Loop Section B. Вы можете использовать свойство PlaySegments для разделения анимации. Этот метод займет два аргумента - массив с начальными и конечными значениями и второй логический isframe. Установка этого для True будет сообщить анимацию для чтения начальных и конечных значений в качестве кадров, тогда как false скажет ему, чтобы прочитать эти значения как раз.

 anim.pouse ();
anim.playsegments ([0,20], правда); 

Добавление этого рассказывает Bodymovin приостановить на первом кадре и воспроизводить только анимацию от 0 до 20 кадров. Как вы настроили свою анимацию с помощью Цикл: правда Свойство это продолжит воспроизведение раздела снова и снова.

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

 VAR Container = Document.GetElementById ('iniv_container');
// Настройка нашей анимации
var inivdata = {
Контейнер: контейнер,
Рендер: «SVG»,
Автозапись: false,
Цикл: правда,
Путь: «data.json»
};
var inim = bodymovin.loadanimation (animdata);
// Когда анимация загружена, запустите нашу функцию FirstLoop
anim.addeventListener («Domazed», FirstLoop);
// Создайте наши функции воспроизведения
Функция Firstloop () {
anim.playsegments ([0,20], правда);
};
Функция SecondLoop () {
anim.playsegments ([20,40], правда);
};
// слушаю событие щелчка
Container.AddeventListener («Click», функция (событие) {
anim.addeventListener ('loopcomplete', wiftleoop);
}); 

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

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

• фруктовый - Рамка от 0 до 20
• переход - Рамка от 20 до 30
• второстепенный - Рамка от 30 до 50

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

 VAR Container = Document.GetElementById ('iniv_container');
// Настройка нашей анимации
var inivdata = {
Контейнер: контейнер,
Рендер: «SVG»,
Автозапись: false,
Цикл: правда,
Путь: «Data.json»
};
var inim = bodymovin.loadanimation (animdata);
// Когда анимация загружена, запустите нашу функцию FirstLoop
anim.addeventListener («Domazed», FirstLoop);
// Создайте наши функции воспроизведения
Функция Firstloop () {
anim.playsegments ([0,20], истинный);
};
Функциональный переход () {
anim.playSegments ([20,30], правда);
anim.removeeventListener ('loopcomplete');
anim.addeventListener ('loopcomplete', wiftleoop);
};
Функция SecondLoop () {
anim.playsegments ([30.100], правда);
anim.removeeventListener ('loopcomplete');
};
// слушаю событие щелчка
Container.AddeventListener («Click», функция (событие) {
anim.addeventListener ('Loopcomplete', переход);
}); 

Нажмите, вы используете LoopComplete Слушатель ждать, пока вы не достигнете последнего кадра петлей, затем запустите свой переход() функция. Здесь вы удаляете последний слушатель, играйте на следующий набор кадров, а затем сделайте то же самое снова. После завершения перехода это позвонит SecondLoop () Отказ

Вот и все!

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

Надеемся, что этот учебник дал вам представление о различных видах способов, которыми вы можете объединить использование после эффектов и BodyMovin, чтобы произвести некоторую анимацию Supercool для Интернета!

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

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

Получил много файлов для резервного копирования? Проверьте наш облачное хранилище выбирает.

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

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

• Создание и анимированные полигоны SVG
• 14 Удивительный Adobe. После эффектов плагинов
• Создание раскаревов для веб-анимаций