В какой программе делать анимацию интерфейса

Как продуктовому дизайнеру использовать функцию Figma «Smart Animate» для демонстрации концептов дизайна. В этой статье я рассмотрю несколько советов и приемов, которые могут помочь дизайнерам использовать анимацию «абстрактного интерфейса» для быстрой иллюстрации своей работы. Если эта тема вам интересна, обязательно ознакомьтесь с основами Smart Animate. Спасибо Fiona Rolander и Cheechee Lin за ваш вклад ?

Почему я использую анимации для иллюстрации идеи?

• Они есть на всех наших веб-сайтах и ​​целевых страницах.
• Мы используем их в исследованиях, чтобы передать и оценить жизнеспособность ценных функций.
• Мы используем их для демонстрации видения дизайна или направления развития продукта.
• Они появляются в наших продуктах, чтобы представить новые концепции и функции.

Зачастую для подобных задач я инстинктивно обращаюсь к Framer, а кто-то откроет After Effects, Principle или даже Keynote. Но я был приятно удивлен, возможностью создавать анимации с помощью функций прототипирования и Smart Animate в Figma. Я использовал Figma для создания анимаций документов с юзерфлоу, презентаций по стратегии продукта и опросов клиентов, и даже для создания анимаций встроенного в продукт онбординга.

[Анимация интерфейсов: Старт] Программы для создания веб анимации

Поскольку я проектирую в Figma, мне не нужно тратить время на воссоздание или экспорт и импорт элементов в другой инструмент. И хотя Smart Animate имеет свои ограничения, когда дело доходит до выразительности и перекрывающихся анимаций, я могу получить довольно приличный конечный продукт с минимальными усилиями.

Ниже представлено несколько советов, которые я сформулировал, экспериментируя с Figma в качестве инструмента анимации.

Настройки

Организуйте слои

Для анимации переходов с помощью Smart Animate важно упорядочить следующие элементы:

1. Имена слоев
2. Иерархия слоев
3. Непрозрачность слоя.

Это очень важно, поэтому стоит повторить еще раз! Имена, иерархия и прозрачность слоев. Они должны быть согласованы для каждой пары фреймов, которые вы хотите анимировать. Если переход не работает, это почти наверняка потому, что имя слоя не соответствует ожиданиям Figma, или группа вложилась в другой фрейм.

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

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

Упорядочьте фреймы

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

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

Программы для 2D-анимации / Обзор и сравнение софта

Запишите видео или gif

В какой-то момент вы сделаете запись экрана создаваемого прототипа, и превратите это в видео или гифку. Моя любимая программа для записи экрана – ScreenFlow. Она имеет базовые возможности редактирования, которые позволяют ускорить или замедлить моменты, а также исключать неправильные клики и ошибки, которые я мог допустить при просмотре и записи прототипа. Она также может экспортировать видео в различные форматы, включая gif.

Методы

Для каждого из четырех методов я собрал прототип, с которым можно экспериментировать, дублировать и разбирать. Вы найдете их в этом файле Figma. Здесь есть краткое описание каждого метода и ссылка на страницу, которая (надеюсь!) демонстрирует этот метод лучше и яснее, чем мои слова. Пожалуйста, сделайте копию файла и поэкспериментируйте с ним!

Последовательность действий

Вместо того чтобы применять Smart Animate к группе элементов в одном переходе, вы можете создавать выразительные динамические анимации, объединяя несколько состояний в цепочку, которая выглядит как один плавный переход. Самый простой способ сделать это с помощью задержки. В этом примере демонстрируется паттерн, в котором одна анимация сразу же переходит в другую с помощью функции After Delay.

• Все элементы присутствуют во всех фреймах; это просто набор связанных друг с другом изменений масштаба и затуханий с непрозрачностью от нуля до 100%.
• Кнопка «Add» заметно уменьшается при нажатии – она слегка ​​преувеличена по сравнению с размером, который я бы использовал в реальном интерфейсе, но это помогает выделить действие, происходящее в анимации.
• Триггер «On Click» запускает цепочку событий, связанных между собой несколькими анимациями After Delay с задержкой 1 мс. Это минимальный интервал, допускаемый Figma.
• После того, как гаснет кнопка «Add», вторая плитка контента появляется в два быстро связанных шага, затем кнопка «Add» снова появляется в новом месте. Каждый из этих двух элементов предварительно загружен и немного уменьшен в неактивном состоянии, поэтому он появляется с небольшим отскоком. Я масштабирую элементы с помощью инструмента масштабирования Figma (просто нажмите K), что дает не точный, но быстрый результат.

Циклы

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

