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

В этом тексте я не буду говорить о таких очевидных вещах, как «нужно сначала распланировать свою анимацию» и т.д. Описанные ниже принципы действительно помогают не только мне, поэтому я хочу поделиться с вами и надеюсь получить фидбек.

Кратко о том, как работает Principle

В первую очередь, я хочу объяснить, как работает самый простой путь анимации в Principle (о drivers говорить не буду, да и эту часть можно пропустить, если вы знаете, что и как):

1. у вас есть два арт-борда;
2. они как-то отличаются друг от друга;
3. Principle творит магию и превращает один экран в другой со стандартной скоростью и кривой анимации, которые вы можете изменять.

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

Например, чтобы превратить круг в квадрат, нам нужно:

1. сделать два арт-борда: на одном нарисовать круг (квадрат со скругленными краями), а на другом — простой квадрат, и удостовериться, что имена объектов совпадают;
2. объединить эти арт-борды, например, автоматическими переходами туда и обратно;
3. ну вот – ваш круг трансформируется в квадрат и обратно. Теперь у вас есть возможность настроить скорость и кривую анимации на специальной панели.

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

Все эти манипуляции можно провести и с любыми другими характеристиками объекта. Например: прозрачность, размер, расположение, цвет и другие.

Экран, в котором меняются различные настройки.

И еще одна важная вещь: чтобы гладко что-то анимировать, нужно подготовить движение на предыдущем экране. Опять же, объект должен присутствовать на обоих экранах (даже если он невидим на одном из них), а разница между ними будет анимирована. Позже я приведу пример.

Принцип 1: не использовать «импорт из Sketch»

Итак, вспомним все вышесказанное. Что нам нужно сделать, чтобы, например, анимировать открытие компактного плеера Apple Music при нажатии на трек?

Как минимум, какой-нибудь симпатичный бесплатный UI-кит iOS для Sketch. Я предпочитаю этот.

Арт-борд с компактным плеером Apple Music из UI-кита.

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

Судя по моему опыту, большинство пользователей нажимает кнопку «Импорт из Sketch». И после этого, как правило, пытаются упорядочить и заставить работать все слои, которые появились у них в Principle.

Хаос из слоев после импорта из Sketch.

Я предлагаю не использовать импорт из Sketch. По крайней мере, пока вы не знаете точно, зачем он вам нужен или не знакомы с документацией Principle по части импорта.

Как по мне, более простым способом будет распланировать свою анимацию и экспортировать из Sketch только необходимые группы как *.png. Даже если сделать это неправильно, их всегда можно заменить или обновить.

Например, чтобы анимировать простой скролл лендинга, нам не нужно импортировать все его составляющие. Мы можем экспортировать только один *.png в нужном качестве, который будет легко заанимировать.

Чтобы анимировать открытие плеера Apple Music, нам не нужны все составляющие экрана. Нам нужны только следующие png-шки:

• навигационная панель с табами (за которой мы спрячем плеер);
• весь остальной экран со списком песен, но без таббара и плеера;
• плеер.

Всего три импортированных png-шки.

Может, этот плеер не самый удачный и слишком простой пример, но моя задача — продемонстрировать подход. К тому же, я хочу, чтобы у каждого была возможность попробовать, поэтому привожу пример на базе бесплатного и доступного ui-кита, скорее всего известного пользователям Мака ОС iOS 10.

Для того, чтобы все это заанимировать, надо:

1. создать арт-борд с треклистом, таббаром и плеером в том положении, в котором они должны быть;
2. сделать дубликат арт-борда;
3. спрятать плеер на первом арт-борде за таббаром (чтобы подготовить его появление, как мы говорили раньше. Иначе, если бы плеера просто не было на первом арт-борде, на анимации он появлялся бы мгновенно, и мы бы не могли на это повлиять).

Условия, которые нам надо соблюсти:

• одинаковые имена одинаковых слоев на разных арт-бордах;
• правильный порядок слоев — плеер должен быть между таббаром и фоном. И порядок не должен меняться, иначе вид получится не такой, как мы хотели;
• все слои должны существовать на обоих арт-бордах. Таким образом, мы сможем анимировать разницу в их расположении и свойствах. (Помните, мы говорили, что базовая анимация в Principle основывается на разнице свойств слоев на арт-бордах).

Настройки экрана, на которых плеер появляется и исчезает.

Теперь, если мы запустим нашу анимацию (не забудьте связать арт-борды), плеер изменит свою позицию с первоначальной на первом арт-борде, на свою позицию на втором. Все, что нам остается сделать, это настроить тайминг. И я бы добавил немного прозрачности спрятанному плееру.

Есть еще метод: для объединения сложных групп при импорте из Sketch, добавляя ‘*’ к имени группы. Но его стоит использовать в случаях, когда анимация сложная и необходимо регулярно обновлять часто изменяющиеся объекты повторным импортом.

Принцип 2: Это не настоящее приложение, это фейк

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

Это все равно, что вам надо снять фильм, но вы пытаетесь сделать сценарий реальностью.

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

Принцип 3: Одно действие = один экран

Это просто.

Не пытайтесь сделать из анимации прототип InVision. Просто распланируйте последовательность действий, как сценарий, и снимите собственный фильм. Это сэкономит кучу времени и сделает жизнь проще.

Простая последовательность экранов, которую я использовал в Louder.me (сейчас в бете).

P.S.: Это моя первая статья и я надеюсь, она вам поможет и сэкономит время при работе с анимацией. А мне очень поможет ваш фидбек, поэтому не стесняйтесь писать мне на Facebook.

Также статья доступна на английском языке на Medium.