Мой опыт в выборе инструмента для анимации интерфейса
Устав терпеть боль от Adobe After Effects, я решил, что пришло время найти приложение, которое бы спасло меня от его громоздкого интерфейса, работало со SketchApp и содержало только те функции, которые нужны для анимации интерфейса. Также очень важными были простота использования и минимальное время на обучение. Ах да, быстрый экспорт GIF. Чтобы из AE получить gif, нужно сначала сохранить раскадровку, а потом собрать все при помощи Photoshop.
С выходом SketchApp прошло время Adobe Photoshop, так и AE отсиживается на скамейке запасных. Но почему так произошло? Так же, как и Скетч, новые приложения избавились от лишнего функционала, оставив только те возможности, которые нужны для лаконичной анимации интерфейса.
По каким критериям я выбирал себе приложение:
- Десктопное приложение для Mac
- Простота обучения и реализация анимаций
- Простор для творчества
- Экспорт в Gif
- Работа со Sketch
Выбирал я из таких вариантов: Atomic.io, Facebook Origami, Principle, Flinto.
Atomic.io
Неплохой инструмент, судя из видео на их официальном сайте, но мне не подошел, так как я искал десктопное приложение. Есть и таймлайны, и интерфейс приятный.
Преимущества:
Можно прототипировать прямо в нем, делать интерактивные анимации.
Недостатки:
Нет десктоп версии :(
Facebook Origami
Продукт компании “лицо-книга”. С порога нас встречает пугающий интерфейс из блоков со связями, как показывает нам превью на сайте. Можно делать очень не плохие анимации, правда, непонятно как. Не юзер-френдли интерфейс, иногда не понятно, как реализовать ту или иную анимацию. Людям, которые годами привыкли видеть панель слоев, будет не комфортно.
Преимущества:
по сравнению с остальными, их нет.
Недостатки:
Проект не развивается, сложный интерфейс.
Principle
Principle мне сразу понравился своим дизайном в виде нативного приложения, как и Sketch. Пройдя 5 туториалов с официального сайта, я уже уверенно делал всевозможные анимации и в Принципе был очень доволен. Все такой же привычный таймлайн, как и у AE, но без лишних функций. И все бы хорошо, НО как-то я решил сделать появление элемента из перспективы и, увы, функционала работы с 3D там не оказалось.
Преимущества:
Можно быстро научиться использовать софт на все 100%, живое превью, есть таймлайн, слои.
Недостатки:
Нет работы с 3D.
Flinto
По сути это один и тот же функционал, что и в Principle, только в разных интерпретациях интерфейса. Вместо привычного таймлайна у нас 2 экрана, начало анимации и конец. Но с возможностью работы с перспективой.
Преимущества:
Все тоже самое, что и в варианте выше, + 3D. Есть Sketch импорт
Недостатки:
Пока не выявил.
Ну и чтобы показать нагляднее, выбрал пару анимаций, сделанных в Principle. Так как с Flinto я познакомился уже чуть познее.
Живой прототип, заскриптована только звездочка, там вообще можно собрать все приложение целиком, но прийдется сделать много, много артбордов :)
Очень простая в реализации, все делается из квадратов со скруглением. Вставлял только бэкграунд.
Principle и Flinto пополнили список софта, который использует наша команда, первый мне пришелся ближе. Вообще, если вы — дизайнер, проектирующий сайты, приложения или интерфейс чертовой кофеварки, стоит работать в этом направлении. Это как верстать свой дизайн: у вас появятся новые идеи, как можно улучшить качество и прочувствовать в работе свой концепт.
Кстати, анимации этой работы было выполнены во Flinto.
