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

 

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

Автор: admin от 13-01-2018, 12:40, посмотрело: 32

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


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

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



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



Тест кода



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



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

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



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



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

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



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



Анимация в мобильных приложениях. Тестируем Kite compositor
и как его собрал Xcode



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

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



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



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

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



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



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

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



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



Поищем еще



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



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

Источник: Хабрахабр

Категория: Веб-разработка, Game Development, iOS

Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.

Добавление комментария

Имя:*
E-Mail:
Комментарий:
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Введите два слова, показанных на изображении: *