Когда кейс готов, но анимация — это боль. Делюсь решением

Хотел бы сегодня поделиться достаточно удобным сервисом для анимации интерфейсов.

Возможно, я уже отстал, и все дизайнеры давно собирают свои интерфейсы в нём, но мне до этого приходилось работать только с базовыми вариантами — вроде всеми любимых AE или Principle. У Figma тоже есть свои дополнения, где можно собрать анимацию, но именно Jitter позволяет сделать это быстро и без лишнего головняка.

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

Прошел месяц и я сел за сборку очередного кейса для Behance/Dprofile, дело шло к анимации и мне вообще не хотелось залазить опять в Principle или AE, зная сколько времени я убью на эту часть. Решил попробовать еще раз Jitter, но уже с практическим подходом. У меня был конкретный кейс, конкретная задача на анимацию интерфейса внутри презентации.

Я постараюсь сразу подсветить все моменты, чтобы вам не пришлось, как мне начинать 20 раз с самого начала, так как при сгрузке фрейма были артефакты.

Хочу сразу подсветить моменты, которые сэкономили бы мне кучу времени, чтобы вы не удивлялись, когда ваша анимация уже будет готова 😁

Jitter и деньги На бесплатной версии можно экспортировать:

Платная версия — адекватная по цене. Если нет Visa или MasterCard, сервисов, где её можно оплатить, хватает.

Предположим, у вас уже готова презентация для кейса. Если не знаете, как её нарезать — дайте реакцию, сделаю отдельный пост по подготовке кейса.

Мы будем работать непосредственно с фреймом, в котором планируется анимация. В данном примере — фрейм внутри фрейма, внутри которого лежит целая страница. Её и будем анимировать. Перед тем, как закинуть страницу внутрь второго фрейма, вам нужно:

Теперь берем всю страницу и вставляем её внутрь фрейма нашей презентации.

Выбираем фрейм и запускаем из менеджера плагинов — Jitter. После того, как плагин запустится и фрейм будет выбран — жмем "copy", а затем "Open in Jitter".

После загрузки у вас откроется сайт с Jitter. Если нужно авторизоваться — авторизуйтесь.

После авторизации, вы должны попасть на свой добавленный фрейм. По интерфейсу всё достаточно просто.

Вам нужно выбрать любой элемент из вашего фрейма, нажать New Animation, выбрать тип анимации и настроить его на таймлайне. Аналогично повторить это действие со всеми элементами на странице — и будет вам счастье.

Если не понятно, то в ближайшие дни в свой канал я добавлю видео по данной платформе.

Настроили анимации, выровняли таймлайн, всё нравится. Тогда можно жать на кнопку Export и выводить нужный нам формат. В моем случае это было видео в 4K.

Для тех, кто ещё не знает — появился новый сервис, куда можно сгружать свои видосы, чтобы в дальнейшем вставить их кодом в кейс на Behance/Dprofile (аналог Vimeo). Оставил ссылку для вас в своём канале, забирайте.

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

Кстати кейс я уже опубликовал в канал. Если интересно, можно посмотреть там.

Если есть вопросы — пишите в личку или в комменты.

@ptrchkov_ui