Модуль 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 в вашем проекте, в соответствии с правилами в разделе “Начало работы”.

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

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