• Поле комментариев запускает анимацию «On Click», которая не только расширяет само поле, но и исчезает в курсоре в следующем ключевом фрейме.
• Есть два состояния курсора – 100% и нулевая непрозрачность – которые связаны друг с другом анимацией After Delay, каждое с задержкой 500 мс. Если оставить ее в покое, она будет повторяться вечно или до тех пор, пока не разрядится аккумулятор моего ноутбука.
• Для обоих этих состояний кнопка «Post» имеет прикрепленную анимацию «On Click» для улучшения прототипа. Я хочу иметь возможность нажимать эту кнопку независимо от того, виден курсор или нет.

Затухание и масштабирование

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

• Так же, как и два предыдущих метода, эта анимация состоит из нескольких шагов.
• Начните с уменьшения масштаба всего интерфейса, чтобы все элементы были видны и сгруппированы в содержащем их фрейме.
• Первая анимация запускается нажатием клавиши пробела, затем окружающий абстрактный интерфейс исчезает.
• Сразу после этого запускается вторая анимация After Delay с задержкой 1 мс. Эта анимация увеличивает весь фрейм и затемняет все оставшиеся элементы. Остается только элемент(ы) интерфейса, который является фокусом анимации.

Перетаскивание

Путем проб и ошибок я понял, как работает триггер On Drag, но теперь я понимаю, что это довольно просто. Перетаскивание интерполирует свойства всего, что находится в обоих анимируемых фреймах. Когда вы прикрепляете триггер On Drag к элементу, он становится небольшим элементом управления вашей анимацией.

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

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

• Прикрепите триггер при перетаскивании к файлу в первом ключевом кадре и подключите его ко второму ключевому кадру, где файл располагается поверх «зоны перетаскивания», и зона перетаскивания становится активной.
• Прикрепите триггер «On Drag» к файлу в первом ключевом фрейме и подключите его ко второму ключевому фрейму, где файл располагается поверх «зоны перетаскивания», а зона перетаскивания становится активной.
• Вторая часть анимации запускается старым-добрым триггером After Delay / 1ms, прикрепленным ко второму ключевому кадру. Когда перетаскиваемый элемент отпускается на этом втором ключевом фрейме, триггер задержки переходит к конечному состоянию анимации.

Когда возникают ошибки

(несколько советов по отладке любезно предоставлены Fiona Rolander)

Есть примерно 100% вероятность, что в какой-то момент вы нажмете кнопку «play» на своем прототипе и увидите, как какая-то кнопка появится или исчезнет, ​​когда вы меньше всего этого ожидаете. Вот несколько вещей, которые стоит перепроверить, когда это случится:

• Если элемент появляется, когда вы ожидаете, что он исчезнет, убедитесь, что он есть на предыдущем фрейме с непрозрачностью, равной нулю, и на всякий случай добавьте его на два или более последующих фрейма, чтобы убедиться, что он не появится из ниоткуда.
• Отсоедините компоненты и используйте вместо них базовые группы или фреймы. Я немного поиграл с вариантами, и кажется, что Smart Animate с ними хорошо работает, но я обычно отключаю компоненты, если они связаны с чем-то, что не работает.
• И когда я не могу понять, что не так и готов сдаться, я начинаю с последнего фрейма анимации, разгруппировываю проблемные элементы, перегруппировываю и переименовываю, а затем работаю в обратном направлении, используя мои недавно сгруппированные элементы, чтобы убедиться, что все согласовано.

Источник: ux.pub

Где лучше рисовать анимацию?

Сначала художники рисуют несколько кадров анимации персонажей, между уже готовыми набросками кадров сюжетной линии. Для телевизионных аниме рисуется обычно 12 кадров в секунду, но иногда бывает 24 или 8. Делается это точно так же, как и до этого — контуры выводятся на бумаге и переводятся в цифровой вид.

Для чего нужен Principle?

Principle — приложение для Mac OS, которое позволяет в два счета создать анимацию элементов пользовательского интерфейса и сгенерировать его интерактивный прототип. Будь то многоэкранное приложение или просто придуманный вами контрол, так просто и быстро реализовать это раньше не позволял ни один сервис.

Что такое анимация интерфейса?

Анимация интерфейса — это в буквальном смысле процесс «общения» системы с пользователем. Чтобы сайт или приложение было понятным и приятным в использовании, нужны продуманные решения, основанные на исследованиях восприятия и поведения людей.

Что нужно для моушн дизайна?

С чего начать обучение

1. Adobe Illustrator — нужен для подготовки векторных изображений, которые будем анимировать;
2. Adobe Premiere Pro или аналоги — для несложного монтажа;
3. Adobe After Effects — супер программа для анимации и монтажа. Возможностей у нее просто не счесть! …
4. Cinema 4d — программа для трехмерной анимации.

Сколько зарабатывает моушн дизайнер?

