Мундариҷа
- Воридот аз эскиз
- Эҷоди қабатҳои ниқоб ва аватар
- Давлатҳоро муайян кунед
- Аниматсия байни давлатҳо
- Онро дар дастгоҳи воқеии мобилӣ санҷед
Сабаби прототипи тарроҳӣ нав нест - ин ҳамон тавре ки ҳама ғавғои тарроҳӣ дар браузер аст. Вақте ки шумо тарроҳиро дар заминаи воқеии худ мебинед, он комилан фарқ мекунад. Вақте ки шумо набояд дар бораи он, ки чӣ гуна интерфейс кор хоҳад кард ва эҳсос мекунад, шумо қарорҳои беҳтар қабул мекунед. Ин метавонад ба монанди кори иловагӣ садо диҳад, аммо фаҳмишҳое, ки шумо бо дидани кори тарроҳии худ ба даст меоред, бебаҳоянд.
Framer воситаи нави прототипи дар асоси рамз аст. Шумо метавонед макетҳоро дар Sketch (ё Photoshop) тавре, ки одатан сохта будед, сохта, ба Framer ворид кунед. Сипас, каме CoffeeScript нависед ва шумо метавонед бисёр чизҳоро ба анҷом расонед.
Ман мехоҳам ба шумо асосҳои прототипро дар Framer бо истифода аз намунаи прототипи барномаи iOS бо ду намуд омӯзам: намуди профил ва намуди масофаи тасвири аватари корбар. Мо прототип мекунем, ки чӣ гуна намуди акси васеъ кушода ва пӯшида мешавад ва мо онро низ аниматсия мекунем. Намоиши онлайнро дар ин ҷо тамошо кунед (барои дидани коди сарчашма, танҳо нишонаро дар гӯшаи чапи боло пахш кунед). Инчунин ба шумо озмоиши ройгони Framer лозим аст, ки шумо метавонед онро дар framerjs.com дастрас кунед.
Воридот аз эскиз
Қадами аввал ин ворид кардани қабатҳои Sketch ба Framer мебошад. Ҳангоми тарроҳӣ дар Sketch тугмаи Воридот дар Framer -ро клик кунед ва дар диалоги зерин файли дурустро интихоб кунед. Framer тасвирҳоро аз ҳар як қабат ба таври худкор ворид мекунад ва онҳоро тавассути рамз дастрас мекунад:
эскиз = Framer.Importer.load "ворид / профил"
Барои дастрасӣ ба қабатҳои воридшуда он тағирёбандаро истифода баред. Масалан, барои истинод ба қабати бо номи 'мундариҷа' дар файли Sketch, шумо sketch.content -ро дар Framer нависед.
Эҷоди қабатҳои ниқоб ва аватар
Вазифаи асосии ин прототип аз он иборат аст, ки тасвири аватарро ҳангоми пахш карданаш васеъ намоед ва пас аз он, ки дубора зер карда шавад, онро пӯшед. Аввалан, мо ду қабати ниқобро месозем - ниқоби лона, ё ниқоб дар дохили ниқоби дигар. Мо ҳарду ниқобро якбора аниматсия мекунем, то эффектҳои хуби нозуки пӯшиданро ба вуҷуд орем. Қабати headerMask сурати аватарро ҳангоми паҳн шуданаш ба росткунҷа мекашад ва қабати ниқоб онро ба доираи хурд дар намуди профил мекашонад.
Қабати headerMask -ро чунин созед:
headerMask = паҳнои қабати нав: Screen.width, баландӣ: 800 backgroundColor: "transparent"
Сатри якуми код қабати навро эҷод мекунад ва ном мегузорад. Сипас, бо истифода аз синтаксиси ишораи CoffeeScript мо хосиятҳои паҳноӣ, баландӣ ва заминаро таъин кардем. Мо заминаи шаффофро истифода хоҳем бурд, то қабатҳои поён ҳангоми васеъ шудани акси аватар нишон диҳанд.
Баъд, қабати ниқобро эҷод кунед:
ниқоб = паҳнои қабати нав: 1000, баландӣ: 1000 замина Ранг: "шаффоф", ҳошияРадиус: 500 y: sketch.header.height - 100 superLayer: header Масштаб миқёс: 0.2, пайдоиш Y: 0
Мо қабати нав эҷод мекунем ва хосиятҳоро бо ҳамин тарз муқаррар мекунем. BorderRadius калон ин қабатро ба давра табдил медиҳад. Мо қабати ниқобро тавре ҷойгир менамоем, ки он қабати сарлавҳаро, ки аз Sketch ворид карда шудааст, такрор кунад. Мо инчунин то 20 фоиз, ё 0,2. Пайдоиши сифр нуқтаи лангар ё сабти тасвирро ба канори боло таъин мекунад.
Амволи боқимонда, superLayer, қабати headerMask -ро, ки мо онро ҳамчун волидайни ин қабати нав сохтаем, таъин мекунад. Ин аст, ки чӣ тавр маска дар Framer кор мекунад. Танҳо хусусияти superLayer -ро таъин кунед, ва қабати волидайн кӯдакро ниқоб хоҳад кард.
Баъдан, мо бояд графикаи аватарро созем ва дар дохили он ниқобҳои нав ҷойгир кунем. Барои наздик кардан ва аниматсия кардани ҳудуди зироат, мо дастӣ қабати аватар месозем. Аксро ба зерпапкаи 'тасвирҳо' -и ҷузвдони лоиҳа нусхабардорӣ кунед. Пас бо истифода аз он тасвир як қабат эҷод кунед:
аватар = Тасвири қабати нав: "images / avatar.png" паҳнои: mask.width, баландӣ: mask.height superLayer: mask, force2d: true
Аҳамият диҳед, ки мо superLayer аватарро қабати ниқоб таъин кардем. Ҳоло ҳарду дар дохили headerMask ҷойгир шудаанд. Мо инчунин паҳн ва баландиро муқаррар кардем, то тасвир майдони ниқобшударо пурра пур кунад.
Дар ниҳоят, мо тағирёбандаеро барои нигоҳ доштани мавқеи Y-и ниқобе месозем, ки барои аниматсия истифода хоҳем кард. Мо онро ба таври уфуқӣ мутамарказ хоҳем кард, зеро он аз экран калонтар аст.
maskY = mask.y mask.centerX ()
Давлатҳоро муайян кунед
Қадами аввал дар сохтани аниматсия муайян кардани ҳолатҳои ибтидоӣ ва интиҳоӣ мебошад. Дар Framer, ҳолатҳо ба монанди фреймҳои калидӣ мебошанд, ки бо рамз навишта шудаанд. Давлат танҳо маҷмӯи хосиятҳост. Ҳар як қабат ҳолати пешфарз дорад. Барои ин прототип ин пешфарз ҳамчун нуқтаи ибтидоии аниматсия хизмат мекунад, бинобар ин ба мо танҳо лозим аст, ки барои ҳар як қабат ҳолати дуюмро гузорем.
Синтаксис барои давлатҳо хеле содда аст. Ба қабат муроҷиат кунед, усули layer.states.add () -ро истифода баред ва сипас хосиятҳоро дохил кунед.
sketch.content.states.add (hide: {opacity: 0}) headerMask.states.add (move: {y: 120}) mask.states.add (калон: {scale: 1.1, y: maskY - 420})
Ҳолати дуюм барои қабати мундариҷа, ки аз Sketch ворид карда шудааст ва дорои ҳамаи дигар унсурҳои экрани профил мебошад, бояд комилан шаффоф бошад. Ҳамин тавр, вақте ки аватара васеъ карда мешавад, мо заминаи сиёҳ пайдо хоҳем кард ва нишонаҳо ва унсурҳои боқимондаи воридот нишон хоҳанд дод.
Сатри дуюми код ҳолати headerMask -ро ба вуҷуд меорад, ки онро танҳо ба мавқеи Y-и 120 интиқол медиҳад. Ин имкон медиҳад, ки сарлавҳа ва тугмаи пӯшида ҳангоми калон кардани акси аватар дар болои экран нишон дода шаванд. Он инчунин ҳудуди зироати акси аватарро аниматсия мекунад.
Ниҳоят, ҳолати нав барои қабати ниқоб ҳам бо истифода аз тағирёбандаи maskY, ки қаблан сохта будем, онро ҳам калонтар мекунад ва ҳам боло мебарад. Азбаски originY (ё нуқтаи лангари) қабати ниқоб канори болоии он аст, мо бояд онро бо 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: "ease", вақт: 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 маҷалла чоп шудааст.
Ин ба шумо писанд омад? Инҳоро бихонед!
- Дар эскиз прототипҳои кликшаванда ва зинда эҷод кунед
- Чӣ гуна блогро оғоз кардан лозим аст
- Беҳтарин муҳаррирони акс
