Модуль ViewController для Framer.js помогает вам создавать мультишаговые сценарии пользователя с готовыми переходами вроде затемнения (fade in), увеличения (zoom in) и листания (slide in). Он состоит из модуля Framer и опционального плагина для Sketch. Вводная статья.
Начало работы
Модуль 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()
- .slideInUp()
- .slideInRight()
- .slideInDown()
- .slideInLeft()
- .slideOutUp()
- .slideOutRight()
- .slideOutDown()
- .slideOutLeft()
- .moveInRight()
- .moveInLeft()
- .pushInRight()
- .pushInLeft()
- .pushOutRight()
- .pushOutLeft()
- .fadeIn()
- .zoomIn()
- .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 включен autoLink (подключен по умолчанию), вы можете создать ссылки переименованием ваших слоев в соответствии с форматом: transitionName_viewName. Этот плагин делает переименование слоев немного удобнее.
- Выделите два слоя, одна кнопка и одно представление (например, артборд)
- Запустите плагин и вберите один из доступных переходов
- Импортируйте изменения во Framer
- Настройте ViewController в вашем проекте, в соответствии с правилами в разделе “Начало работы”.
Скачайте плагин здесь.
Топ коментарі (0)