Садржај
- Увоз из Скице
- Направите слојеве маске и аватара
- Дефинисати државе
- Анимација између држава
- Испробајте на правом мобилном уређају
Разлози за прототипирање дизајна нису нови - исти су као и сви детаљи о дизајнирању у прегледачу. Када видите дизајн у стварном контексту, он је потпуно другачији. Боље одлуке доносите када не морате да претпостављате како ће интерфејс функционисати и осећати се. Ово може звучати као додатни посао, али увиди које можете стећи видећи да ваш дизајн ради су непроцењиви.
Фрамер је нови алат за израду прототипова заснован на коду. У Скетцх-у (или Пхотосхопу) можете да креирате макете као што то обично радите и да их увезете у Фрамер. Затим напишите мало ЦоффееСцрипт-а и можете много постићи.
Научићу вас основама израде прототипова у програму Фрамер, користећи пример прототипа иОС апликације са два приказа: приказ профила и увећани приказ слике корисника. Прототипираћемо како ће се проширени приказ фотографија отварати и затварати, а такође ћемо га анимирати. Прегледајте онлајн демонстрацију овде (да бисте видели изворни код, само кликните икону у горњем левом углу). Такође ће вам требати бесплатна проба Фрамера, коју можете добити на фрамерјс.цом.
Увоз из Скице
Први корак је увоз слојева из програма Скетцх у Фрамер. Једноставно кликните на дугме Увези у програму Фрамер док је дизајн отворен у програму Скица и одаберите тачну датотеку у дијалогу који следи. Фрамер ће аутоматски увести слике из сваког слоја и учинити их доступним путем кода попут овог:
скетцх = Фрамер.Импортер.лоад "увезени / профил"
Користите ту променљиву за приступ увеженим слојевима. На пример, да бисте референцирали слој под називом „садржај“ у датотеци Скетцх, откуцајте скетцх.цонтент у програму Фрамер.
Направите слојеве маске и аватара
Основна функција овог прототипа је да прошири слику аватара када се додирне, а затим да је затвори када поново додирне. Прво ћемо створити два слоја маске - угнежђену маску или маску унутар друге маске. Анимираћемо обе маске одједном да бисмо створили леп, суптилан ефекат отварања и затварања. Слој хеадерМаск ће обрезати фотографију аватара у правоугаоник када се прошири, а слој маске ће је обрезати у мали круг на приказу профила.
Направите слој хеадерМаск овако:
хеадерМаск = нова ширина слоја: ширина екрана, висина: 800 бацкгроундЦолор: "транспарент"
Прва линија кода креира и именује нови слој. Затим смо, користећи синтаксу увлачења ЦоффееСцрипт-а, поставили својства ширине, висине и позадине. Користићемо прозирну позадину како би се слојеви испод приказали када се фотографија аватара прошири.
Затим креирајте слој маске:
маска = нова Ширина слоја: 1000, висина: 1000 позадина Боја: "прозирна", границаРадиус: 500 и: скетцх.хеадер.хеигхт - 100 суперЛаиер: хеадерМаска скале: 0,2, исходиштеИ: 0
На исти начин креирамо нови слој и постављамо својства. Велика границаРадиус чини овај слој кругом. Слој маске поставимо тако да се преклапа са заглавним слојем који је увезен из Скетцх-а. Такође ћемо смањити на 20 процената или 0,2. ОригинИ од нуле поставља тачку сидришта или регистрацију слике на горњу ивицу.
Преостало својство, суперЛаиер, поставља слој хеадерМаск који смо креирали као родитеља овог новог слоја. Овако маскирање делује код Фрамера. Једноставно подесите својство суперЛаиер, а родитељски слој ће маскирати дете.
Даље, треба да креирамо графику аватара и поставимо је у те нове маске. Да бисмо зумирали и анимирали границе обрезивања, ручно ћемо направити слој аватара. Копирајте фотографију у подмапу ’имагес’ директоријума пројекта. Затим креирајте слој користећи ту слику:
аватар = нови Слој слика: "имагес / аватар.пнг" ширина: маск.видтх, хеигхт: маск.хеигхт суперЛаиер: маск, форце2д: труе
Приметите да смо супер слој аватара поставили као слој маске. Обе су сада угнежђене у хеадерМаск. Такође смо поставили ширину и висину тако да слика у потпуности испуњава маскирано подручје.
На крају, направићемо променљиву за чување И положаја маске коју ћемо користити за анимацију. Усредсредићемо га водоравно, јер је већи од екрана.
маскИ = маск.и маск.центерКс ()
Дефинисати државе
Први корак у креирању анимације је дефинисање почетног и завршног стања. У Фрамеру су државе попут кључних кадрова исписаних у коду. Држава је само скуп својстава. Сваки слој има подразумевано стање. За овај прототип, тај подразумевани податак ће служити као почетна тачка за анимацију, тако да само треба да поставимо друго стање за сваки слој.
Синтакса стања је врло једноставна. Наведите референцу на слој, користите методу лаиер.статес.адд (), а затим наведите својства која треба укључити.
скетцх.цонтент.статес.адд (сакриј: {непрозирност: 0}) хеадерМаск.статес.адд (потез: {и: 120}) маск.статес.адд (расте: {скала: 1.1, и: маскИ - 420})
Друго стање за слој садржаја, који је увезен из Скетцх-а и садржи све остале елементе екрана профила, требало би да буде потпуно транспарентно. На овај начин, када се аватар прошири, имаћемо црну позадину, а преостале увезене иконе и елементи ће се приказати.
Други ред кода креира стање за хеадерМаск, које ће га једноставно преместити на И позицију од 120. То ће омогућити да се наслов и дугме за затварање прикажу на врху екрана када се фотографија аватар увећа. Такође ће анимирати границе обрезивања фотографије аватара.
И на крају, ново стање за слој маске ће га повећати и померити према горе, користећи варијаблу маскИ коју смо раније креирали. Будући да је исходиште И (или тачка сидришта) слоја маске његова горња ивица, морамо да га померимо за 420 пиксела тако да је видљив центар слике.
Анимација између држава
Да бисмо анимирали између подразумеваних стања и нових које смо управо креирали, требају нам само још четири линије кода. Поставићемо обрађивач кликова на слој аватара. Када га корисник куцне на екрану профила, прећи ћемо на проширени приказ према статусима бициклизма. Када се поново додирне, вратићемо се на подразумевана стања, тако да се врати у мали круг. Исте линије кода обрађују обе интеракције:
аватар.он Евентс.Цлицк, -> хеадерМаск.статес.нект () маск.статес.нект () скетцх.цонтент.статес.нект ()
Прва линија овог блока поставља обрађивач кликова на слоју аватара. Сваки пут када се додирне, без обзира на то како је изрезана или које је величине, покренуће се изјаве које следе.
Тада једноставно упућујемо на сваки слој и користимо методу лаиер.статес.нект () за пребацивање стања. Када користите лаиер.статес.нект (), Фрамер ће користити унутрашње подразумеване поставке анимације. Ово је изузетно згодно, али можете створити још боље анимације финовањем кривих анимације.
Када користите стања као што смо ми овде, можете лако променити сваку криву анимације засебно користећи својство лаиер.статес.аниматионОптионс. Са само три незнатна подешавања, анимација се осећа потпуно другачије:
скетцх.цонтент.статес.аниматионОптионс = кривуља: "лакоћа", време: 0,3 хеадерМаск.статес.аниматионОптионс = цурве: "спринг (150, 20, 0)" маск.статес.аниматионОптионс = цурве: "спринг (300, 30, 0) "
За слој садржаја који се гаси и бирали, одабрићемо једноставну унапред подешену криву, једноставност и трајање анимације на 0,3, тако да је врло брз.
За слојеве заглавља и маске користите опружну криву. У наше сврхе, само треба да знате да вредности кривине опруге мењају брзину и одскок анимације. Вредности за слој маске учиниће његову анимацију много бржом од заглавља маске и садржаја. За више детаља о подешавањима кривуље опруге, погледајте Фрамерову документацију на фрамерјс.цом/доцс.
Испробајте на правом мобилном уређају
Гледање дизајна на стварном уређају је много ефикасније од коришћења емулатора и видећете користи у свом раду. Фрамер укључује функцију огледала, која је уграђени сервер који нуди УРЛ вашег прототипа преко ваше локалне мреже. Једноставно посетите УРЛ помоћу свог уређаја.
Научили сте све што треба да знате да бисте направили прототип сопствених дизајна у Фрамеру. Шта чекаш?
Речи: Јаррод Дрисдале
Јаррод Дрисдале је аутор, саветник за дизајн, произвођач дигиталних производа. Овај чланак је првобитно објављен у броју 270 часописа нет.
Свиђа вам се ово? Прочитајте ово!
- Створите прототипове уживо на које можете кликнути у програму Скетцх
- Како покренути блог
- Најбољи уредници фотографија
