Зміст
- Імпорт із Sketch
- Створіть шари маски та аватари
- Визначте стани
- Анімація між державами
- Спробуйте на справжньому мобільному пристрої
Обґрунтування прототипування дизайну не є новим - воно те саме, що і всі галаси про розробку в браузері. Коли ви бачите дизайн у його реальному контексті, це зовсім інше. Ви приймаєте кращі рішення, коли вам не потрібно робити припущення про те, як функціонуватиме та відчуватиметься інтерфейс. Це може здатися додатковою роботою, але розуміння, яке ви можете отримати, бачачи, як ваш дизайн працює, безцінне.
Framer - це новий інструмент створення прототипів на основі коду. Ви можете створювати макети в Sketch (або Photoshop), як зазвичай, і імпортувати їх у Framer. Потім напишіть трохи CoffeeScript, і ви зможете багато чого досягти.
Я навчу вас основам створення прототипів у Framer на прикладі прототипу програми iOS із двома переглядами: поданням профілю та збільшеним видом зображення аватару користувача. Ми створимо прототип того, як розкритий перегляд фотографій відкриватиметься та закриватиметься, а також анімуватимемо його. Перегляньте онлайн-демонстрацію тут (щоб побачити вихідний код, просто натисніть піктограму у верхньому лівому куті). Вам також знадобиться безкоштовна пробна версія Framer, яку ви можете отримати на сайті framerjs.com.
Імпорт із Sketch
Першим кроком є імпорт шарів із Sketch у Framer. Просто натисніть кнопку Імпортувати у Framer, поки дизайн відкритий у Sketch, і виберіть правильний файл у діалоговому вікні, яке буде показано далі. Framer автоматично імпортує зображення з кожного шару та робить їх доступними за допомогою такого коду:
sketch = Framer.Importer.load "імпорт / профіль"
Використовуйте цю змінну для доступу до імпортованих шарів. Наприклад, для посилання на шар із назвою „вміст” у файлі ескізу ви введете sketch.content у Framer.
Створіть шари маски та аватари
Основною функцією цього прототипу є розширення зображення аватара при його натисканні, а потім його закриття при повторному натисканні. Спочатку ми створимо два шари маски - вкладену маску або маску всередині іншої маски. Ми анімуємо обидві маски одночасно, щоб створити приємний, тонкий ефект відкриття та закриття. Шар headerMask буде обрізати фотографію аватара у прямокутник, коли вона буде розширена, а шар маски обріже її у невелике коло у поданні профілю.
Створіть шар headerMask таким чином:
headerMask = нова ширина шару: ширина екрану, висота: 800 backgroundColor: "прозорий"
Перший рядок коду створює і називає новий шар. Потім, використовуючи синтаксис відступу CoffeeScript, ми встановлюємо властивості ширини, висоти та фону. Ми будемо використовувати прозорий фон, щоб шари, що відображаються нижче, відображалися при розширенні фотографії аватара.
Далі створіть шар маски:
маска = нова Ширина шару: 1000, висота: 1000 фон Колір: "прозорий", межа Радіус: 500 у: sketch.header.height - 100 суперШар: заголовок Масштаб маски: 0,2, початок Y: 0
Ми створюємо новий шар і встановлюємо властивості таким же чином. Великий кордонРадіус робить цей шар колом. Розташовуємо шар маски так, щоб він перекривав шар заголовка, імпортований із Sketch. Ми також зменшимо масштаб до 20 відсотків, або 0,2. Початок нуля Y встановлює точку опори або реєстрацію зображення на верхній край.
Решта властивості, superLayer, встановлює створений нами шар headerMask як батьківський для цього нового шару. Так працює маскування у Фреймера. Просто встановіть властивість superLayer, і батьківський шар замаскує дитину.
Далі нам потрібно створити графіку аватару та помістити її всередині цих нових масок. Щоб збільшити масштаб та анімувати межі обрізання, ми вручну створимо шар аватари. Скопіюйте фотографію у підпапку ‘images’ папки проекту. Потім створіть шар, використовуючи це зображення:
avatar = new Зображення шару: "images / avatar.png" ширина: mask.width, height: mask.height superLayer: mask, force2d: true
Зверніть увагу, що ми встановили супершар аватари як шар маски. Тепер обидва вкладені в headerMask. Ми також встановлюємо ширину та висоту, щоб зображення повністю заповнювало масковану область.
Нарешті, ми створимо змінну для зберігання позиції Y маски, яку будемо використовувати для анімації. Ми відцентруємо його горизонтально, оскільки він більший за екран.
maskY = mask.y mask.centerX ()
Визначте стани
Першим кроком у створенні анімації є визначення початкового та кінцевого станів. У Фреймера штати схожі на ключові кадри, виписані в коді. Держава - це лише сукупність властивостей. Кожен шар має стан за замовчуванням. Для цього прототипу за замовчуванням це буде початковою точкою для анімації, тому нам потрібно лише встановити другий стан для кожного шару.
Синтаксис станів дуже простий. Посилайтеся на шар, використовуйте метод layer.states.add (), а потім перелічіть властивості, які потрібно включити.
sketch.content.states.add (приховати: {непрозорість: 0}) headerMask.states.add (переміщення: {y: 120}) mask.states.add (зростати: {масштаб: 1.1, y: маскаY - 420})
Другий стан рівня вмісту, який був імпортований із Sketch і містить усі інші елементи екрана профілю, повинен бути повністю прозорим. Таким чином, коли аватар буде розширений, ми матимемо чорний фон, а решта імпортованих піктограм та елементів просвічуватимуться.
Другий рядок коду створює стан для headerMask, який просто перемістить його вниз у положення Y 120. Це дозволить кнопці заголовка та закриття відображатися у верхній частині екрана при збільшенні фотографії аватара. Це також оживить межі обрізання фотографії аватара.
Нарешті, новий стан для шару маски буде як масштабувати його, так і переміщувати вгору, використовуючи змінну maskY, яку ми створили раніше. Оскільки початком Y (або опорною точкою) шару маски є його верхній край, нам потрібно перемістити його вгору на 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: "легкость", час: 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 журналу net.
Сподобалось? Прочитайте це!
- Створіть інтерактивні прототипи в Sketch
- Як створити блог
- Найкращі фоторедактори