По данным труд. ком, средняя зарплата моушн—дизайнера составляет 43 000 рублей. Но многие компании готовы платить больше средней заработной платы: 17% работодателей предлагают от 47 600 рублей в месяц.

Как создаются анимационные фильмы?

Производство анимационного кино не зря называют «pipeline»….Неизменными остаются лишь три основные этапа:

• Препродакшн – формирование идеи и концепции;
• Продакшн – работа со всеми задачами;
• Постпродакшн – коррекция, сбор готового материала.

Как называется тот кто делает мультики?

Художник-мультипликатор, аниматор — художник мультипликационного кино.

В каком приложении сделать анимацию на телефоне?

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

Как сделать анимированный ролик на телефоне?

Как создать анимацию или коллаж

1. Откройте приложение «Google Фото» на устройстве Android.
2. Войдите в аккаунт Google.
3. В нижней части экрана нажмите Библиотека Инструменты.
4. В разделе Новый объект выберите Анимация или Коллаж.
5. Выберите фотографии, которые вы хотите добавить.
6. В правом верхнем углу нажмите Создать.

Где рисовать анимацию на андроид?

Лучшие приложения для создания анимации на Android

1. 1 Legend.
2. 2 Adobe Spark Post.
3. 3 RoughAnimator.
4. 4 FlipaClip: мультипликация
5. 5 Animation Desk.
6. 6 Заключение

Источник: toptitle.ru

Тестируем Kite compositor и делаем анимацию в мобильных приложениях

Компания Touch Instinct разбирается с программой Kite Сompositor и ставит эксперимент — сможет ли с ее помощью дизайнер создать готовые анимации, а разработчик получить готовый код для приложения.

В 2017 году для MacOS вышла программа Kite compositor, которая может стать посредником между дизайнерами и разработчиками. Основная идея — быстрое создание анимации и прототипирование с последующей генерацией кода для платформы iOS. На структуре программы мы останавливаться не будем, на эту тему уже есть подробный материал. Цель нашей статьи — эксперимент. Дизайнер попробует создать анимацию с помощью программы, а разработчики проверят код и дадут обратную связь.

Программа помогает решить две проблемы.

Первая — производство успешных кейсов стоит дорого. Анимация приложений сейчас развивается очень бурно: дрибббл и беханс завалены красивыми гифками с примерами и новыми типами взаимодействий. При этом не так много приложений могут похвастаться успешной реализацией анимации. Заказчики обычно делают упор на функциональность и грамотную логику взаимодействия. В связи с этим финансирование на дополнительные модификации типа анимаций и других фич урезается либо откладывается.

Вторая преграда — коммуникационная. Практика показывает, что дизайнеры для описания конечного результата используют слова, жесты, звуки и междометия, в редких случаях гифки. Затем разработчики стараются подобрать и перебрать все возможные инструменты, доступные для реализации идеи. Гиф экономит немного времени, но все равно не помогает при определение точных параметров и свойств анимации. Многократный и энергозатратный процесс часто приводит к отказу от кастомной анимации.

Сценарий анимации

Интерфейс программы чем-то напоминает Adobe AfterEffects. Есть таймлайн, на котором отображаются примененные эффекты, окно со слоями, настройками и типами эффектов. Есть поле работы, которое можно менять под стандартные размеры устройств.

Интерфейс программы

У нас нет цели детально изучить возможности программы, поэтому сверхъестественной анимации не планируем. Попробуем с нуля воссоздать простой сценарий взаимодействия пользователя с интерфейсом. Сценарий такой:

1. Пользователь на карте вводит название места
2. Пин отображается на карте
3. Кликаем (Действие) на него
4. Появляется краткая информация о месте
5. Пользователь раскрывает карточку (Действие), в которой появляется полная информация о месте.

Импорт дизайна

Создаем дизайн в Sketch, не закрывая файл в нем, открываем Kite compositor, выбираем в меню программы Import — From Sketch. Никаких плагинов или дополнений устанавливать не нужно, все переносится автоматически. Перед импортом в Kite compositor создаем артборд с теми же параметрами, что и макет. В данном случае стандартный размер айфона 375х667.

Импорт прошел не очень успешно. Kite compositor не смог отобразить некоторые слои (тень под большой плашкой), а некоторые отображает странно (тень от пина съехала, а рамка с областью редактирования самой тени осталась на месте).

Отображение в макете sketch (слева) — тень есть, а в Kite compositor (справа) — она не перенеслась

Sketch (слева) — тень стоит на месте, в Kite compositor (справа) — тень съехала, а рамка ее редактирования осталась на месте

В процессе была сделана еще одна попытка импорта в Kite compositor из Sketch, результат остался тем же.

Двигаемся дальше. При знакомстве с возможностями анимации, первое, что захотелось сделать — трансформирование фигур. Например, превратить треугольник в квадрат и обратно. К сожалению, сделать это не удалось. Единственная доступная трансформация фигур — из круга в квадрат и обратно.

