Origami Studio: Пятьдесят самых используемых патчей
--
Для тех, кто учится прототипировать в Origami + Quartz Composer
(В прошлый раз мы разобрали «Базовые понятия Origami Studio».)
Интерфейс Quartz Composer примитивен и состоит всего из 4 окон (за счет этого работается в нем невероятно быстро). Самая непонятная часть — это патчи. Сложно начать работу, не понимая, что в принципе ты можешь сделать.
В среднем существует 50 патчей из которых можно сделать практически все что угодно (см. ниже). Все они описаны на русском языке на этом сайте:
В этом посте я сделаю общий обзор этих 50 патчей и опишу их 10 группами:
- Отображение объектов.
- Анимации и переходы.
- Дискретные жесты (клик, тап, лонг-пресс).
- Длительные жесты (свайп, драг-н-дроп, скрол).
- Работа с внешними устройствами (акселерометр и вибро-сигнал телефона, микрофон, веб-камера, клавиатура).
- Веб (браузер, ховер, hex-цвета #123ABC).
- Математика и логика.
- Счетчики и переключатели (условия, циклы, таймер).
- Подключение реальных данных (XML, RSS, URL, CSV).
- Графические фильтры (blur, twirl, pixellate, posterize).
1. Отображение объектов
В прошлый раз мы разобрали, что за отображение отвечают патчи синего цвета — приемники. Они принимают данные: из графических файлов и видео, из генераторов геометрических фигур; патча Layer Group — и отображают их на экране.
Layer
Слой для растрового или векторного изображения. Содержит изображение (но не отображает). Чтобы увидеть изображение, необходимо соединить его с патчем Layer.
Live Image
Импортирует файл из папки на диске. Используется для подключения ассетов из Sketch или PSD-файлов.
Layer Group
Макропатч, которые рендерит содержащиеся в нем субпатчи в картинку заданных размеров.
Fill Layer
Заливка фона одним цветом.
Text Layer
Текстовый слой. Выводит на экран строку из порта Text. Позволяет задать шрифт, размер текста и размер текстовой области.
Rectangle
Генерирует прямоугольник (но не отображает). Для отображения подключите к патчу Layer.
Rounded Rectangle
Генерирует прямоугольник с закругленными углами. Может использоваться для рисования круга: для этого необходимо задать большие скругления.
Movie Importer
Импортирует QuickTime-видео в композицию. Чтобы отобразить его, необходимо подключить к патчу Layer.
Button
Отображает стандартную кнопку. Может использоваться в качестве Hit Area.
2. Анимации и переходы
Конструкция на рисунке ниже — это основа основ Origami. Из нее состоит 80% любой композиции:
Заменив Interaction 2 на патчи других жестов, мы получим новое взаимодействие. Также c патчами Pop Animation и Transition — их можно заменять на родственные им Classic Animation, Color Transition и Image Transition, чтобы получить другие настройки анимаций и переходов с другими типами данных.
Pop Animation
Пружинящая анимация. Поддерживает экспорт кода на языках Objective-C, Java и JavaScript .
Bouncy Animation
Первая версия Pop Animation. Не экспортируется в виде кода.
Classic Animation
Анимация для переходов между состояниями с классическими изингами (ease-in / ease-out).
Transition
Переход между двумя состояниями. Принимает числа от 0 до 1 и конвертирует в числа на промежутке от Start до End Value.
Color Transition
Переход между двумя цветами. Работает по аналогии с патчем Transition.
Image Transition
Переход между двумя картинками через альфа-эффект. Работает по аналогии с патчем Transition.
3. Дискретные жесты
Дискретными будем называть жесты, которые выдают только 0 и 1. (Например, ховер. Нельзя полунавести мышь на объект или навести слегка. Вы либо навели, либо нет — либо 0, либо 1.) Любой патч дискретного жеста легко заменяет Interaction 2 в нашей базовой связке.
Interaction 2
Нажатие, Отпускание, Тап.
Interaction 1
Порты Mouse Down и Mouse Over определяют нажатие и наведение мыши. Click Count определяет двойные и тройные клики.
Long Press
Длительное нажатие.
Swipe
(пока не задокументирован) может работать как дискретный, так и длительный жест: порт Progress выдает 1 или 0, а Position — конкретные значения координат.
Keyboard
Определяет нажатие кнопок клавиатуры (можно задавать свои через настройки патча). Любой патч жеста по умолчанию работает на весь экран. Чтобы задать область действия жеста, прикрепите синим проводом его к патчу Layer или Button, либо создайте отдельную Hit Area:
Hit Area
Задает область действия для таких патчей-поставщиков, как Interaction 2, Scroll, Swipe, Long Press и т.д.
4. Длительные жесты
Жесты типа скрола не могут выдавать только 1 или 0. Они выдают большой диапазон чисел: сколько пикселей проскролено по оси Y или оси X. Длительные жесты — это одна из причин для использования таких тулов как Origami и Framer.
Scroll
Эмулирует инерционный скрол из iOS.
Swipe
Пока не задокументирован.
Touch
Определяет касание к экрану и его координаты.
Другие жесты
– Drag and Drop,
– Mouse (поддерживает мультитач-жесты трекпада),
– Mouse Scroll.
5. Работа с внешними устройствави
Device Info + 3D Orientaion
Предоставляет сведения о подключенном через провод девайсе (например, данные с акселерометра телефона)
Audio Input
Принимает звук c микрофона и определяет его громкость и частотный спектр.
Device Vibrate
Вызывает вибро-сигнал на подключенном по проводу iOS-устройстве.
Video Input
Видео с веб-камеры компьютера. Для отображения в просмотрщике подключите к патчу Layer.
System Time
System Time выдает время из системных часов компьютера. Чтобы настроить формат, подключают к порту Time патч Date Formatter.
Другие патчи
– Keyboard
– Host Info (сведения о компьютере),
– Tablet (графпланшет),
– Mouse,
– Apple Remote (пульт).
6. Веб
Изначально Quartz Composer — тул для десктопного дизайна, поэтому в нем нет никаких ограничений для прототипирования сайтов или десктопных приложений (в отличие, от Form и Pixate, например).
Правда его собственная система координат и позицонирования объектов на экране сильно отличается от концепции потока HTML, и целый сайт собрать в Origami довольно трудоемко. Но для отдельных взаимодействий он подходит идеально.
Browser Chrome
Стилизует окно просмотрщика под браузер Chrome.
Browser Buttons
Отслеживает нажатия кнопок «Назад» и «Вперед» в эмуляторе браузера.
Hex Color
Используется, чтобы задавать цвета в формате HTML/CSS (типа #123ABC).
Viewer Info
Отслеживает ширину и высоту окна браузера, ретиновость экрана.
Другие патчи
– Interaction 1. Помогает определить ховер.
– Mouse Scroll. Работает как Scroll, только для мыши и трекпада.
– Cursor Control. По сигналу изменяет вид курсора.
7. Математика и логика
Математика — один из основных инструментов любого программирования. В Origami ее можно использвать даже для вывода объектов на экран:
Math
Выполняет математические операции между значениями входящих портов.
Logic
Выполняет логические операции между значениями входящих портов.
Другие патчи
– Round. Округляет числа.
– Random Generator. Генерирует случайные числа.
– Mathematical Expression. Патч для сложно математики (логарифмов и тригонометрии) и редких математических операций вроде нахождения модуля числа.
8. Счетчики и переключатели
Эти патчи отвечают за логику происходящего на экране.
Conditional (аналог условного оператора If). Задает условие наступления события.
Iterator (аналог цикла For). Этот макропатч выполняет (или рендерит) заданное число раз то, что находится внутри него.
Delay. Задержка изменения параметра.
Timer. Запускает таймер по сигналу. Выдает как текущее время таймера, так и сигнал о завершении счета.
Velocity. Определяет разницу между текущим и предыдущим значением величины. Может использоваться для определения скорости изменений.
Counter 2. По сигналу увеличивает значение счетчика.
Switch. Используется, чтобы удерживать состояние после того, как событие завершилось.
Interpolation. Совершает переход от одного числа к другому за заданное время. Используется для зацикленных анимаций.
Multiplexer. Передает на выход одно из нескольких входящих значений. Выбор происходит на основе порта Source Index, в котором указывают порядковый требуемого входящего порта.
9. Подключение реальных данных
Патчи XML Importer, RSS Importer и Image Importer позволяют делать прототипы с реальными данными. По ссылке ниже можно скачать пример импорта RSS Яндекс.Новостей, которые обновляются в реальном времени.
Для создания интерактивной инфографики можно установить плагин rdqcutils, позволяющий импортировать данные в популярном CSV-формате.
Пример использования Image Importer для импорта Google-карт: https://www.facebook.com/groups/origami.community/631052546993631/
10. Графические фильтры
Изначально Quartz Composer — мощный тул для обработки графических данных. В нем есть все фильтры из обычных графических программ. Разница лишь в том, что в Origami применять эти фильтры или менять их параметры можно интерактивно.
- Blur
- Gaussian Blur
- Flip-Flop
- Crystallize
- Posterize
- Pixellate
- CMYK Halftone
- Twirl Distortion
- Dot Screen и т.д.
