Json анимация чем открыть
Всем привет, меня зовут Артем Сафаров, я — дизайнер из веб-студии 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. Вот самый простой из них:
Lottie — отличный способ экспортировать анимации из After Effects в JSON, сохраняя хорошее качество. В этой статье мы разберёмся, как приступить к работе с этим инструментом и на чём стоит заострить особое внимание.
В 2017 году инженеры Airbnb увидели потенциал анимации на основе JSON и вместе с лидером анимации создали библиотеки iOS и Android, которые смогли бы отображать файлы JSON, которые назвали «Lottie». Вы можете прочитать больше об истории здесь. Разработчики в Airbnb оставили исходный код открытым и создали сообщество GitHub для общения с дизайнерами и инженерами.
LottieFiles — это независимая платформа от Airbnb, на которой дизайнеры могут загружать, тестировать, покупать и выгружать анимации.
Airbnb также являются создателями плагина LottieFiles для After Effects, который работает аналогично Bodymoving и позволяет нам просматривать анимацию, загружать её на платформу LottieFiles, сохранять на компьютере.
Для начала необходимо установить плагин, вы можете использовать Bodymovin или LottieFile.
Я создал для своего логотипа простую анимацию, которая будет отображаться в верхнем меню веб-сайта. Это дрон с вращающимися лопастями, поэтому я импортировал в слои файлы Illustrator, сделал спиральные 3D-слои и повернул их.
Будьте внимательны, не все эффекты поддерживаются этими форматами файлов. На сегодняшний день 3D-слои не поддерживаются. Поэтому, прежде чем делать анимацию, стоит проверить поддержку.
Создание анимации для интернета — это не то же самое, что и создание традиционного видео. Мы должны принять во внимание несколько параметров настройки и форматирования, о которых нам никогда раньше не приходилось думать.
Вот список предложений, которыми делятся создатели Lottie:
- Файлы 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.
Этот способ создания анимации для веб-сайтов действительно интересен, поскольку он сохраняет отличное качество и прост в реализации.
Для создания анимации, управляемой данными, используются данные, поступающие в реальном времени из различных источников. Анимации в композициях формируются на основе этих данных. Можно использовать данные из нескольких источников. Данные могут быть статическими или изменяться во времени. Можно импортировать данные в проект After Effects, а затем использовать их в качестве входных для анимации графиков, символов, управления визуальными эффектами, создания титров к фильмам и другой анимационного дизайна.
Можно использовать данные практически из любого доступного источника, такого как:
- Файлы данных, формируемые устройствами. Данные с таких устройств, как фитнес-трекеры, которые записывают производимые действия с помощью датчиков и сохраняют их в файлы различных форматов. Такие изменяющиеся со временем данные включают скорость, высоту над уровнем моря, расстояние, частоту сердечных сокращений и другие параметры выполняемых пользователем действий.
- Статические данные, формируемые пользователем. Глобальные статические данные (например, результаты опросов), которые можно изменять, чтобы управлять графикой. Созданный пользователем файл данных может обеспечить рабочий процесс для глобальных данных.
- URL-адрес — поступающие в реальном времени данные с веб-сайтов (например, пути входа и выхода пользователя, выполняющего навигацию по веб-странице).
- Метаданные. Внедренные описательные сведения о видеофайлах.
Файлы данных можно импортировать в следующие форматы:
При наличии файлов данных в других форматах преобразуйте их в любой поддерживаемый форма импорта, а затем импортируйте в проект After Effects. Для преобразования файлов данных в форматы, поддерживаемые программой After Effects, существуют различные инструменты конвертации.
Что новенького
Недавно Maxime Robinet совместно с Psycle Research запустили эксперимент Figma(love)Lottie, в котором попробовали использовать API Figma для демонстрации json на макетах.
Чтобы воспользоваться сервисом, проведите предварительные манипуляции с макетом в Figma. Разместите на нем группу слоев: контейнер для отображения анимации, параметры анимации в текстовых блоках (скорость и цикличность воспроизведения). Подробная инструкция тут.
Для демонстрации понадобятся json, персональный токен для доступа (можно получить в настройках аккаунта) и ссылка на макет экрана в Figma. Нужный мокап устройства добавится автоматически под разрешение макета. В итоге у вас получится ссылка, которой можно поделиться. Она будет работать около двух месяцев.
Figma(love)Lottie поможет вам демонстрировать json непосредственно в интерфейсе и производить настройку параметров анимации без помощи разработчика. Lottie Preview и Bodymovin Player лишены этих возможностей.
Создаем Lottie-файлы
Дизайнер создает анимацию в Adobe After Effect, учитывая ограничения, затем экспортирует ее в json с помощью плагина Bodymovin. После этого нужно сделать тест файла в превью-сервисах — Bodymovin Player или Lottie Preview.
Продумайте анимацию заранее с учетом слоев. Ее можно создать с нуля в Adobe After Effect, а можно сначала отрисовать исходный файл в Adobe Illustrator или Sketch. Импорт в Adobe After Effect в этом случае могут упростить плагины:
-
(от Adam Plouff) для интеграции Adobe After Effect и Adobe Illustrator — для быстрого перемещения векторных форм между программами без импорта и организации файлов; (от Adam Plouff и Google SUMux) — для интеграции Adobe After Effect и Sketch, аналогичен Overlord. Скоро будет доступен для Figma!
Создание Shapes на основе векторных слоев файла Adobe Illustrator
Я воспользовалась готовыми иллюстрациями и подготовила кейсы, которые опираются на предложенную классификацию анимации. Для примера микровзаимодействия выбрана кнопка, для независимой графической анимации — иллюстрации к онбордингу. Также я попробовала сделать json для визуальной составляющей кастомного перехода между экранами.
Анимация в онбординге (источник изображений — Flaticon)
Анимация кнопки и анимация для перехода между двумя экранами
Работа с видеорядами MGJSON в After Effects
Для работы со файлом MGJSON выполняйте следующие действия:
Выберите Файл > Импорт.
Чтобы выполнить импорт, выберите файл MGJSON и нажмите кнопку Открыть.
Файл будет добавлен в окно проекта. Создайте композицию с этим видеорядом.
Импортируйте ресурс в проект и добавьте его в композицию.
На панели Таймлайн разверните свойства видеоряда.
С помощью инструмента Лассо свяжите одно из свойств ресурса, например Поворот, с одним из потоков данных, имеющихся на слое данных. Теперь свойство ресурса ссылается на данные из слоя данных. Каждый поток данных, на который имеется ссылка, содержит выражение, которое получает его значение из файла видеоряда.
При просмотре видеоряда ресурс анимируется на основе потока данных слоя данных.
Кроме того, образцы данных из файла данных также можно преобразовывать в ключевые кадры. Чтобы выполнить преобразование в ключевые кадры, выполните следующие действия:
Импортируйте файл MGJSON в проект и перетащите его на панель Таймлайн .
Щелкните слой данных правой кнопкой мыши и выберите пункт Помощник в работе с ключевыми кадрами > Создать ключевые кадры из данных в меню Помощник в работе со слоями и ключевыми кадрами.
Чтобы просмотреть ключевые кадры, разверните слой данных.
После преобразования в ключевые кадры данные больше не будут обновляться в режиме реального времени и не будут браться из файла данных.
Данные, передаваемые в режиме реального времени, можно также просматривать в редакторе диаграмм. Для этого нажмите на значок редактора диаграмм на панели Таймлайн.
Анимация, управляемая данными, использует справочник выражений. Дополнительные сведения см. в разделе Анимация, управляемая данными (справочник выражений).
Команда Слой > Время > Согласовать видео с данными смещает слои видео на различные кадры как указано в файле mgJSON. С помощью этой команды можно согласовать видео по времени с образцами данных, хранящимися в соответствующем файле mgJSON. Например, если данные были записаны во время гонки, однако время начала видео не совпадает со временем начала записанных данных, можно задать смещение, и данные будут автоматически сопоставлены с видео.
Чтобы согласовать видео по времени с данными mgJSON, выполните следующие действия:
Чтобы эта команда сработала, в файле mgJSON должна присутствовать группа videoSyncTimeList , содержащая следующие элементы:
- Имя одного или нескольких целевых слоев (fileName)
- Число кадров (frameNumber), на которые необходимо сместить эти слои от начала слоя данных.
"videoSyncTimeList": [
"fileName": "sample1.mp4",
"frameNumber": 1000
>,
"fileName": "sample2.mp4",
"frameNumber": -1000
>
Значением fileName должно быть имя выбранного слоя, а не исходное имя слоя. Если имя слоя изменить на исходное в композиции, например, переименовать слой «sample1.mp4» в «Гонка камера 1», то также необходимо будет изменить значение fileName в файле mgJSON. Слои, на которые ссылается параметр fileName, не обязательно должны быть элементами видеоряда с исходным файлом. Этими слоями также могут быть сплошные заливки, вложенные композиции или слои других видов.
Если параметру frameNumber задать положительное значение, целевой слой будет смещен влево (перед слоем данных). Если параметру frameNumber задать отрицательное значение, целевой слой будет смещен вправо (перед слоем данных). Если параметру frameNumber задать значение 0, начало целевого слоя будет совмещено с началом слоя данных.
Файлы со значениями, разделенными запятой (.csv), и файлы со значениями, разделенными табуляцией (.tsv или .txt), можно импортировать в After Effects как видеоряд для использования в качестве источников данных. Файлы CSV и TSV содержат данные таблиц в формате простого текста. При этом значения разделяются либо запятыми, либо символами табуляции. Файлы данных CSV и TSV работают так же, как файлы данных JSON.
Чтобы использовать файлы данных CSV или TSV в After Effects, выполните следующие действия:
- Выберите Файл > Импорт .
- Щелкните правой кнопкой мыши панель Проект и выберите команду Импорт > Тип файла .
- Дважды щелкните панель Проект .
Файл будет добавлен в окно проекта. Создайте композицию с файлом.
На панели Таймлайн разверните свойства видеоряда. Свяжите свойства данных слоя композиции с другим слоем с помощью лассо выбора выражения или лассо ссылки на свойство. Чтобы открыть текстовое поле выражения, щелкните значок таймера напротив имени слоя, удерживая нажатой клавишу Shift . Связать свойства данных также можно с помощью команды Правка > Копировать со ссылками свойства .
Сведения о свойствах данных слоя на панели «Таймлайн» см. в разделе Общие сведения о свойствах данных.
Чтобы указать ссылку на данные видеоряда, используйте выражение для свойства, которое будут определять данные. Для считывания данных из указанной строки и столбца используйте атрибут видеоряда dataValue() . Стоки и столбцы имеют нулевой индекс. Например, выражение footage("sample.tsv").dataValue([15,1]) возвращает значение строки 16 второго столбца.
Если добавить JSON-, CSV- или TSV-файл к композиции и открыть свойства, в них будет содержаться только группа Свойства данных вместо группы Свойства преобразования . Группа «Свойства данных» содержит иерархию данных, определенную в файле.
Работа с этой группой данных похожа на работу After Effects с файлами Motion Graphics JSON (.mgJSON). Разница состоит в том, что файлы JSON, CSV и TSV могут содержать только статические значения данных, тогда как файлы mgJSON могут содержать динамические данные (данные, которые изменяются со временем).
К каждому отдельному свойству данных применено выражение, которое связывает это свойство с данными из JSON-, CSV- или TSV-файла. При изменении исходного файла данных эти изменения отражаются в значениях свойств данных.
Если вы не хотите писать сложные выражения, можно воспользоваться лассо ссылки на свойство или командой Правка > Копировать со ссылками свойства , чтобы связать свойства данных со свойствами других слоев. При связывании слоев лассо ссылки на свойство автоматически пишет выражение.
В After Effects 15.0 можно было импортировать файл JSON, содержащий определения пользовательских функций JavaScript. Этот файл можно было использовать как библиотеку пользовательских функций выражений. В After Effects 15.1 объекты JavaScrpt нельзя использовать для JSON. В After Effects 15.1 используется другой, более строгий, синтаксический анализатор JSON, который не позволяет импортировать файлы JSON с недопустимым синтаксисом.
Чтобы избежать этой проблемы, в After Effects 15.1 можно импортировать файл выражений синтаксиса JavaScript (.jsx). Содержание файла JSX может быть таким же, как у файла JSON, импортированного в After Effects 15.0. Нужно только изменить расширение имени файла на .jsx. Если необходимо открыть существующий проект, содержащий файл JSON, который не работает, можно заменить файл JSON файлом JSX с помощью команды Файл > Заменить видеоряд . Ссылки выражений на файл JSON заменяются ссылками на файл JSX.
Работая с анимацией, управляемой данными в After Effects, можно столкнуться с несколькими проблемами. Полный перечень этих проблем см. в разделе Выявленные неполадки анимации, управляемой данным.
Data-driven animations are created using live data collected from various data sources that drive animations in your composition. You can use data from multiple data sources. The data can be static or time-varying. You can import the data into your After Effects project and use it as input that can animate graphs, characters, control visual effects and movie titles, and other motion graphics.
You can use data from almost every possible source such as:
- Device Generated Data Files – Data from devices such as fitness trackers that record activity through sensors and store them in different file formats. This time-varying data includes - speed, altitude, distance, heart rate, and various other parameters of user activity.
- User Generated Static Data – Global static data such as survey results that can be changed to drive graphics. A user created data file could provide a workflow for global data.
- URL – Live data from websites such as entry and exit path of a user navigating through a web page.
- Metadata - Data embedded in Video File Metadata.
You can import data files in the following formats:
If you have data files in other formats, convert them to any of the supported import file formats and import into After Effects project. There are various conversion tools available to convert data files into After-Effects-supported formats.
Data-driven animation
You can import a standard JSON file into After Effects as footage and the data files work in the background. After Effects directly references the data in these data files to drive animations within projects. JSON footage is not represented as data streams in the Timeline panel. You can reference the data using expressions as an evaluated JSON object.
You can modify the expressions to change how data is referenced. You can write the data in a text editor, referenced by After Effects to drive animations. JSON support is based on the JSON schema, which specifies and defines how an application uses and modifies JSON data.
- Number: A signed decimal number.
- String: A sequence of zero or more Unicode characters.
- Boolean: Either of the values true or false.
- Array: An ordered list of zero or more values.
- Object: an unordered collection of name or value pairs where the names (keys) are strings.
- Null: An empty value, using the word ‘null’.
To work with a standard JSON file, use the following steps:
Select File > Import.
To import, select a . JSON file and click Open.
The file is added to your project window. Create a composition with the footage.
Add a solid to the composition. To add a solid, select Layer > Solid.
In the Timeline panel, twirl open the properties of the solid layer and Alt+Click the Opacity parameter.
Change the data in the expression to modify your animation. You can control the JSON data and the data is referenced from the data file where all the information is stored.
You can also replace the JSON file with another JSON file to change the data being referenced. To replace, select Replace Footage > File, and open the new file from your computer.
To use the data, you can apply an expression on the property you wish the data to drive, then:
Use the sourceData attribute to read the data in a .JSON file. For example:
To return its value, reference the specific property inside the JSON data. For example,
You can import a MGJSON data file as footage in your project. When you add data footage to a composition, data property streams are grouped into a top-level group "Data". The Data group displays footage data as Properties. Each property in the data group is expression linked back to the footage file that access the data file value using the expression footage("foo.mgjson").dataValue(N) . Here N is the path to the data stream in the file. MGJSON works based on a schema, which is designed to simplify referencing and importing data streams in After Effects.
Each individual data property has an expression applied which links that property to the data in the MGJSON file. If the source MGJSON file is changed, the data property values are automatically updated.
In the Timeline panel, you can twirl open the Data layers and use the pick-whip to link parameters to other parameters. The changes are automatically populated.
Work with MGJSON footage in After Effects
To work with an MGJSON file, use the following steps:
Select File >Import.
To import, select an MGJSON file and click Open.
The file is added to your project window. Create a composition with the footage.
Import an asset into the project and add it to the composition.
In the Timeline panel, twirl open the properties of the footage.
Pick whip one of the properties of the asset, for example – Rotation to one of the data streams in the data layer. The asset property is now referencing the data from the data layer. Each reflected data stream has an expression that pulls its value from the footage file.
When you preview the footage, the asset animates based on the data stream of the data layer.
You can also convert the data samples from the data file into keyframes. To convert into keyframes, follow these steps:
Import MGJSON file into your project and drag into Timeline panel.
Right-click the data layer and select Keyframes Assistant > Create Keyframes from Data from the Layer and Keyframe Assistant menu.
To view the keyframes, twirl open the data layer.
After keyframe conversion, the data is no longer live and is not referenced from the data file.
You can also view live data as a graph in the Graph Editor. To view, click the Graph Editor icon in the Timeline panel.
Data-driven animation uses expression reference. For more information, see Data-driven animation (expression reference).
The Layer > Time > Align Video to Data command offsets video layers by various frames, as specified in an mgJSON file. You can use this command to align video in time to data samples stored in a matching mgJSON file. For example, if you captured data during a race, but the start time of the video does not match the start time of the captured data, you can specify the offset so that the data is automatically aligned.
To align video in time to mgJSON data, use the following steps:
For this to work, the mgJSON file must contain a videoSyncTimeList group that contains:
- The name of one or more target layers (fileName)
- The number of frames to offset (frameNumber) those layers from the start of the data layer.
"videoSyncTimeList": [
"fileName": "sample1.mp4",
"frameNumber": 1000
>,
"fileName": "sample2.mp4",
"frameNumber": -1000
>
A fileName value must be the layer name of a selected layer, not the the source name of the layer. If you change the name of a layer with a source in your composition, for example - rename the layer "sample1.mp4" to "Race Camera 1", you also need to change the fileName value in the mgJSON file to match. Layers referenced by fileName do not have to be footage items with a source file, they can also be solids, nested compositions, or other layer types.
Positive frameNumber values offset the target layer to the left (before the data layer). Negative frameNumber values offset the target layer to the right (after the data layer). A frameNumber value of 0 aligns the start of the target layer to the start of the data layer.
You can import Comma-separated value (.csv) and Tab-separated value (.tsv or .txt) files as footage into After Effects and use them as data sources. CSV and TSV files store tabular data in plain text format with values separated either by comma characters or tab characters. The CSV and TSV data files work similar to how the JSON files work.
To use CSV or TSV data files in After Effects, follow these steps:
- Select File > Import .
- Right-click the Projects panel and select Import > File type .
- Double-click the Projects panel.
The file is added to your project window. Create a composition with the file.
In the Timeline panel, twirl open the properties of the footage. Link the data properties of the layer in the composition to another layer with the expression pick whip or the Property Link pick whip. To open the expressions text field, hold Shift and click the timer icon against the name of the layer. You can also link the data properties through the Edit > Copy With Property Links command .
To learn about layer data properties in the Timeline, see Basics of Data properties.
To reference the data footage file, use an expression on the property that you want the data to drive. Use the dataValue() footage attribute to read the data from a specified row and column. Rows and columns are zero-indexed. For example, footage("sample.tsv").dataValue([15,1]) returns the value on row 16 of the second column.
When you add a JSON, CSV, or TSV file to a composition and open their properties, they contain only a Data properties group, instead of the Transform properties group. The Data properties group contains the hierarchy of data as defined in the file.
This data group is similar to how After Effects treats Motion Graphics JSON (.mgJSON) files. The difference is that JSON, CSV, and TSV can only contain static data values, while mgJSON can contain dynamic data (data that changes over time).
Each individual data property has an expression applied which links that property to the data in the JSON, CSV, or TSV file. If you change the source data file, the data property values reflect the change.
If you do not wish to write complex expressions, you can use the Property Link pick whip or the Edit > Copy with Property Links command to link th data properties to properties of other layers. As you link the layers, the Property Link pick whip automatically writes expressions for you.
In After Effects 15.0, it was possible to import a JSON file that defined custom JavaScript functions, which you could use as a library of custom expression functions. In After Effects 15.1, JavaScrpt objects are not legal syntax for JSON. After Effects 15.1 uses a different JSON parser that is strict and does not allow import of a JSON file with illegal syntax.
If you try to import a JSON file with a defined JavaScript function in After Effects 15.1, or open a project that contains such a file, After Effects displays an error.
To avoid the issue, you can import a JavaScript syntax extension file (.jsx) into After Effects 15.1. The content of the JSX file can be the same as a JSON file imported into After Effects 15.0, you only need to change the filename extension to .jsx. If you open an existing project that contains a JSON file that does not work, use File > Replace Footage to replace the JSON file with the JSX file. The expression references to the JSON file are replaced by references to the JSX file.
While you work with Data-driven animations in After Effects, you can run into a few issues. For a complete list, see known issues with Data-driven animations.
О библиотеке LottieFiles многие знают, но пробовать на практике не спешат. Статей на эту тему мало, поэтому я решила поделиться своим опытом создания анимации для мобильных приложений с помощью Lottie.
Без анимации в мобильных интерфейсах не обойтись. Она оживляет приложение, помогает пользователю ориентироваться в нем и получать отклик на свои действия, вызывает эмоции.
По типу взаимодействия можно разделить анимацию на несколько категорий:
- микровзаимодействия — визуальные отклики на действия пользователя, анимация конкретных элементов интерфейса на экране, например, кнопки или иконки;
- независимую графическую анимацию в пределах экрана, например, анимированная иллюстрация в онбординге или сплеш-скрине;
- переходы — анимация, связывающая между собой два экрана.
На практике?
Lottie может ускорить процесс разработки приложения. Время, затраченное на анимацию в проекте, контролируется дизайнером. Он создает, тестирует, настраивает анимацию и передает разработчикам. Функциональные спецификации здесь не требуются. Однако, по разным причинам, не для каждого мобильного приложения уместно подключать LottieFiles. Также команды разработки часто отказываются от этой библиотеки ввиду налаженных внутренних процессов, выходить за рамки которых обычно затруднительно. Хотелось бы попробовать LottieFiles в реальном проекте.
Тут можно скачать созданные мной json-ы и посмотреть их в Lottie Preview.
Анимация, управляемая данными
Стандартный файл JSON можно импортировать в After Effects в виде видеоряда и файлов данных для работы в фоновом режиме. After Effects напрямую ссылается на данные в этих файлах данных для управления анимацией в проектах. Видеоряд JSON не представлен в виде потоков данных на панели Таймлайн . На данные можно ссылаться помощью выражений как на оцененный объект JSON.
Чтобы изменить способ обращения к данным, можно внести изменения в выражения. Данные, на которые ссылается After Effects для управления анимацией, можно записать в текстовом редакторе. Поддержка JSON основана на схеме JSON, которая определяет и указывает, как приложение будет использовать и изменять данные JSON.
Основные типы данных JSON:
- Число: число с десятичным знаком.
- Строка: последовательность символов Юникод длиной ноль или более.
- Логическое значение: значение true или false.
- Массив: упорядоченный список значений, в котором может быть ноль или более значений.
- Объект: неупорядоченный набор пар имен или значений, где имена (ключи) являются строками.
- Null: пустое значение со словом «null».
Для работы со стандартным файлом JSON выполняйте следующие действия:
Выберите Файл > Импорт.
Чтобы выполнить импорт, выберите файл JSON и нажмите кнопку Открыть.
Файл будет добавлен в окно проекта. Создайте композицию с этим видеорядом.
Добавьте в композицию сплошную заливку. Чтобы добавить сплошную заливку, выберите Слой > Сплошной.
На панели Таймлайн разверните свойства слоя со сплошной заливкой и нажмите на параметр Непрозрачность, удерживая клавишу Alt.
Для внесения изменений в анимацию измените данные в выражении. Данными JSON можно управлять. Для доступа к данным используются ссылки из файла данных, где сохранена вся информация.
Чтобы использовать для анимации другие данные, также можно заменить файл JSON другим файлом JSON. Чтобы выполнить замену, выберите Заменить видеоряд > Файл и откройте новый файл со своего компьютера.
Для использования данных можно применить выражение к свойству, которым будут управлять данные, а затем:
Воспользоваться атрибутом sourceData для считывания данных из файла JSON. Например:
Чтобы вернуть его значение, обратитесь к определенному свойству внутри данных JSON. Например:
В качестве видеоряда можно импортировать в проект файл данных MGJSON. При добавлении в композицию данных видеоряда потоки свойств данных объединяются в новую группу верхнего уровня «Данные». В группе «Данные» данные видеоряда отображаются как свойства. Каждое свойство в этой группе данных представляет собой выражение с обратной связью с файлом видеоряда, который осуществляет доступ к значению в файле данных с помощью выражения footage("foo.mgjson").dataValue(N). Здесь N — это путь к потоку данных в файле. MGJSON работает на основе схемы, с помощью которой проще ссылаться на потоки данных и импортировать их в After Effects.
К каждому отдельному свойству данных применено выражение, которое связывает это свойство с данными из файла MGJSON. При изменении исходного файла MGJSON значения свойств данных автоматически обновляются.
На панели Таймлайн можно разворачивать слои данных и связывать параметры с другими параметрами с помощью инструмента «Лассо». Изменения вносятся автоматически.
Подключаем библиотеку
Для того чтобы добавить в приложение анимацию, подключите библиотеку LottieFiles. Здесь можно узнать, как это сделать. В исполняемом коде для анимации можно задать размер, скорость воспроизведения и число проигрываний — это позволяет точнее настроить анимацию.
Все кейсы были протестированы и подключены — Lottie можно использовать для анимации разного назначения.
Подключение Lottie на iOS
Разбираемся в нюансах
LottieFiles это библиотека для iOS, Android, Web и Windows. В этой статье расскажу про особенности только для iOS и Android, так как специализируюсь на мобильных интерфейсах.
Маленький ликбез — библиотека состоит из файлов json, в которых закодирована анимация из Adobe After Effect. Плагин, который участвует в создании таких файлов, называется Bodymovin. Он имеет JavaScript движок и рендерит анимацию в режиме реального времени.
Вы можете воспользоваться пробной версией Adobe After Effect, если не работали с этой программой раньше. За неделю использования успеете протестировать и решить, нужна ли она вам.
Я проанализировала таблицу от Airbnb и выделила функции Adobe After Effect, которые поддерживаются и на iOS, и на Android. При создании анимации их нужно учитывать, чтобы получить на выходе json, который будет корректно отображаться на обеих платформах.
Сводная таблица с поддерживаемыми функциями для iOS и Android
Читайте также: