Еще одним таким стимулом стал релиз бета-версии Atomic.io, который оказался удивительно похожим со Sketch в отношении реализуемости интересных интерфейсных взаимодействий.

 

Sketch и Atomic.io

 

В этом посте мы рассмотрим пример анимации в прототипе Atomic, используя нарисованные в Sketch исходники. Вот пример анимации, о которой речь пойдет далее.

 

Еще пять инструментов для прототипирования мобильных приложений в Sketch.

 

Создание простой анимации экрана загрузки в Sketch

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

Откройте Sketch и нажмите “A”, выберите iPhone 6 в инспекторе. Нужно задать синий фон (#4494c2 подойдет), но мы будем анимировать артборд позже в Atomic, так что фон артбодра в данном случае не подойдет. Поэтому рисуем прямоугольник (“R”) размером с артборд и добавляем заливку синим в качестве имитации фона.

Удалите границы, и повторите этот шаг еще раз с белым цветом заливки (оставьте его под синим).

Нажмите “T”, чтобы напечатать текст (любой цвет, любой размер – это неважно), и опять переместите слой под все остальные слои. Назовите его “App”, это для имитации анимации гипотетического приложения после скрина загрузки.

 

Настройка артборда в Sketch.
Настройка артборда в Sketch.

 

Рисуем логотип

Снова нажмите“R”, удалите границы и создайте белый прямоугольник размером 50x16px и параметром Rotate (вращение) на -45градусов. Затем продублируйте его (функция Duplicate – клавиши command+d) и отразите по горизонтали с помощью соответствующей кнопки (следующая после Rotate). Должно получиться так:

 

Наша первая фигура
Наша первая фигура

 

Удерживайте Shift, пока выделяете оба прямоугольника одновременно, и перейдем к инструментам из верхнего меню. Понадобятся следующие инструменты в таком порядке:

  1. Union (объединить)
  2. Flatten (сгладить)
  3. Edit (редактировать)

После нажатия на Edit наши прямоугольники станут единой сглаженной векторной фигурой, и мы сможем редактировать ее точки. Опять удерживая Shift, выделите три точки (внизу они отмечены черным) и в инспекторе измените параметр Corners (углы) на 5. Мы почти закончили.

 

1441951087sketch-atomic-4

 

Продублируйте, отразите, и разместите слои так, чтобы получилось следующее:

 

Финализация нашей фигуры в Sketch
Финализация нашей фигуры в Sketch

 

Копирование слоев из Sketch в Atomic.io

С файлом .sketch покончено. Откройте браузер и перейдите на Atomic.io. Залогиньтесь (или зарегистрируйтесь, если вы раньше им не пользовались), создайте новый проект (“New Project”) и затем кликните “New Design”; первым делом надо выделить вкладку “Pages” (слева) и затем посмотреть на противоположную сторону экрана, выбрать iPhone 6 Portrait Preset.

 

Создание артборда в Atomic
Создание артборда в Atomic

 

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

 

Копирование слоев в Atomic
Копирование слоев в Atomic

 

Настройка состояния Stage в Atomic

Давайте разместим все слои на нужные места – так сказать, “настроим состояние”. Наш текстовый слой “App” будет двигаться справа, так что пока что он нам вообще не нужен. Задайте этому слою положение по оси “X” на “373px”, чтобы он появлялся извне.
То же самое проделайте с белым фоном. Убедитесь, что “App” введено по вертикали.

Теперь нужно переключиться на панель слоев (Layers Panel) перед тем, как выделить индивидуальный слой. Вернитесь на Pages, кликните на меню гамбургер, и выберите Duplicate. Проделайте то же самое так, чтобы было три версии одного и того же экрана. Теперь начнем редактировать первый экран.

 

Одна страница “Page” эквивалентна одному состоянию анимации

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

 

Настройка шага анимации в Atomic
Настройка шага анимации в Atomic

 

Страница два не требует никаких изменений.

Перейдите на страницу три и выделите все слои сразу, удерживая Shift, а затем перетяните слои так, чтобы белый фон полностью заполнил холст, а синий фон (+логотип) теперь будет вне экрана. Так как все слои конвертированы в изображения при копировании из Sketch, текстовый слой “App” потерял свою авто-ширину. Вам нужно передвинуть этот слой вручную, так чтобы он был четко посередине.

Создание разных шагов анимации:

 

1441951113sketch-atomic-9

 

Анимация скринов

Нажмите “H”, чтобы активировать инструмент Hotspot (точка доступа) и нарисуйте ее (также, как бы вы рисовали обычный прямоугольник), чтобы по размерам она была как артборд. Справа появится раздел “Interaction” (взаимодействие), и там нужно выставить следующие настройки:

  1. On: Click or Tap
  2. Go To: Page 2
  3. Animation: Elastic: Ease in-out
  4. Duration: 1000ms
  5. Delay: 0ms

Page 2 – создайте другую точку доступа с такими параметрами:

  1. On: Click or Tap
  2. Go To: Page 3
  3. Animation: Expo: Ease in-out
  4. Duration: 1000ms
  5. Delay: 0ms

 

Заключение

Готовы показать миру результат своих трудов? Нажмите на кнопку “Preview” (правый нижний угол), чтобы начать тестировать анимацию. Кликните на первую точку доступа в любом месте артборда, чтобы перейти на следующий скрин. Нажмите “Edit”, чтобы вернуться назад в редактор и затем “Share”, когда добьетесь желаемого результата.

 

1441951118sketch-atomic-10

Мы не изучили множество инструментов для дизайна в Atomic.io, так как сегодня воспользовались приложением Sketch, но вы наверняка заметили явное сходство между двумя этими инструментами. Несмотря на тот факт, что создавались они под разные цели, сходства делают их отличным тандемом для создания красивых анимаций интерфейса.

 

Перевод статьи sitepoint.com автора Daniel Schwarz.