Flinto только что вышел на новый уровень благодаря Дизайнеру поведения

Во второй части этого урока мы поработаем над последними двумя экранами нашего простого приложения, окунемся глубже в возможности потрясающего инструмента внутри Flinto — Дизайнера поведений.

Если вы пропустили первую часть, она здесь.

Сначала создадим ссылку из экрана Home на экран Video. Нажмите (D), чтобы нарисовать ссылку вокруг иконки Index/Videos, обеспечив себе хорошую область касания.

атем перетащите линию ссылки через экран Videos, выберите переход Fade In Transition из появившегося окна, и нажмите Done.

Учимся работать в Flinto: фото номер -

В панели слоев нужно придерживаться порядка, так что перетащите только что созданный слой Link за слой самой иконки.

Учимся работать в Flinto: фото номер - 2

Экран Videos

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

Выделите группу Video Scroll в панели слоев, затем нажмите на иконку Scroll Group в панели инструментов или используйте горячие клавиши (Option + Cmd + G), чтобы обернуть все это в новую группу скролла.

Учимся работать в Flinto: фото номер - 3

Flinto — умный инструмент, берет во внимание направление элемента дизайна и задает корректную ось для скролла, в нашем случае это горизонтальная ось.

Учимся работать в Flinto: фото номер - 4

Конечно, если вы нажмете (Cmd + P), вы увидите, что группа скролла урезается с левого края, и недостаточно свободного места по правому краю, так что сейчас мы это исправим. Потяните левые регуляторы скролла группы влево, пока они не примкнут к краю экрана.

Учимся работать в Flinto: фото номер - 5

Затем для правой стороны группы потяните регуляторы скролла вправо, или просто увеличьте ширину до 870 в настройках Group Options.

Учимся работать в Flinto: фото номер - 6

Быстрый превью (Cmd + P) покажет, что наша группа скролла сейчас куда лучше выглядит.

Еще кое-что перед тем, как двигаться дальше. Потяните регуляторы скролла сверху группы вверх на примерно 15 точек. Вы поймете, зачем это нужно, когда мы перейдем на следующий шаг.

Учимся работать в Flinto: фото номер - 7

Давайте немного оживим эти миниатюры видео, вдохнув в них движение и интерактивность.

Из панели слоев выберите первую группу Video Preview, кликните на кнопку Behaviour в панели инструментов или воспользуйтесь горячей клавишей (Cmd + B).

Учимся работать в Flinto: фото номер - 8

И еще раз привет, Behaviour Designer!

Учимся работать в Flinto: фото номер - 9

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

Сначала кликните на иконке с плюсом (+) рядом с Initial State, чтобы создать новое состояние и дважды кликните на его названии, чтобы переименовать.

Учимся работать в Flinto: фото номер - 10

Затем, когда выделено новое состояние, выделите слой Title в панели слоев, и уменьшите непрозрачность до 0%.

Учимся работать в Flinto: фото номер - 11

Затем настройте параметры Timing в инспекторе:

  • Damping 1
  • Velocity 0
  • Duration 350ms

Учимся работать в Flinto: фото номер - 12

Далее выделите слой Thumbnail, при закрытом замочке (чтобы соблюдать пропорции), увеличьте ширину примерно до 135.

Учимся работать в Flinto: фото номер - 13

Теперь миниатюра будет немного не по центру, так что немного сдвиньте ее до тех пор, пока не появится красная линия, показывающая, что она снова по центру.

Учимся работать в Flinto: фото номер - 14

Пока Thumbnail все еще выделен, введите 10 в поле координаты Y, чтобы немного сместить вниз.

Учимся работать в Flinto: фото номер - 15

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

Давайте поэкспериментируем с настройками тайминга, чтобы немного оживить!

При выделенном слое Thumbnail выберите Spring(UIKit) из панели Timing, затем настройте параметры так:

  • Damping 0.5
  • Velocity 0
  • Duration 350ms

Учимся работать в Flinto: фото номер - 16

Так-то лучше. Ну что ж, настало время прилинковать эти состояния.

При выделенном Thumbnail в Initial State нажмите (F), чтобы создать ссылку, перетяните лини. Ссылки через новое состояние, созданное ранее, выберите опцию Tap и нажмите Done.

Учимся работать в Flinto: фото номер - 17

Затем переключитесь на новый State, нажмите снова F и потяните эту линию ссылки через Initial State, выбрав еще раз опцию Tap.

Учимся работать в Flinto: фото номер - 18

Выберите название для нового поведения. Я назвал его просто Thumb Enlarge (увеличение миниатюры), и затем кликните Save & Exit.

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

С помощью (Cmd + клик) выделите другую группу Video Preview в панели слоев, и в инспекторе кликните на Add Behaviour, затем выберите поведение, которое вы создали ранее. Ухты!

Учимся работать в Flinto: фото номер - 19

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

Учимся работать в Flinto: фото номер - 20

