Flinto только что вышел на новый уровень со своим Дизайнером поведения
Как вы уже наверное знаете, я склоняюсь к определенному инструменту прототипирования… Да, это Flinto.
Уже некоторое время я являюсь защитником этого компаньона Sketch. Его относительно легко освоить с нуля, приятно использовать, он позволяет добиться действительно отличных результатов, оживляя Sketch-файлы. Но, до недавнего времени, и в сравнении с другими альтернативами типа Principle, в нем не хватало определенного функционала, который бы поставил его на равные с вышеупомянутым инструментом. А сейчас это изменилось.
И название этому дополнению - Designer. Behaviour Designer, т.е. Дизайнер поведения.
В этом коротком уроке из 2 частей я покажу, насколько неоценимой является эта новая возможность, и как она подняла позиции Flinto в экосистеме инструментов прототипирования.
Перед тем ,как начать, установите приложения и скачайте нужные исходники:
- Sketch
- Flinto
- Tutorial Assets (включаеь в себя Sketch-файл для импорта во Flinto)
- Шрифт San Francisco*
*Он находится в папке Tutorial Assets/Fonts.
Все приложения и исходники на месте? Отлично! Давайте сгенерируем годное поведение во Flinto.
Знакомство с Flinto
При открытии Flinto вы увидите экран-заставку. Можете его закрыть, затем сохранить новый документ, назвать его для краткого входа через плагины Sketch. Что-то вроде ‘Movie App’ отлично подойдет.
Нам не понадобится только что созданный экран, так как мы импортируем экраны из Sketch. Так что удалите его, нажав клавишу Delete или дважды кликнув на экране, и выбрав опцию Delete.
Из панели инспектора выберите размер экрана iPhone 7. Оставьте все параметры документа по умолчанию, кроме Background Color, его измените на белый #FFFFFF.
Перед переходом в Sketch, нужно установить плагин под Sketch. Из панели меню выберите Flinto Install Sketch Plugin…
Плагин установлен? Перейдем к импорту.
Импорт из Sketch
Перейдите в Sketch, и откройте ранее скачанный Sketch-файл.
Теперь нужно экспортировать экраны приложения (не Символы), так что выделите четыре экрана приложения (Launch, Home, Videos and Profile) с помощью Shift+клика.
Выберите Plugins Send to Flinto из панели меню или используйте горячие клавиши (Shift + Ctrl + Cmd + F).
В появившемся окне задайте масштаб (Scale) 200%, размер устройства (Device Size) - iPhone 7, и убедитесь, что выделена опция Export only selected artboards, затем нажмите Send.
В следующем окне проверьте, что выделен ранее сохраненный файл Flinto, и кликните Merge.
Вернитесь во Flinto, вы увидите, что все экраны проимпортировались в приложение, и из панели слоев (Layers) вы также убедитесь, что иерархия слоев и групп была перенесена из файла Sketch.
Выберите пункт меню Center Canvas (центр холста) и, используя горячие клавиши (Cmd +) и (Cmd -), убедитесь, что все скрины просматриваются и отцентрированы на канвасе.
Совет: Если (в панели слоев) названия экранов расположены не в той последовательности, что в Sketch, вы можете легко перетянуть их, выстроив в правильный порядок.
Экран Launch
Экран Launch - первый экран нашего приложения, и нужно, чтобы Flinto это знал. При выделенном экране отметьте галочкой опцию Home Screen (Домашний экран) в разделе Screen Properties в Инспекторе.
Совет: Теперь было бы неплохо активировать окно превью. Пока что там немного что можно просмотреть, но в нем вы сможете видеть изменения по мере внедрения. Кликните на иконку Preview в панели инструментов или используйте горячую клавишу (Cmd + P).
Также, если вы еще не сделали этого, скачайте приложение Flinto из iOS App Store. Мне нравится использовать функцию Preview (Cmd + P), и только потом запускать iOS-приложение. Но это на ваш выбор.
Сейчас мы добавим временной переход из экрана Launch в экран Home. Выберите Timer Link в инспекторе, и введите такие значения параметров:
- Timeout: 2000ms
- Target: Home
Затем кликните New Transition (Новый переход), чтобы войти в дизайнер переходов.
Совет: Вот две полезные горячие клавиши, которые пригодятся перед погружением в дизайнер переходов:
- Превью перехода: Пробел
- Превью перехода в замедленном варианте: Shift + пробел
Так как экран Launch будет затухать, меняясь на экран Home, нам нужно выровнять эти экраны друг относительно друга в определенном порядке. Это можно сделать просто с помощью опции Align Screens в панели инструментов, а затем из панели слоев выбрать иконку Launch и перетащить ее в верх списка.
Нажатием пробела вы отобразите… в целом, немного. Так что нужно анимировать некоторые элементы на экране Launch. Сделаем это. Сначала нажмите пробел, чтобы перейти в конец перехода.
Затем выберите App Logo в панели слоев, поверните на 180 градусов по оси Z, и при закрытой иконке замочка увеличьте ширину до 700.
При выделенной все еще иконке, используя вспомогательные линии, отцентрируйте ее на экране launch, затем уменьшите непрозрачность до 0%.
В панели Timing выберите Spring (UIKit), и введите настройки:
- Duration: 300ms
- Delay: 100ms
Все еще находясь в конце Transition, выберите слой Background, уменьшите непрозрачность до 0%. Мы также добавим более длительную задержку на слой фона, чтобы переход немного задерживался между ним и иконкой.
В панели Timing выберите Classic и введите параметры:
- Duration: 300ms
- Delay: 200ms
Примечание: Я бегло коснусь тайминга в этом уроке, но если вы хотите детальнее изучить режимы тайминга Spring и Classic, стоит почитать документацию Flinto.
И, наконец, из панели инструментов введите название нового перехода. Я выбрал ‘Loading’. Нажмите Save and Exit
Home
Итак, сначала нужно поместить панель вкладок внутрь области просмотра. Выделите группу Tab Bar, и тащите ее на канвас, пока она не расположится внутри области, очерченной вспомогательными линиями. Если вы не уверены, сел ли элемент на корректную позицию, проверьте координату Y в панели Properties (должно быть 607).
Теперь выделите группу Latest Videos, кликните на Scroll Group в панели инструментов или воспользуйтесь горячими клавишами (Option + Cmd + G).
Нам бы не помешал скролл элементов под строкой статуса, так что выделите маркеры изменения размера поверх группы, и тащите их вверх, пока они не примкнут к низу статусной строки.
И вот настало время воспользоваться функционалом Behaviour Designer во Flinto.
ыделите обе группы Tab Bar и Content в панели слоев, кликните на Behaviour в панели инструментов или же воспользуйтесь клавишами (Cmd + B).
В Behaviour Designer вы увидите группы, которые только что были выделены в панели слева, и вверху вы увидите начальное состояние нашего экрана. Если вы кликните на любой элемент на экране, то увидите, что сейчас они не редактируемы, что правильно, поэтому нужно добавить новое состояние (State) на наш экран, чтобы привнести какое-то движение. Нажмите на иконку с плюсом (+) рядом с Initial State и переименуйте его.
При выделенном новом состоянии потяните панель вкладок (Tab Bar) вниз, и немного за пределы области экрана.
В панели Timing введите следующие параметры:
- Spring (UIKit)
- Damping (сглаживание): 1
- Velocity (скорость): 0
- Duration (длительность): 700ms
Будучи все еще на новом состоянии, выделите текстовый слой из группы Content, и потяните его за область просмотра. С помощью манипуляторов размера (удерживая Shift для соблюдения пропорций), уменьшите ширину до примерно 180, уменьшите непрозрачность до 10%.
Введите те же параметры Timing, что и для панели вкладок. И, наконец, выделите слой Banner...
…и в панели инспектора задайте для параметра Rotation значение 100 на оси Y, непрозрачность 0%.
Чтобы не усложнять этот урок, используйте те же настройки тайминга, как и для других элементов.
Нажав пробел, вы сможете увидеть свои анимации во всей красе. Выглядит неплохо!
Но перед тем, как вы нажмете эту грозную кнопку Save and Exit (сохранить и выйти) вверху, нужно помнить, что на данный момент нет способа инициации этих анимаций внутри нашего прототипа. Нужно анимировать эти элементы на основе позиции скролла.
Давайте это исправим.
При выделенном Initial State, выделите Scroll Group в панели слоев, и используйте горячую клавишу (F) для создания ссылки.
Перетяните линию ссылки (Link Line) из группы скролла к новому состоянию, которое мы создали...
… и в появившемся окне выберите Scroll Gesture (жест скролла), кликните Done.
Давайте определим диапазон скролла - как далеко пользователю нужно скроллить перед тем, как активируется новое состояние. При выделенной группе scroll вы увидите фиолетовую стрелку, которая подсвечивает текущий диапазон.
Потяните ее вниз (или измените параметр End в панели Gestures) примерно до 135.
Активируйте окно превью (Cmd + P), чтобы увидеть поведения в действии. Выглядит неплохо?
Выберите подходящее название для этого поведения, и кликните Save and Exit.
Во второй части мы погрузимся более глубоко в Поведения, и закончим работу над оставшимися двумя экранами нашего приложения.
Перевод статьи Marc Andrew
Топ коментарі (0)