Еще есть анимация линий, что позволило сделать что-то вроде змейки.

Возьмем простые и знакомые виды анимации: opacity, transform.scale, transform.translation.

Список основных анимаций

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

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

Тут тоже нашлись подводные камни. Оказалось, что при использовании функции transform.scale.x деформируются закругленные углы. В некоторых местах это не так сильно заметно, но в других серьезно мешает и приводит к доработке макета, что влияет на скорость работы.

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

Чтобы прототип приложения стал отзывчивым, добавляем Действия (Action). Именно Действия запускают запланированные анимации. Для удобства в работе берем простые жесты — клики мышкой.

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

Окно Действия с добавленными видами воспроизведения анимации

Для просмотра результатов работы используем режим Демонстрации. В нем видно, как будет отображаться анимация и действия всех элементов. Наши ожидания не оправдались. Появились новые странности в работе программы. Хотя порядок анимации мы расставили, но воспроизведение не соответствует ожиданиям.

Все элементы отображаются одновременно, без какой-либо последовательности.

Отображение анимации после добавления в Действие и взаимодействия с ним

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

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

В сообществе Kite compositor на фейсбуке можно заметить, что практически никто не хвастается результатами своих работ в режиме демонстрации. Все участники снимают видео в режиме рабочей области — просто включают воспроизведение по таймлайну.

Еще раз проверяем все анимации и эффекты, записываем гиф для сравнения с тем, что получилось в коде. Генерим код и отдаем разработчикам на анализ.

Тест кода

Код получается, но есть нюансы.

Дублирование кода

Первое, что обращает на себя внимание еще до запуска кода, это его структура. С одной стороны, она выглядит просто: каждое действие описано отдельной строкой. Сразу видны все значения: положение элементов, цвета, параметры тени и анимации. С другой стороны, перед глазами простыня дублирующего кода, в итоге получилось 1996 строк.

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

Неадаптивность

Во время воспроизведения кода обнаружились ошибки и неадаптивность.

Запланированное воспроизведение в приложение

и как его собрал Xcode

Выше мы писали про конкретные области активных Действий: пин и маленькая карточка. В сборке эти области исчезли, теперь можно нажимать куда угодно. Это не есть хорошо.
Код Kite compositor задает статичные размеры всем элементам интерфейса, что создает проблему с адаптивностью. Исходно дизайнеры работают в макетах размера 1x (375х667px), Kite compositor, в процессе создания анимации генерации кода, не учитывает возможность адаптивности под устройства другого размера. Даже при условии, что во время импорта из Sketch все фигуры остаются в векторными.

Неадаптивность приводит к тому, что при создании анимации дизайнеру придется делать для каждого разрешения отдельный файл. Или разработчикам прописывать дополнительные условия, а это немного усложняет и замедляет процесс работы. Можно переписать код под Autolayout, но это будет совсем другой код, в котором от старого почти ничего не останется.

Мало туториалов

Еще одним немаловажным фактором популярности является наличие туториалов. Из доступных для свободного обучения есть только один канал. Amos Gyamfi рассказывает и показывает, как сделать ту или иную анимацию в Kite compositor. Единственный минус: порой некоторые из его видео повторяют одни и те же приемы и эффекты анимации, просто на других объектах. Но таких видео немного.

Есть еще ресурс с обучением, но там буквально парочка бесплатных, а дальше надо платить.

На официальном сайте Kite compositor относительно недавно появился раздел, посвященный обучению, и это действительно радует. Возможно, в ближайшем будущем ситуация может измениться в лучшую сторону.

В целом сносно

Kite compositor может переработать в код параметры анимации, теней и цвета. Таким образом, хоть какой-то, но мостик между дизайнером и разработчиком устанавливается. Программист может точно увидеть все необходимые значения до миллисекунды, а не гадать что, где, почему. Сгенерированный код создается на языке Swift. Это позволяет без особых проблем отправить код в Xcode, создать там проект и запустить.

Анимацию Kite compositor можно использовать, но только в статичных анимациях, где не требуется активного участия пользователя. Например, в сплеш скринах. Да и с жестами серьезные ограничения — максимум тап или скролл. Что-то сложное приведет к переписыванию всего кода.

Поищем еще

С нашей задачей программа не справилась. Отметим ошибки, баги и недостаточное количество функций в сравнении с программами-конкурентами. Kite compositor не так прост в обращении, интерфейс не очевиден. Но этим, наверное, ни одна программа по созданию эффектов не может похвастаться.

Идея соединения работы дизайнеров и программистов очень перспективная. Мы в нее верим. Поэтому попробуем найти идеальную программу для превращения анимации в код. Следите за новостями.

Источник: apptractor.ru