Последняя версия Framer действительно подводит черту под спором “должен ли дизайнер кодить” (опять же, это мое личное мнение). Никогда еще визуальным дизайнерам не представлялось лучшей возможности замарать руки в коде. В этой версии разработчики Framer реализовали идеальное сочетание дизайна и кода. Если вы опытный пользователь, и хотите вручную кодить все ваши взаимодействия, можете смело использовать Framer. Если вы - человек с опытом исключительно в визуальном дизайне и предпочитаете разрабатывать интерфейсы больше с визуальной стороны, вам также идеально подойдет Framer. Хотите освоить нечто среднее между этими двумя подходами? Framer дает и такую возможность. В этом кратком уроке я покажу, как взять пару экранов интерфейса из Sketch и импортировать их в последнюю версию Framer. Полезные советы и трюки по работе с Framer станут идеальным введением в работу этого инструмента для новичков. Надеюсь, вы приступили к изучению этого урока с верой в то, что “Этот Framer уже не так страшен, как предыдущий”. Этого и добивались его разработчики. Скачайте все три ресурса:
- Sketch
- Framer
- Файл Sketch (вам он понадобится для импорта во Framer)
Скачали? Установили? Приступим! Запустите Sketch и откройте файл, который вы только что скачали. Его нужно открыть, чтобы Framer мог обратиться к нему для импорта.
Посмотрим на экраны в Sketch
Если вы посмотрите на файл Sketch, увидите 2 простеньких экрана. Один для Checkout (оплаты), а другой - для подтверждения заказа (Confirmation), который появляется, как только пользователь нажимает кнопку ‘Buy Now’. Все чертовски просто, чтобы не заблудиться в волшебном мире Framer, изучая его возможности. Примечание: дам пару советов при создании Sketch-файлов:
- Группируйте каждый слой, который хотите импортировать во Framer, иначе они будут проигнорированы. Да, даже если у вас всего один слой с картинкой, который надо анимировать во Framer, все равно сгруппируйте его с помощью Cmd + G
- Используйте CamelCase для названия групп (например, thisIsMyGroup). Это требование стандарта нейминга в CoffeeScript - на этом языке программирования основан Framer. Помните, что названия групп в Sketch станут переменными во Framer, так что должны присутствовать логика и порядок.
- Если у вас есть группа слоев в Sketch, которую вы не собираетесь анимировать или включать во взаимодействие в Framer, ее можно просто сгладить (Flatten), добавив звездочку (*) к концу названия группы (например, thisIsMyGroup*)
- Попробуйте задать каждой группе уникальное имя. Так будет проще ссылаться на группы внутри Framer, а также сможете избежать использования бессмысленных названий вроде myGroup, myGroup1, myGroup2 и т.д… И хотя не всегда этот совет практичен, если вы используете символы в Sketch, будут случаи, когда придется следовать конвенции по именам Framer, нравится это вам или нет.
Перейдем во Framer
При открытии приложения вы видите 4 главные области: Панель инструментов наверху (ничего лишнего, и все под рукой) содержит минимум кнопок, и для этого урока нам понадобится всего парочку. А именно:
- Insert (здесь живет магия Auto-Code)
- Import (или используйте горячие клавиши Cmd + I и Shift + Cmd + I для повторного импорта)
- Reload (или используйте горячие клавиши Cmd + R)
Слева у вас редактор кода, где мы сегодня немного покодим вручную, а также воспользуемся потрясающим нововведением - Auto-Code. центральной колонке расположен раздел, выполняющий 2 функции. Большую часть времени он будет отображать экраны, и импортированные из Sketch слои, но иногда, при использовании Auto-Code, здесь будут отображаться свойства слоя, над которым вы работаете, чтобы можно было редактировать контент. С правой стороны находится раздел превью, где вы можете просмотреть создаваемый прототип на разных устройствах. Если вы поклонник iPhone 6s в версии Rose Gold, выберите эту модель и тестируйте ее! Примечание: дизайн, созданный в Sketch, изначально был для iPhone 6s, так что можете оставить устройство, выбранное по умолчанию.
Импорт файла Sketch
Кликните кнопку Import на панели инструментов или воспользуйтесь горячими клавишами Cmd + I для вызова окна Import. 
Order_ConfirmationA = Framer.Importer.load("imported/Order Confirmation@2x")
Замените переменную на:
sketch = Framer.Importer.load("imported/Order Confirmation@2x")
Что просто упрощает ссылание на ваш проект Framer. Мне также нравится настраивать глобальные переменные вверху моих файлов Framer. Так я могу немного лучше управлять кодом, меньше печатать (что всегда приятно). Вставьте это в файл Framer:
{item, buyNowBar, Confirmation, backgroundImage, successBadge, message} = sketch
Так вы ссылаетесь на все слои Sketch, для которых мы реализуем определенное взаимодействие внутри Framer. Теперь, вместо того, чтобы печатать так:
sketch.buyNowBar.onClick (event, layer) -> sketch.Confirmation.states.switch("fadeIn")
…Мы можем просто использовать…
buyNowBar.onClick (event, layer) -> Confirmation.states.switch("fadeIn")
Давайте я покажу видео-демо того, что мы достигнем в этом коротком уроке… Видео примеры не совсем ваш вариант? Без проблем. Поиграйтесь с готовым прототипом здесь http://share.framerjs.com/le526ymo5hsk Парочка анимаций на экране ‘Checkout’ и еще несколько на экране ‘Confirmation’ по событию click. Вуаля!
Задайте настройки по умолчанию
Из просмотра видео-примера вы увидите, что есть несколько элементов вне канваса, которые потом проанимируются, а также выполняется их перенос с одного экрана на другой. Так что нужно выполнить некоторые настройки для этих слоев, чтобы можно было создать анимации из видео-примера. Давайте сделаем так. Вставьте эти настройки слоев (по умолчанию) для тех слоев, с которыми мы будем работать:
# Item item.scale = 0 item.opacity = 0 # Buy Now Bar buyNowBar.y = 1334 buyNowBar.opacity = 0 # Confirmation Screen Confirmation.x = 0 Confirmation.opacity = 0 # Background Image backgroundImage.scale = 1.5 backgroundImage.blur = 20 # Success Badge successBadge.y = -900 successBadge.opacity = 0 # Message message.scale = 0 message.opacity = 0
Чтобы вы понимали, что здесь происходит (например, со слоем item). Вы видите, что мы присвоили имя переменной...
item
..а затем добавили точку, которая является соединителем со свойством, которое хотим использовать...
scale
…и затем присвоили ему значение...
0
“Но теперь я не могу видеть изображение рубашки?” Да. И тут мы воспользуемся потрясающей опцией ‘Auto-Code’...
Настройка состояний в Auto-Code
Перед тем, как идти дальше, хочу упомянуть, что, несмотря на новую опцию Auto-Code, иногда все еще требуется немного ручного кода. Гораздо меньше, чем нужно было в предыдущей версии Framer, но все еще достаточно, чтобы помучиться. Поверьте, даже если вы только-только начинаете программировать, Framer со своим автозаполнением и невероятно детальной документацией окажется гораздо проще для освоения, чем вы можете себе представить. Я уверен, что в будущих обновлениях Auto-Code станет еще удобнее, чем сейчас, так что ситуация с кодом будет только улучшаться.
Состояния item
Давайте настроим некоторые состояния для слоя item, и снова переместим его на изображение. ерейдите в меню Insert на панели инструментов вверху и выберите State > item. 
- Opacity: 1.00
- Scale: 1.00
Представляете, рубашка снова на месте! Она снова появилась на экране устройства. Но подождите! Когда вы настроили свойства, а затем обратно перешли в редактор кода, слой куда-то испарился?! Это не проблема. Ваш слой все еще там, в только что добавленном вами состоянии. Просто кликните на иконку Edit слева от кода. Видите, слой item снова на экране устройства? 
item.states.add scaleUp: scale: 1.00 opacity: 1.00
Примечание: отступы используются для определения структуры языка, используемого во Framer (это CoffeeScript), так что не забывайте корректно расставлять доступы, или код не будет работать корректно. Чтобы активировать анимацию на слое item (рубашка), вставьте этот код под блоком кода states:
item.states.next()
Хвала богам прототипирования, наш слой ожил! Используйте Cmd + R, чтобы повторно посмотреть на анимацию в деле. Вы можете использовать альтернативный синтаксис, как, например:
item.states.switch("scaleUp")
…но next() в конкретно этой ситуации работает уместнее. Теперь у вас должен быть следующий фрагмент:
item.states.add scaleUp: scale: 1.00 opacity: 1.00 item.states.next()
Как я ранее упоминал, большая часть кода создана с помощью Auto-Code (что серьезно экономит время по сравнению с предыдущими версиями Framer), и вам нужно просто время от времени вручную вставлять нужные цифры. Приступим к следующей анимации на экране (посмотрите на видео для справок, если нужно). Слой buyNowBar будет выплывать с нижнего края экрана. Как мы уже делали с предыдущим слоем, кликните на кнопку Insert на панели инструментов, и выберите State > buyNowBar. В панели Properties вставьте следующие настройки…
- Y: 990 (чтобы опять вернуть элемент на холст)
- Opacity: 1.00 (чтобы сделать красивое затенение)
Измените название состояния на что-то более релевантное и добавьте в .next()call.
buyNowBar.states.add slideUp: y: 990 opacity: 1.00 buyNowBar.states.next()
Давайте зададим кнопке небольшой прыжок? Воспользуемся анимацией Curves, а точнее Spring Curve. Добавьте этот код между блоками states.add и states.next()...
buyNowBar.states.animationOptions = curve: "spring(400, 30, 0)" delay: .3
Это задаст анимацию только для состояния нашего слоя, игнорируя глобальные настройки Framer по умолчанию. У вас должно получиться следующее:
buyNowBar.states.add slideUp: y: 990 opacity: 1.00 buyNowBar.states.animationOptions = curve: "spring(400, 30, 0)" delay: .3 buyNowBar.states.next()
Теперь нужен переход на второй экран (Confirmation). Для этого нужно просто перейти в меню Insert > State > Confirmation и затем обратно вернуть Opacity на 1.00 в панели Properties.
Confirmation.states.add fadeIn: opacity: 1.00
Примечание: да, фоновое изображение размыто и отмасштабировано, но нам это нужно будет для следующего состояния слоя. Теперь нужно добавить событие клика (Click Event), когда пользователь нажимает на кнопку Buy Now, и переходы на экран Confirmation. Перейдите в меню Insert > Event > buyNowBar > Click > Click. И в редакторе кода будет следующее:
buyNowBar.onClick (event, layer) ->
Затем нужно добавить вызов next(), который будет ссылаться на состояние fadeIn, созданное ранее.
buyNowBar.onClick (event, layer) -> Confirmation.states.next()
Кликните на кнопку Buy Now, и увидите переход на экран Confirmation. Прекрасно! Перейдем к слою backgroundImage. Давайте добавим новое состояние для него… Insert > State > backgroundImage В панели Properties добавьте следующие параметры…
- Scale: 1.00
- Blur: 0
Измените название состояния на что-то более релевантное...
backgroundImage.states.add zoomBlur: scale: 1.00 blur: 0
Опять же, нужно добавить Click Event на кнопку Buy Now, которая по клику активирует переход на экран Confirmation. Перейдите в меню Insert > Event > buyNowBar > Click > Click.
buyNowBar.onClick (event, layer) ->
И затем добавьте вызов next() для обращения к состоянию zoomBlur, которое вы только что создали...
buyNowBar.onClick (event, layer) -> backgroundImage.states.next()
Кликните на кнопку Buy Now, чтобы увидеть переход в действии. Супер! Для завершения работы с экраном Confirmation мы добавим парочку событий. Одно для слоя successBadge, и еще одно - для слоя message (сообщение). 
successBadge.states.add fadeDown: y: 0 opacity: 1.00
Как и в случае со слоем buyNowBar, мы добавим анимацию Curve для небольшого эффекта прыжка...
successBadge.states.animationOptions = curve: "spring(400, 30, 20)" delay: .3
Затем назначим Click Event кнопке Buy Now, через Insert > Event > buyNowBar > Click > Click.
buyNowBar.onClick (event, layer) -> successBadge.states.next()
Кликните на кнопку Buy Now, чтобы просмотреть анимацию в действии. Для слоя message проделайте те же шаги, которые я показал выше. Только задайте Scale 1.00 и Opacity 1.00. Не забудьте привязать Click Event к кнопке Buy Now. Теперь слегка почистим созданный код. Возьмите все события клика, вставленные ранее и сгруппируйте их все внизу редактора кода:
buyNowBar.onClick (event, layer) -> Confirmation.states.next() backgroundImage.states.next() successBadge.states.next() message.states.next()
Если вам немного лень напрягаться, вот весь код, который должен быть внутри проекта Framer (я вставил сюда некоторые комментарии)...
# Import file "Order Confirmation" (sizes and positions are scaled 1:2) sketch = Framer.Importer.load("imported/Order Confirmation@2x") {item, buyNowBar, Confirmation, backgroundImage, successBadge, message} = sketch ########### Adjust Defaults # Item item.scale = 0 item.opacity = 0 # Buy Now Bar buyNowBar.y = 1334 buyNowBar.opacity = 0 # Confirmation Screen Confirmation.x = 0 Confirmation.opacity = 0 # Background Image backgroundImage.scale = 1.5 backgroundImage.blur = 20 # Success Badge successBadge.y = -900 successBadge.opacity = 0 # Message message.scale = 0 message.opacity = 0 ########### States # Item item.states.add scaleUp: scale: 1.00 opacity: 1.00 item.states.next() # Buy Now Bar buyNowBar.states.add slideUp: y: 990 opacity: 1.00 buyNowBar.states.animationOptions = curve: "spring(400, 30, 0)" delay: .3 buyNowBar.states.next() # Confirmation Screen Confirmation.states.add fadeIn: opacity: 1.00 # Background Image backgroundImage.states.add zoomBlur: scale: 1.00 blur: 0 # Success Badge successBadge.states.add fadeDown: y: 0 opacity: 1.00 successBadge.states.animationOptions = curve: "spring(400, 30, 20)" delay: .3 # Message message.states.add scaleUp: scale: 1.00 opacity: 1.00 ########### Events buyNowBar.onClick (event, layer) -> Confirmation.states.next() backgroundImage.states.next() successBadge.states.next() message.states.next()
Надеюсь, этот небольшой урок по работе Sketch и Framer пролил свет на процесс прототипирования. Продолжите работу с Framer в вашем следующем проекте, вы удивитесь, насколько это удобно! Спасибо за чтение, делитесь вашими впечатлениями в комментариях.
Перевод статьи Marc Andrew
Найстарші коментарі (0)