Убийца Бодимовин и Лотти: преобразование анимации AE в нативную анимацию HTML5/Android/iOS

внешний интерфейс Android iOS анимация

(Впервые здесь эта статья основана на статье, которую я разместил на Zhihu в апреле. Ссылки:zhuanlan.zhihu.com/p/26304609)


Некоторое время назад я услышал от начальника отдела, что Airbnb выпустила мобильную библиотеку анимации Lottie, которую можно комбинировать с плагином AE под названием Bodymovin для экспорта анимаций, сделанных на AE, в виде файлов json, а затем использовать Android/ Нативные анимации iOS. Форма отображается для воспроизведения на мобильных устройствах. АЭ (Adobe После Effects) — эксперт в области спецэффектов для постпродакшна видео и производства анимации, с его помощью была сделана анимация MG, которая некоторое время назад заполонила поле зрения. Если это удастся реализовать, это значительно облегчит дизайн фронтенд-анимации.

Позже, 8 апреля, я посетил 2-ю китайскую конференцию разработчиков интерфейсов (FDCon2017) и как новичок отдал дань уважения всем большим парням. Так совпало, что Даниэль Жухун из Али также упомянул Лотти и Бодимовина, когда выступал с программной речью. Темой Чжу Сюня был «правильный способ открыть взаимодействие с H5», и его речь была очень захватывающей. Чего же вы ждете, я начал заниматься после прослушивания конференции.

(Изображение выше — это страница PPT, когда Чжу Сюнь говорил о Лотти на FDCon2017)


После небольшого эксперимента я, вероятно, понял, как использовать Bodymovin. Этот подключаемый модуль AE может экспортировать композицию (композицию, похожую на последовательность клипов в Pr), созданную в AE, в файл json с информацией о векторной анимации и может воспроизводиться на следующих платформах:

  • Веб-страницы в формате svg/canvas/html+js. Bodymovin предоставляет собственную библиотеку js в качестве проигрывателя - bodymovin.js;
  • Родной Android, через проект Airbnb с открытым исходным кодом»lottie-android"выполнить;
  • Нативно для iOS, через проект Airbnb с открытым исходным кодом».lottie-ios"выполнить;
  • React Native через проект Airbnb с открытым исходным кодом».lottie-react-native"выполнить.


Ниже приводится пошаговое описание установки и использования Bodymovin, а также того, как экспортированная анимация воспроизводится на веб-странице.


1. Если на компьютере нет AE, нужно установить AE CC2014 или более позднюю версию. Возьмите AE CC2017 в качестве примера:


(Экран приветствия AE CC2017)


2. После завершения установки AE установите плагин Bodymovin.

Существует несколько способов установки подключаемого модуля, например загрузка непосредственно из центра подключаемых модулей Adobe (ссылка:Adobe Add-ons, как правило, не последняя версия), вы также можете перейти на домашнюю страницу GitHub Bodymovin, чтобы загрузить и установить последнюю версию подключаемого модуля. Я рекомендую второй метод, этапы этого метода следующие:

2.1 Перейдите на домашнюю страницу GitHub Bodymovin (ссылка:bodymovin/bodymovin) клонируйте проект локально или загрузите пакет .zip.


2.2 В каталоге проекта "Найдите в каталоге /build/extension файл bodymovin.zxp, который является пакетом подключаемого модуля.


2.3 СкачатьУстановитьУстановщик ZXP (ссылка:ZXP Installer), откройте программное обеспечение, щелкните пункт меню «Файл» > «Открыть», чтобы загрузить указанный выше пакет подключаемого модуля .zxp,Программа установки ZXP установит его автоматически. Главная страница программы после установки показана на рисунке ниже, что свидетельствует об успешной установке плагина.


3. Откройте AE, выберите пункт меню «Правка» > «Настройки» > «Общие», выберите «Разрешить скриптам записывать файлы и получать доступ к сети» и нажмите «ОК».


4. Щелкните пункт меню «Окно» > «Расширения» > «Bodymovin», чтобы открыть интерфейс Bodymovin для использования подключаемого модуля.


5. В пустом проекте AE создайте новую композицию с именем «Композиция 1» и сделайте простую анимацию:


6. Откройте окно плагина Bodymovin, вы увидите, что «Композиция 1» появляется в списке ниже. Выберите «Composite 1», задайте выходное местоположение файла json и нажмите «Render».


7. Bodymovin также предоставляет функцию предварительного просмотра для сгенерированного файла json.Нажмите кнопку «Предварительный просмотр» в интерфейсе плагина, нажмите «Обзор», чтобы загрузить только что сгенерированный файл json, и вы увидите, что анимация экспортируется как есть. есть. :


8. Затем мы создаем новую веб-страницу для воспроизведения этой анимации. Скопируйте "\build\player\bodymovin.js" из каталога проекта GitHub Bodymovin и только что сгенерированный файл json в корневой каталог веб-страницы и создайте новый html-файл со следующим кодом:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Bodymovin Demo</title>
    <script src="bodymovin.js"></script>
</head>
<body>
    <div id="animation"></div>
    <script>
        bodymovin.loadAnimation({
            path:'data.json',   //json文件路径
            loop:true,
            autoplay:true,
            renderer:'canvas',  //渲染方式，有"html"、"canvas"和"svg"三种
            container:document.getElementById('animation')
        });
        //bodymovin.js的完整api文档见GitHub项目首页(https://github.com/bodymovin/bodymovin)
    </script>
</body>
</html>


9. Когда вы откроете эту страницу, вы обнаружите, что анимация работает успешно, не правда ли, это очень крутая технология?


10. Если вы хотите, чтобы json-версия анимации запускалась на устройствах Android/iOS, найдите «lottie» на GitHub, а затем выберите интересующую вас платформу.


Помню, на конференции FDCon2017, после того как Чжу Сюнь закончил свое выступление, кто-то задал вопрос, который я всегда хотел задать:

Adobe запустила программное обеспечение для создания анимации HTML5 An (Adobe Animate CC), почему бы не использовать An вместо этого?

Zhu Xun ответил, что предшественником An был Flash, а генерируемая им анимация H5 была написана на js (с использованием библиотеки CreateJS), а более поздняя модификация и сопровождение будут более сложными. Ведь после использования Bodymovin нетрудно заметить, что его гибкость действительно очень высока, а анимация в виде json куда более подходит для кроссплатформенности, чем анимация, написанная на js. Действительно поражен, 10086 лайков для Бодимовина.



—————————

Асинхронное сообщество — это ведущее книжное сообщество ИТ-специалистов в Китае. Я слышал, чтоНедавно написанная статья получила книгу асинхронного сообщества, которую я хотел бы увидеть:Руководство по изучению Git, закрепить базовые знания.




Категории