В первую очередь, я хочу объяснить, как работает самый простой путь анимации в Principle (о drivers говорить не буду, да и эту часть можно пропустить, если вы знаете, что и как):
Конечно, для этого нужно соблюдать некоторые условия. Например, для работы анимации необходимо, чтобы объект присутствовал на обоих арт-бордах и носил одинаковое название, тогда изменения в его свойствах станут доступны для анимирования. В противном случае, объекты просто будут мгновенно появляться и исчезать.
Например, чтобы превратить круг в квадрат, нам нужно:
Экран с настройками, которые позволят превратить круг в квадрат и обратно.
Все эти манипуляции можно провести и с любыми другими характеристиками объекта. Например: прозрачность, размер, расположение, цвет и другие.
Экран, в котором меняются различные настройки.
И еще одна важная вещь: чтобы гладко что-то анимировать, нужно подготовить движение на предыдущем экране. Опять же, объект должен присутствовать на обоих экранах (даже если он невидим на одном из них), а разница между ними будет анимирована. Позже я приведу пример.
Итак, вспомним все вышесказанное. Что нам нужно сделать, чтобы, например, анимировать открытие компактного плеера Apple Music при нажатии на трек?
Как минимум, какой-нибудь симпатичный бесплатный UI-кит iOS для Sketch. Я предпочитаю этот.
Арт-борд с компактным плеером Apple Music из UI-кита.
Что теперь с этим делать? Для начала, экран с плеером можно вынести на отдельную страницу, чтобы нам не мешали остальные экраны. Сейчас мы переходим к самому интересному. Какое следующее действие люди совершают чаще всего?
Судя по моему опыту, большинство пользователей нажимает кнопку «Импорт из Sketch». И после этого, как правило, пытаются упорядочить и заставить работать все слои, которые появились у них в Principle.
Хаос из слоев после импорта из Sketch.
Я предлагаю не использовать импорт из Sketch. По крайней мере, пока вы не знаете точно, зачем он вам нужен или не знакомы с документацией Principle по части импорта.
Как по мне, более простым способом будет распланировать свою анимацию и экспортировать из Sketch только необходимые группы как *.png. Даже если сделать это неправильно, их всегда можно заменить или обновить.
Например, чтобы анимировать простой скролл лендинга, нам не нужно импортировать все его составляющие. Мы можем экспортировать только один *.png в нужном качестве, который будет легко заанимировать.
Чтобы анимировать открытие плеера Apple Music, нам не нужны все составляющие экрана. Нам нужны только следующие png-шки:
Всего три импортированных png-шки.
Может, этот плеер не самый удачный и слишком простой пример, но моя задача — продемонстрировать подход. К тому же, я хочу, чтобы у каждого была возможность попробовать, поэтому привожу пример на базе бесплатного и доступного ui-кита, скорее всего известного пользователям Мака ОС iOS 10.
Для того, чтобы все это заанимировать, надо:
Условия, которые нам надо соблюсти:
Настройки экрана, на которых плеер появляется и исчезает.
Теперь, если мы запустим нашу анимацию (не забудьте связать арт-борды), плеер изменит свою позицию с первоначальной на первом арт-борде, на свою позицию на втором. Все, что нам остается сделать, это настроить тайминг. И я бы добавил немного прозрачности спрятанному плееру.
Есть еще метод: для объединения сложных групп при импорте из Sketch, добавляя ‘*’ к имени группы. Но его стоит использовать в случаях, когда анимация сложная и необходимо регулярно обновлять часто изменяющиеся объекты повторным импортом.
Моё второе наблюдение: люди часто пытаются сделать полноценный прототип из своего проекта, когда всё, что им нужно – это простое видео, объясняющее поведение приложения в той или иной ситуации для членов команды, менеджмента, пользователей.
Это все равно, что вам надо снять фильм, но вы пытаетесь сделать сценарий реальностью.
Просто постарайтесь сделать анимацию как можно проще. Пусть только видео кажется реальным. Не всегда вам нужны кликабельные триггеры именно на тех местах, где расположены небольшие кнопки. В большинстве случаев можно сделать кликабельным весь экран и скрыть курсор. Это касается и доступа всех функций приложения с одного первого арт-борда. И тут мы подходим к следующему принципу.
Это просто.
Не пытайтесь сделать из анимации прототип InVision. Просто распланируйте последовательность действий, как сценарий, и снимите собственный фильм. Это сэкономит кучу времени и сделает жизнь проще.
Простая последовательность экранов, которую я использовал в Louder.me (сейчас в бете).
P.S.: Это моя первая статья и я надеюсь, она вам поможет и сэкономит время при работе с анимацией. А мне очень поможет ваш фидбек, поэтому не стесняйтесь писать мне на Facebook.
Также статья доступна на английском языке на Medium.
Як фрілансеру перейти на новий рівень і відкрити власну студію (та чи треба це робити)
Діджитал айдентика та UX/UI редизайн платформи SmartTender
UX Case Study: RURA – онлайн-платформа для розвитку сільського туризму
Навіщо дизайнерові навчатися каліграфії
Перший дизайнер WhatsApp: більш конкурентними стають продукти, які мають етичне ядро
UX-досвід додатку Sense від Альфа-Банку