Модуль ViewController для Framer.js
Наш канал в

Модуль ViewController для Framer.js помогает вам создавать мультишаговые сценарии пользователя с готовыми переходами вроде затемнения (fade in), увеличения (zoom in) и листания (slide in). Он состоит из модуля Framer и опционального плагина для Sketch. Вводная статья.

Модуль ViewController для Framer.js

Попробуйте демо-прототип

Начало работы

Модуль ViewController упрощает создание крупных сценариев интерфейса внутри Framer. Для начала скачайте файл ViewController.coffee и поместите его в папку с модулями вашего проекта. Далее следуйте таким шагам.

Шаг 1 Создайте новый контроллер представлений (ViewController)

ViewController = require ‘ViewController’
Views = new ViewController
initialView: sketch.home

Шаг 2 Вызовите одно из поддерживаемых переходов, чтобы переключить представление или используйте плагин Sketch для генерации ссылок.

sketch.home.onClick -> Views.slideInLeft(sketch.menu)

Доступные переходы

Переходы запускаются с помощью использования одного из методов переходов. Например, Views.fadeIn(anotherLayer). Каждый переход принимает объект animationOption как второй аргумент. Например, Views.fadeIn(anotherLayer, time: 2)

Переходы

  • .switchInstant()

switchInstant

  • .slideInUp()

slideInUp

  • .slideInRight()

transition3

  • .slideInDown()

slideInDown

  • .slideInLeft()

slideInLeft

  • .slideOutUp()

slideOutUp

  • .slideOutRight()

slideOutRight

  • .slideOutDown()

slideOutDown

  • .slideOutLeft()

slideOutDown

  • .moveInRight()

moveInRight

  • .moveInLeft()

moveInLeft

  • .pushInRight()

pushInRight

  • .pushInLeft()

pushInLeft

  • .pushOutRight()

pushOutRight

  • .pushOutLeft()

pushOutLeft

  • .fadeIn()

fadeIn

  • .zoomIn()

zoomIn

  • .zoomOut()

zoomOut

 

Параметры и методы

.initialView

Настройка начального представления

Views = new ViewController
initialView: sketch.home

.initialViewName

Настройка начального представления основана на названии слоя. В следующем примером слой, который называется “initialView” автоматически настроен как initialView.

Views = new ViewController
initialViewName: “initialView” # default value

.currentView

Возвращает текущее представление

Views = new ViewController
initialView: sketch.home
Views.slideIn(sketch.menu)
print Views.currentView # returns sketch.menu

.previousView

Возвращает предыдущее представление

Views = new ViewController
initialView: sketch.home
Views.slideIn(sketch.menu)
print Views.previousView # returns sketch.home

.history

Возвращает полную историю ViewController в массиве

Views = new ViewController
initialView: sketch.home
Views.slideIn(sketch.menu)
Views.slideIn(sketch.profile)
print Views.history

.back()

Возвращается на шаг назад в истории и запускает анимацию в обратном порядке.

Views = new ViewController
initialView: sketch.home
Views.slideIn(sketch.menu)
sketch.btn.onClick -> Views.back() # animates back to sketch.home

.animationOptions

Опции анимации по умолчанию для всех переходов внутри ViewController.

Views = new ViewController
animationOptions:
time: .8
curve: “ease-in-out”

.autoLink

Автоматически создает ссылки onClick на основе имен слоев в соответствии с форматом: transitionName_viewName. Например, переименование слоя “home” внутри Sketch на slideInRight_menu в коде будет выглядеть так:

sketch.home.onClick -> Views.slideInRight(menu)

Для начала просто создайте ViewController и импортируйте файл Sketch с правильно названными слоями. По умолчанию autoLink стоит в значении “true”.

Пример проекта: http://share.framerjs.com/qzxwtystb9vb/

.backButtonName

Слои, соответствующие этому названию будут автоматически вызывать back() на клике. По умолчанию установлен на “backButton”

.scroll (experimental)

Автоматически добавляет компоненты скролла для каждого представления. Если представление больше, чем ViewController, он автоматичеcки подключит scrollHorizontal (скролл по-горизонтали) и/или scrollVertical (скролл по-вертикали). По умолчанию установлено на “false”.

События

change:currentView

Включается, если меняется currentView

Views.onChange “currentView”, (current) ->
print “new view is: “+current.name

change:previousView

Включается, если меняется previousView

Views.onChange “previousView”, (previous) ->
print “previous view is: “+previous.name

ViewWillSwitch

Включается перед началом перехода

Views.onViewWillSwitch (oldView, newView) ->
print oldView,newView

ViewDidSwitch

Включается после завершения перехода

Views.onViewDidSwitch (oldView, newView) ->
print oldView,newView

Плагин для Sketch

ViewController Плагин для Sketch

Если в вашем ViewController включен autoLink (подключен по умолчанию), вы можете создать ссылки переименованием ваших слоев в соответствии с форматом: transitionName_viewName. Этот плагин делает переименование слоев немного удобнее.

  1. Выделите два слоя, одна кнопка и одно представление (например, артборд)
  2. Запустите плагин и вберите один из доступных переходов
  3. Импортируйте изменения во Framer
  4. Настройте ViewController в вашем проекте, в соответствии с правилами в разделе “Начало работы”.

Скачайте плагин здесь.

Примеры прототипов

Подпишитесь на рассылку

Раз в неделю мы будем присылать на почту дайджест с лучшими материалами

Похожие записи

Создание iOS-приложения в Sketch и Xcode, публикация его в App Store

Создание приложения в Sketch и Xcode еще никогда не было таким простым. Sketch и Xcode делает весь этот процесс одинаково достижимым для дизайнеров и разработчиков. С одной стороны, в Sketch каждый шаблон и инструмент создан специально для такого типа работы, а с другой – у нас есть Storyboard и Assets Catalog в Xcode, которые позволяют быстро построить функциональный прототип. За 5 минут у вас может получиться нечто, что можно потестировать на вашем iPhone. Часть 1 Часть 2 Часть 4

Обучение Swift и Xcode для дизайнера. Создание своего приложения на Swift

В прошлом году я писал Главу 3 под Objective-C и Xcode 5. С тех пор многое кардинально изменилось. Код Swift существенно упростился, из-за чего он стал одним из самых популярных языков для разработки приложений. Xcode 6 представил ряд новых инструментов, включая Playground, Vector Assets и Designable Views. Кроме того, Адаптивные макеты стали невероятно востребованы в связи с выходом iPhone 6 и 6 Plus. Часть 2 Часть 3 Часть 4

Анимация интерфейсов. Микровзаимодействия для макрорезультата

Микровзаимодействие – один из ключевых моментов в UI/UX-дизайне. Это, наверное, лучшее доказательство того, что внимание к мелким деталям может дать большой и мощный результат.