Содержание
- Импорт из эскиза
- Создание слоев маски и аватара
- Определить состояния
- Анимация между состояниями
- Попробуйте на реальном мобильном устройстве
Причина создания прототипов дизайна не нова - она такая же, как и все разговоры о проектировании в браузере. Когда вы видите дизайн в его реальном контексте, он совершенно другой. Вы принимаете более обоснованные решения, когда вам не нужно делать предположений о том, как интерфейс будет функционировать и ощущаться. Это может показаться дополнительной работой, но понимание, которое вы можете получить, наблюдая за своим дизайном, бесценно.
Framer - это новый инструмент для создания прототипов на основе кода. Вы можете создавать мокапы в Sketch (или Photoshop), как обычно, и импортировать их во Framer. Затем напишите немного CoffeeScript, и вы сможете многого добиться.
Я собираюсь научить вас основам прототипирования во Framer на примере прототипа приложения для iOS с двумя представлениями: представлением профиля и увеличенным изображением аватара пользователя. Мы создадим прототип, как будет открываться и закрываться развернутое фото, а также анимируем его. Просмотрите онлайн-демонстрацию здесь (чтобы увидеть исходный код, просто щелкните значок в верхнем левом углу). Вам также понадобится бесплатная пробная версия Framer, которую вы можете получить на сайте framerjs.com.
Импорт из эскиза
Первый шаг - импортировать слои из Sketch во Framer. Просто нажмите кнопку «Импорт» во Framer, когда дизайн открыт в Sketch, и выберите правильный файл в следующем диалоговом окне. Framer автоматически импортирует изображения из каждого слоя и сделает их доступными с помощью следующего кода:
sketch = Framer.Importer.load "импортированный / профиль"
Используйте эту переменную для доступа к импортированным слоям. Например, чтобы сослаться на слой с именем ’content’ в файле Sketch, вы должны ввести sketch.content во Framer.
Создание слоев маски и аватара
Основная функция этого прототипа - расширять изображение аватара при нажатии на него, а затем закрывать его при повторном нажатии. Сначала мы создадим два слоя маски - вложенную маску или маску внутри другой маски. Мы анимируем обе маски одновременно, чтобы создать красивый легкий эффект открытия и закрытия. Слой headerMask обрежет фотографию аватара до прямоугольника, когда он будет развернут, а слой маски обрежет его до небольшого круга на виде профиля.
Создайте слой headerMask следующим образом:
headerMask = new Ширина слоя: Screen.width, высота: 800 backgroundColor: "transparent"
Первая строка кода создает и дает имя новому слою. Затем, используя синтаксис отступов CoffeeScript, мы устанавливаем свойства ширины, высоты и фона. Мы будем использовать прозрачный фон, чтобы слои под ним отображались при увеличении фотографии аватара.
Затем создайте маскирующий слой:
mask = new Ширина слоя: 1000, высота: 1000 backgroundColor: "transparent", borderRadius: 500 y: sketch.header.height - 100 superLayer: headerMask scale: 0.2, originY: 0
Создаем новый слой и таким же образом устанавливаем свойства. Большой borderRadius делает этот слой кругом. Мы располагаем слой маски так, чтобы он перекрывал слой заголовка, который был импортирован из Sketch. Мы также уменьшим масштаб до 20 процентов, или 0,2. Нулевое значение originY устанавливает точку привязки или совмещение изображения с верхним краем.
Оставшееся свойство superLayer устанавливает слой headerMask, который мы создали, как родительский для этого нового слоя. Так работает маскировка во Framer. Просто установите свойство superLayer, и родительский слой замаскирует дочерний.
Затем нам нужно создать изображение аватара и поместить его в эти новые маски. Чтобы увеличить и анимировать границы кадрирования, мы вручную создадим слой аватара. Скопируйте фотографию в подпапку ’images’ папки проекта. Затем создайте слой, используя это изображение:
avatar = new Изображение слоя: "images / avatar.png" ширина: mask.width, высота: mask.height superLayer: mask, force2d: true
Обратите внимание, что мы установили суперслой аватара как слой маски. Оба теперь вложены в headerMask. Мы также устанавливаем ширину и высоту, чтобы изображение полностью заполняло замаскированную область.
Наконец, мы создадим переменную для хранения позиции Y маски, которую мы будем использовать для анимации. Центрируем его по горизонтали, так как он больше экрана.
maskY = маска.y mask.centerX ()
Определить состояния
Первым шагом в создании анимации является определение начального и конечного состояний. Во Framer состояния подобны ключевым кадрам, записанным в коде. Состояние - это просто набор свойств. Каждый слой имеет состояние по умолчанию. Для этого прототипа это значение по умолчанию будет служить начальной точкой для анимации, поэтому нам нужно только установить второе состояние для каждого слоя.
Синтаксис состояний очень прост. Ссылайтесь на слой, используйте метод layer.states.add () и затем перечислите свойства, которые нужно включить.
sketch.content.states.add (hide: {opacity: 0}) headerMask.states.add (move: {y: 120}) mask.states.add (grow: {scale: 1.1, y: maskY - 420})
Второе состояние для слоя содержимого, которое было импортировано из Sketch и содержит все остальные элементы экрана профиля, должно быть полностью прозрачным. Таким образом, когда аватар развернут, у нас будет черный фон, а оставшиеся импортированные значки и элементы будут видны.
Вторая строка кода создает состояние для headerMask, которое просто перемещает его вниз до позиции Y, равной 120. Это позволит отображать заголовок и кнопку закрытия вверху экрана при увеличении фотографии аватара. Он также будет анимировать границы кадрирования фотографии аватара.
Наконец, новое состояние для слоя маски будет увеличивать и перемещать его вверх, используя переменную maskY, которую мы создали ранее. Поскольку начало координат (или точка привязки) слоя маски является его верхним краем, нам нужно переместить его на 420 пикселей, чтобы был виден центр изображения.
Анимация между состояниями
Для анимации между состояниями по умолчанию и новыми, которые мы только что создали, нам нужно еще четыре строки кода. Мы установим обработчик кликов на слое аватара. Когда пользователь нажимает его на экране профиля, мы переходим к расширенному представлению, циклически меняя состояния. При повторном нажатии мы вернемся к состояниям по умолчанию, так что он вернется к небольшому кругу. Те же строки кода обрабатывают оба взаимодействия:
avatar.on Events.Click, -> headerMask.states.next () mask.states.next () sketch.content.states.next ()
Первая строка этого блока устанавливает обработчик кликов на слое аватара. Каждый раз при касании, независимо от того, как он обрезан или какого размера, будут выполняться следующие операторы.
Затем мы просто ссылаемся на каждый слой и используем метод layer.states.next () для переключения состояний. Когда вы используете layer.states.next (), Framer будет использовать свои внутренние настройки анимации по умолчанию. Это очень удобно, но вы можете создавать еще лучшие анимации, изменяя кривые анимации.
При использовании таких состояний, как мы здесь, вы можете легко изменить каждую кривую анимации отдельно, используя свойство layer.states.animationOptions. После трех небольших корректировок анимация выглядит совершенно иначе:
sketch.content.states.animationOptions = curve: "easy", time: 0.3 headerMask.states.animationOptions = curve: "spring (150, 20, 0)" mask.states.animationOptions = curve: "spring (300, 30, 0) "
Для слоя контента, который исчезает и появляется, мы выберем простую предустановку кривой, легкость и установим продолжительность анимации 0,3, чтобы она была очень быстрой.
Для слоев headerMask и Mask используйте кривую пружины. Для наших целей вам просто нужно знать, что значения кривой пружины изменяют скорость и отскок анимации. Значения для слоя маски сделают его анимацию намного быстрее, чем headerMask и контент. Дополнительные сведения о настройках кривой пружины см. В документации Framer по адресу framerjs.com/docs.
Попробуйте на реальном мобильном устройстве
Наблюдать за дизайном на реальном устройстве намного эффективнее, чем использовать эмуляторы, и вы увидите преимущества в своей работе. Framer включает функцию зеркала, которая представляет собой встроенный сервер, который предлагает URL-адрес вашего прототипа по вашей локальной сети. Просто перейдите по URL-адресу с помощью своего устройства.
Вы узнали все, что вам нужно знать, чтобы создавать прототипы собственных дизайнов во Framer. Чего ты ждешь?
Слова: Джаррод Дрисдейл
Джаррод Дрисдейл - автор, консультант по дизайну, производитель цифровых продуктов. Эта статья изначально была опубликована в 270-м выпуске сетевого журнала.
Понравилось это? Прочтите это!
- Создавайте интерактивные прототипы в Sketch
- Как начать блог
- Лучшие фоторедакторы
