Задаволены
- Імпарт з Sketch
- Стварыце пласты маскі і аватары
- Вызначце дзяржавы
- Анімацыя паміж дзяржавамі
- Паспрабуйце на сапраўднай мабільнай прыладзе
Абгрунтаванне прататыпавання дызайну не новае - яно такое ж, як і ўвесь шум пра распрацоўку ў браўзэры. Калі вы бачыце дызайн у яго рэальным кантэксце, гэта зусім іншае. Вы прымаеце лепшыя рашэнні, калі вам не трэба рабіць здагадкі пра тое, як будзе працаваць і адчуваць сябе інтэрфейс. Гэта можа падацца дадатковай працай, але ідэі, якія вы можаце атрымаць, бачачы, як працуе ваш дызайн, неацэнныя.
Framer - гэта новы інструмент для прататыпавання на аснове кода. Вы можаце ствараць макеты ў Sketch (альбо Photoshop), як звычайна, і імпартаваць іх у Framer. Затым напішыце невялікі CoffeeScript, і вы зможаце зрабіць шмат.
Я збіраюся навучыць вас асновам прататыпавання ў Framer, на прыкладзе прататыпа прыкладання для iOS з двума відамі: прагляд профілю і павялічаны выгляд аватары карыстальніка. Мы зрабім прататып адкрыцця і закрыцця пашыранага прагляду фотаздымкаў, а таксама аніміруем яго. Паглядзіце онлайн-дэманстрацыю тут (каб убачыць зыходны код, проста націсніце на значок у левым верхнім куце). Вам таксама спатрэбіцца бясплатная пробная версія Framer, якую вы можаце атрымаць на сайце framerjs.com.
Імпарт з Sketch
Першы крок - імпарт слаёў з Sketch у Framer. Проста націсніце кнопку "Імпартаваць" у Framer, пакуль дызайн адкрыты ў Sketch, і выберыце правільны файл у наступным дыялогавым акне. Framer аўтаматычна імпартуе выявы з кожнага пласта і робіць іх даступнымі праз код, напрыклад:
sketch = Framer.Importer.load "імпартаваны / профіль"
Выкарыстоўвайце гэту зменную для доступу да імпартаваных слаёў. Напрыклад, каб спасылацца на пласт з імем «змест» у файле Sketch, вы павінны ўвесці sketch.content у Framer.
Стварыце пласты маскі і аватары
Асноўная функцыя гэтага прататыпа заключаецца ў пашырэнні выявы аватары пры яе націску, а затым у закрыцці пры паўторным націску. Спачатку мы створым два пласта маскі - укладзеную маску альбо маску ўнутры іншай маскі. Мы аніміруем абедзве маскі адначасова, каб стварыць прыемны, тонкі эфект адкрыцця і закрыцця. Пласт headerMask абрэжа фотаздымак аватары ў прастакутнік, калі ён будзе пашыраны, а пласт маскі абрэжа яго ў невялікі круг у выглядзе профілю.
Стварыце пласт headerMask так:
headerMask = новы шырыня пласта: шырыня экрана, вышыня: 800 фон Колер: "празрысты"
Першы радок кода стварае і называе новы пласт. Затым, выкарыстоўваючы сінтаксіс водступу CoffeeScript, мы ўсталёўваем ўласцівасці шырыні, вышыні і фону. Мы будзем выкарыстоўваць празрысты фон, каб слаі знізу паказваліся пры пашырэнні фота аватары.
Далей стварыце пласт маскі:
маска = новы Шырыня пласта: 1000, вышыня: 1000 фон Колер: "празрысты", мяжа Радыус: 500 у: sketch.header.height - 100 суперШрыфт: загаловак Шкала маскі: 0,2, паходжаннеY: 0
Мы ствараем новы пласт і ўсталёўваем ўласцівасці такім жа чынам. Вялікая мяжаРадыус робіць гэты пласт кругам. Размяшчаем пласт маскі так, каб ён перакрываў пласт загалоўка, які быў імпартаваны з Sketch. Мы таксама зменшым да 20 працэнтаў, альбо 0,2. Пачатак нуля Y задае кропку прывязкі альбо рэгістрацыю выявы да верхняга краю.
Астатняе ўласцівасць, superLayer, усталёўвае створаны намі пласт headerMask як бацькоўскі элемент гэтага новага пласта. Так працуе маскіроўка ў Framer. Проста ўсталюйце ўласцівасць superLayer, і бацькоўскі пласт будзе маскіраваць дзіця.
Далей нам трэба стварыць графіку аватары і змясціць яе ў гэтыя новыя маскі. Для павелічэння і анімацыі межаў абрэзкі мы створым пласт аватары ўручную. Скапіруйце фатаграфію ў падтэчку 'images' у тэчцы праекта. Затым стварыце пласт, выкарыстоўваючы гэты малюнак:
аватара = новы малюнак пласта: "images / avatar.png" шырыня: mask.width, height: mask.height superLayer: маска, force2d: праўда
Звярніце ўвагу, што мы ўсталявалі суперслай аватары як пласт маскі. Цяпер абодва ўкладзены ў headerMask. Мы таксама ўсталёўваем шырыню і вышыню, каб малюнак цалкам запоўніў маскіраваную вобласць.
Нарэшце, мы створым зменную для захоўвання пазіцыі Y маскі, якую мы будзем выкарыстоўваць для анімацыі. Мы будзем цэнтраваць яго па гарызанталі, бо ён больш, чым экран.
maskY = mask.y mask.centerX ()
Вызначце дзяржавы
Першы крок у стварэнні анімацыі - вызначэнне пачатковага і канцавога стану. У Framer дзяржавы падобныя на ключавыя кадры, выпісаныя ў кодзе. Дзяржава - гэта проста сукупнасць уласцівасцей. Кожны пласт мае стан па змаўчанні. Для гэтага прататыпа гэты па змаўчанні будзе служыць пачатковым пунктам для анімацыі, таму нам трэба толькі ўсталяваць другі стан для кожнага пласта.
Сінтаксіс станаў вельмі просты. Звярніцеся да пласта, выкарыстоўвайце метад 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: "лёгкасць", time: 0.3 headerMask.states.animationOptions = curve: "spring (150, 20, 0)" mask.states.animationOptions = curve: "spring (300, 30, 0) "
Для пласта змесціва, які знікае і выходзіць, мы абярэм простую прадусталяваную крывую, лёгкасць і ўсталюем працягласць анімацыі на 0,3, каб яна была вельмі хуткай.
Для слаёў загалоўкі і маскі выкарыстоўвайце крыніцу спружыны. Для нашых мэтаў вам проста трэба ведаць, што значэнні крыніц спружыны змяняюць хуткасць і адскок анімацыі. Значэнні для пласта маскі зробяць яго анімацыю значна хутчэй, чым headerMask і змест. Для атрымання больш падрабязнай інфармацыі пра налады крывой спружыны звярніцеся да дакументацыі Framer па адрасе framerjs.com/docs.
Паспрабуйце на сапраўднай мабільнай прыладзе
Убачыць дызайн на рэальнай прыладзе нашмат больш эфектыўна, чым выкарыстоўваць эмулятары, і вы ўбачыце перавагі ў сваёй працы. Framer уключае люстраную функцыю, якая ўяўляе сабой убудаваны сервер, які прапануе URL-адрас вашага прататыпа праз лакальную сетку. Проста наведайце URL-адрас з дапамогай вашай прылады.
Вы даведаліся ўсё, што вам трэба ведаць для стварэння ўласных узораў у Framer. Што вы чакаеце?
Словы: Джарад Драйсдэйл
Джарад Драйсдэйл - аўтар, кансультант па дызайне, вытворца лічбавых прадуктаў. Гэты артыкул быў першапачаткова апублікаваны ў нумары 270 часопіса net.
Спадабалася гэта? Прачытайце гэтыя!
- Стварайце прататыпы, якія можна націснуць, у Sketch
- Як пачаць блог
- Лепшыя фотарэдактары
