Мазмұны
- Эскизден импорттау
- Маска және аватар қабаттарын жасаңыз
- Күйлерді анықтаңыз
- Мемлекеттер арасындағы анимация
- Оны нақты мобильді құрылғыда қолданып көріңіз
Дизайнды прототиптеудің негізі жаңа емес - бұл браузерде дизайн жасау туралы барлық шу сияқты. Дизайнды нақты контексте көргенде, ол мүлдем басқаша болады. Сіз интерфейстің қалай жұмыс істейтіні және сезінетіндігі туралы болжамдар жасау қажет болмаған кезде жақсы шешім қабылдайсыз. Бұл қосымша жұмыс сияқты көрінуі мүмкін, бірақ сіздің дизайныңыздың жұмыс жасауын көру арқылы алуға болатын түсініктер өте маңызды.
Framer - прототипті кодқа негізделген жаңа құрал. Әдеттегідей Sketch (немесе Photoshop) бағдарламасында макеттер жасай аласыз және оларды Framer-ге импорттай аласыз. Содан кейін, кішкене CoffeeScript жазыңыз, сонда сіз көп нәрсені жасай аласыз.
IOS қосымшасының прототипінің мысалын қолдана отырып, Framer-де прототиптеудің негіздерін үйретемін, екі көрінісі бар: профиль көрінісі және пайдаланушының аватар суретінің үлкейтілген көрінісі. Біз кеңейтілген фотосурет көрінісінің қалай ашылатынын және жабылатындығын прототиптейміз, сонымен қатар оны анимациялаймыз. Онлайн демонстрациясын осы жерден көріңіз (бастапқы кодты көру үшін сол жақ бұрыштағы белгішені нұқыңыз). Сондай-ақ сізге Framer-ді framerjs.com сайтынан алуға болатын ақысыз сынақ нұсқасы қажет болады.
Эскизден импорттау
Бірінші қадам - Sketch-тен Framer-ге қабаттарды импорттау. Дизайн Sketch ашық болған кезде Framer ішіндегі Import батырмасын шертіп, диалог терезесінен дұрыс файлды таңдаңыз. Framer автоматты түрде әр қабаттан кескіндерді импорттайды және оларға келесі код арқылы қол жеткізеді:
sketch = Framer.Importer.load «импортталған / профиль»
Импортталған қабаттарға қол жеткізу үшін сол айнымалыны пайдаланыңыз. Мысалы, Sketch файлындағы «мазмұн» деп аталатын қабатқа сілтеме жасау үшін Framer ішіне sketch.content деп тересіз.
Маска және аватар қабаттарын жасаңыз
Бұл прототиптің негізгі қызметі аватар суретін түрткен кезде оны кеңейту, содан кейін оны қайтадан түрткенде жабу болып табылады. Алдымен біз екі маска қабатын жасаймыз - салынған маска немесе басқа масканың ішіндегі маска. Біз жағымды, нәзік ашылу және жабылу әсерін жасау үшін екі масканы да бірден анимациялаймыз. HeaderMask қабаты аватар фотосын кеңейткенде тіктөртбұрышқа қиып алады, ал маска қабаты оны профиль көрінісіндегі шағын шеңберге қиып алады.
HeaderMask қабатын келесідей жасаңыз:
headerMask = жаңа Қабаттың ені: Screen.width, height: 800 backgroundColor: «мөлдір»
Кодтың бірінші жолы жаңа қабатты жасайды және атайды. Содан кейін, CoffeeScript шегініс синтаксисін қолданып, ені, биіктігі және фондық қасиеттерін орнатамыз. Біз мөлдір фонды қолданамыз, сондықтан аватар фотосуреті кеңейтілген кезде астындағы қабаттар көрінеді.
Содан кейін маска қабатын жасаңыз:
маска = жаңа Қабаттың ені: 1000, биіктігі: 1000 фон Түс: «мөлдір», шекараРадиус: 500 у: sketch.header.height - 100 суперҚабат: тақырып Маска масштабы: 0,2, шығу тегі: 0
Біз жаңа қабат құрып, қасиеттерді дәл осылай орнатамыз. Ірі borderRadius бұл қабатты шеңберге айналдырады. Біз маска қабатын Sketch-тен импортталған тақырыптың қабатымен қабаттасатын етіп орналастырамыз. Біз сондай-ақ 0,2-ге дейін 20 пайызға дейін өсеміз. Нөлдің бас нүктесі суреттің тірек нүктесін немесе тіркеуді жоғарғы жиекке орнатады.
Қалған қасиет, superLayer, біз құрған headerMask қабатын осы жаңа қабаттың ата-анасы ретінде орнатады. Фреймерлерде маскировка осылай жұмыс істейді. Жай superLayer қасиетін орнатыңыз, сонда ата-ана қабаты баланы бүркемелейді.
Әрі қарай біз аватар графикасын құрып, оны сол жаңа маскаларға орналастыруымыз керек. Кесу шекараларын үлкейту және жандандыру үшін аватар қабатын қолмен жасаймыз. Фотосуретті жоба қалтасының ‘суреттер’ ішкі қалтасына көшіріңіз. Содан кейін сол суретті пайдаланып қабат жасаңыз:
аватар = жаңа Қабат кескіні: «images / avatar.png» ені: маска. ені, биіктігі: маска. биіктігі 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: maskY - 420})
Sketch-тен импортталған және басқа барлық профиль экранының элементтерін қамтитын мазмұн деңгейіне арналған екінші күй толық мөлдір болуы керек. Осылайша, аватар кеңейтілгенде, бізде қара фон пайда болады, ал қалған импортталған белгішелер мен элементтер көрінеді.
Кодтың екінші жолында headerMask күйі пайда болады, ол оны 120-ға тең Y күйіне ауыстырады. Бұл аватар фотосуреті үлкейтілген кезде экранның жоғарғы жағында тақырып пен жабу батырмасын көрсетуге мүмкіндік береді. Ол аватар фотосуретінің кесу шекараларын жандандырады.
Соңында, маска қабаты үшін жаңа күй біз оны бұрын жасаған 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 = қисық: «жеңілдік», уақыт: 0,3 headerMask.states.animationOptions = қисық: «серіппе (150, 20, 0)» маска.статтар.animationOptions = қисық: «серіппе (300, 30, 0) «
Өшіп бара жатқан мазмұн қабаты үшін біз алдын-ала қисық сызықты таңдаймыз, жеңілдетеміз және анимацияның ұзақтығын 0,3 етіп орнатамыз, сонда ол өте тез болады.
Маска және маска қабаттары үшін серіппелі қисықты қолданыңыз. Біздің мақсатымыз үшін серіппелік қисық мәндері анимацияның жылдамдығы мен серпілісін өзгертетінін білу керек. Маска қабаты үшін мәндер оның анимациясын headerMask мен мазмұнға қарағанда әлдеқайда жылдам етеді. Көктемгі қисық параметрлері туралы қосымша ақпаратты Framerjs.com/docs мекенжайындағы Framer құжаттамасынан қараңыз.
Оны нақты мобильді құрылғыда қолданып көріңіз
Дизайнды нақты құрылғыда көру эмуляторларды қолданудан гөрі әлдеқайда тиімдірек, және сіз өз жұмысыңыздың артықшылығын көресіз. Framer-де айна функциясы бар, ол сіздің прототипіңізге URL мекенжайын жергілікті желі арқылы ұсынатын кіріктірілген сервер. Құрылғыны пайдаланып URL мекенжайына кіру жеткілікті.
Сіз өзіңіздің дизайныңызды Framer-де прототиптеу үшін сізге қажет барлық нәрсені білдіңіз. Сіз не күтесіз?
Сөздер: Джаррод Дрисдейл
Джаррод Дрисдейл - автор, дизайн бойынша кеңесші, сандық өнім өндірушісі. Бұл мақала алғашында нет журналдың 270 санында жарияланған.
Ұнады ма? Оларды оқыңыз!
- Эскизде нұқылатын, тірі прототиптер жасаңыз
- Блогты қалай бастауға болады
- Үздік фото редакторлар