Нажмите (Cmd + P), чтобы быстро просмотреть результат. На вид хорошо!

Ну что ж, перейдем к последнему экрану.

Перед этим нажмите (D), чтобы нарисовать ссылку вокруг иконки профиля, потяните линию ссылке через экран Profile, выберите Fade In и кликните Done.

Учимся работать в Flinto: фото номер - 21

Profile

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

Учимся работать в Flinto: фото номер - 22

Из группы Content выберите Profile Details, Separator и Toggle Settings…

Учимся работать в Flinto: фото номер - 23

…и нажмите (Option + Cmd + G), чтобы создать Scroll Group вокруг этих групп/слоев.

Учимся работать в Flinto: фото номер - 24

Потяните регуляторы скролла вверху и внизу, пока не получится нечто такое…

Учимся работать в Flinto: фото номер - 25

Затем выделите группы панели навигации (Tab Bar) и контента (Content), нажмите (Cmd + B), чтобы создать новое поведение (Behavior).

Учимся работать в Flinto: фото номер - 26

В дизайнере поведений кликните на плюс (+), чтобы создать новое состояние, переименуйте его.

Учимся работать в Flinto: фото номер - 27

Выделите это новое состояние, перетяните Tab Bar вниз, за область экрана.

Учимся работать в Flinto: фото номер - 28

 

Затем выделите слой Profile Background (фон профиля) и в инспекторе уменьшите высоту до 90.

Учимся работать в Flinto: фото номер - 29

 

Далее выделите Profile Avatar и уменьшите ширину и высоту до 70. Удерживая (Shift) потяните Avatar вверх, пока он не станет выровнен на слое Background.

Учимся работать в Flinto: фото номер - 30

При выделенном начальном состоянии (Initial State) выделите группу скролла (Scroll Group) в панели слоев и нажмите (F), чтобы нарисовать ссылку. Перетяните линию ссылки через новое состояние и выберите Scroll.

Учимся работать в Flinto: фото номер - 31

Как и раньше, давайте зададим диапазон, как далеко нужно скроллить пользователю перед тем, как активируется новое состояние.

При выделенной Scroll Group потяните фиолетовую стрелку вниз, пока не получится нечто такое…

Учимся работать в Flinto: фото номер - 32

Нажмите (Cmd + P) для запуска превью.

Анимации могут выглядеть немного чересчур дергаными, так что выделите элементы Tab Bar, Profile Avatar и Profile Background с помощью (Cmd + клик) и настройте параметры тайминга (Timing) таким образом:

  • Spring(UIKit)
  • Damping 0.5
  • Velocity 0
  • Duration 700ms
  • Delay 100ms

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

Ну что ж, задайте название новому поведению и нажмите Save & Exit.

Возьмемся за переключатели

В панели слоев выделите первый Toggle Switch (Возможно, придется пройтись по нескольким группам, пока его отыщите).

Учимся работать в Flinto: фото номер - 33

Затем нажмите (Cmd + B) для создания нового поведения. В дизайнере поведений кликните (+), чтобы добавить новое состояние (State), переименуйте его.

Учимся работать в Flinto: фото номер - 34

Выделив новое состояние, выберите слой Switch из панели слоев, удерживая (Shift), потяните слой влево.

Учимся работать в Flinto: фото номер - 35

Настройки Timing могут быть такими:

  • Spring (UIKit)
  • Damping 0.5
  • Velocity 0
  • Duration 500ms
  • Delay 0

В панели слоев выберите слой On из группы Background, и уменьшите непрозрачность до 0%.

Учимся работать в Flinto: фото номер - 36

Нажмите (Space), чтобы увидеть анимацию. Выглядит хорошо! Давайте прилинкуем эти состояния?

Выделите слой Switch, выделите Initial State, нажмите (F). Потяните линию ссылки (Link Line) к новому состоянию и выберите Tap.

Учимся работать в Flinto: фото номер - 37

Затем выделите новое состояние, создайте новую ссылку и потяните линию ссылки назад к начальному состоянию.

Учимся работать в Flinto: фото номер - 38

Назовите это поведение и нажмите Save & Exit.

Конечно, нам нужно применить это новое состояние ко всем переключателям, так что используйте все шаги, которые я уже описал ранее для остальных групп Toggle Switch в панели слоев (Cmd + Click), а затем добавьте новое поведение к этим группам.

Учимся работать в Flinto: фото номер - 39

Вот мы почти и закончили.

Не хватает нескольких ссылок на панели вкладок, без них навигация в прототипе будет недостаточной.

Нарисуйте ссылки (D) и подключите ваши экраны к ним корректно, используя затеняющий переход (Fade In Transition), который мы уже применяли ранее. У вас должно получиться что-то такое…

Учимся работать в Flinto: фото номер - 40

Вот и все. Теперь вы вполне можете создавать свои собственные прототипы во Flinto!

 

Учимся работать с Behaviour Designer (Дизайнер поведений) во Flinto: Часть 1