Turinys
- Importuoti iš eskizo
- Sukurkite kaukės ir avataro sluoksnius
- Apibrėžkite būsenas
- Gyvenkite tarp valstybių
- Išbandykite tikrame mobiliajame įrenginyje
Dizaino prototipų samprotavimai nėra nauji - jie yra tokie patys, kaip ir naršyklėje. Kai pamatote dizainą realiame kontekste, jis yra visiškai kitoks. Geresnius sprendimus priimate tada, kai nereikia daryti prielaidų, kaip sąsaja veiks ir jausis. Tai gali atrodyti kaip papildomas darbas, tačiau įžvalgos, kurias galite įgyti pamatę, kad jūsų dizainas yra neįkainojamas.
„Framer“ yra naujas kodas pagrįstas prototipų kūrimo įrankis. Galite sukurti maketus „Sketch“ (arba „Photoshop“), kaip paprastai, ir importuoti juos į „Framer“. Tada parašykite šiek tiek „CoffeeScript“ ir galėsite daug nuveikti.
Aš išmokysiu jus „Framer“ prototipų kūrimo pagrindų, naudodamas „iOS“ programos prototipo pavyzdį su dviem rodiniais: profilio rodiniu ir priartintu vartotojo avataro vaizdo rodiniu. Prototipuosime, kaip atidaromas ir uždaromas išplėstinis nuotraukų rodinys, taip pat jį animuosime. Peržiūrėkite internetinę demonstracinę versiją čia (jei norite pamatyti šaltinio kodą, tiesiog spustelėkite piktogramą viršutiniame kairiajame kampe). Jums taip pat reikės nemokamos „Framer“ bandomosios versijos, kurią galite gauti svetainėje framerjs.com.
Importuoti iš eskizo
Pirmasis žingsnis yra sluoksnių importavimas iš „Sketch“ į „Framer“. Tiesiog spustelėkite mygtuką „Importuoti“, esantį „Framer“, kol „Sketch“ yra atidarytas dizainas, ir po to esančiame dialogo lange pasirinkite tinkamą failą. Kadravimo įrenginys automatiškai importuos vaizdus iš kiekvieno sluoksnio ir padarys juos prieinamus naudojant tokį kodą:
eskizas = Framer.Importer.load "importuotas / profilis"
Norėdami pasiekti importuotus sluoksnius, naudokite tą kintamąjį. Pvz., Norėdami nurodyti „Sketch“ failo sluoksnį pavadinimu „content“, „Framer“ įveskite sketch.content.
Sukurkite kaukės ir avataro sluoksnius
Pagrindinė šio prototipo funkcija yra išplėsti avataro vaizdą, kai jis paliečiamas, ir tada jį uždaryti, kai jis dar kartą paliečiamas. Pirmiausia sukursime du kaukės sluoksnius - įdėtą kaukę arba kaukę kitos kaukės viduje. Mes animuosime abi kaukes vienu metu, kad sukurtume gražų, subtilų atidarymo ir uždarymo efektą. Išskleidus „headerMask“ sluoksnį, avataro nuotrauka bus apkarpyta stačiakampiu, o kaukės sluoksnis ją apkarpys į mažą apskritimą profilio rodinyje.
Sukurkite „headerMask“ sluoksnį taip:
headerMask = new Sluoksnio plotis: Screen.width, height: 800 backgroundColor: "transparent"
Pirmoji kodo eilutė sukuria ir pavadina naują sluoksnį. Tada, naudodami „CoffeeScript“ įtraukos sintaksę, nustatome pločio, aukščio ir fono savybes. Mes naudosime skaidrų foną, kad apačioje esantys sluoksniai būtų rodomi išplėtus avataro nuotrauką.
Tada sukurkite kaukės sluoksnį:
kaukė = naujas Sluoksnio plotis: 1000, aukštis: 1000 fono Spalva: "skaidrus", kraštasRadiusas: 500 m: eskizas.viršis.aukštis - 100 superluoksnis: antraštėMaskos skalė: 0,2, kilmėY: 0
Mes sukuriame naują sluoksnį ir nustatome savybes tuo pačiu būdu. Didelis borderRadius daro šį sluoksnį apskritimą. Kaukės sluoksnis išdėstomas taip, kad jis sutampa su antraštės sluoksniu, kuris buvo importuotas iš eskizo. Mes taip pat sumažinsime iki 20 proc., Arba 0,2. Nulio pradžia nuliui nustato vaizdo tvirtinimo tašką arba registraciją viršutiniame krašte.
Likusi nuosavybė „superLayer“ nustato mūsų sukurtą headerMask sluoksnį kaip šio naujo sluoksnio tėvą. Štai kaip „Framer“ veikia maskavimas. Tiesiog nustatykite ypatybę „superLayer“, o pagrindinis sluoksnis užmaskuos vaiką.
Tada turime sukurti avataro grafiką ir įdėti ją į tas naujas kaukes. Norėdami padidinti ir animuoti apkarpymo ribas, rankiniu būdu sukursime avataro sluoksnį. Nukopijuokite nuotrauką į projekto aplanko aplanką „images“. Tada sukurkite sluoksnį naudodami tą vaizdą:
avatar = new Sluoksnio vaizdas: "images / avatar.png" plotis: mask.width, height: mask.height superLayer: mask, force2d: true
Atkreipkite dėmesį, kad avataro „superLayer“ nustatėme kaip kaukės sluoksnį. Dabar abu yra įdėti į headerMask. Mes taip pat nustatome plotį ir aukštį, kad vaizdas visiškai užpildytų užmaskuotą plotą.
Galiausiai sukursime kintamąjį, kad išsaugotume animacijos metu naudojamos kaukės Y padėtį. Centruosime horizontaliai, nes jis didesnis nei ekranas.
maskY = mask.y mask.centerX ()
Apibrėžkite būsenas
Pirmasis animacijos kūrimo žingsnis yra pradinės ir pabaigos būsenos apibrėžimas. „Framer“ režime būsenos yra tarsi raktiniai kadrai, užrašyti kodu. Valstybė yra tik savybių rinkinys. Kiekvienas sluoksnis turi numatytąją būseną. Šiam prototipui tas numatytasis veiksmas bus animacijos pradžios taškas, todėl kiekvienam sluoksniui turime nustatyti tik antrą būseną.
Būsenų sintaksė yra labai paprasta. Nurodykite sluoksnį, naudokite metodą layer.states.add () ir išvardykite įtraukiamas ypatybes.
sketch.content.states.add (paslėpti: {neskaidrumas: 0}) headerMask.states.add (perkelti: {y: 120}) mask.states.add (augti: {mastas: 1.1, y: kaukėY - 420})
Antroji turinio sluoksnio būsena, kuri buvo importuota iš „Sketch“ ir kurioje yra visi kiti profilio ekrano elementai, turėtų būti visiškai skaidri. Tokiu būdu, kai avataras bus išplėstas, mes turėsime juodą foną, o likusios importuotos piktogramos ir elementai bus rodomi.
Antroji kodo eilutė sukuria „headerMask“ būseną, kuri paprasčiausiai perkelia ją žemyn į Y padėtį 120. Tai leis pavadinimo ir uždarymo mygtuką rodyti ekrano viršuje, kai padidinama avataro nuotrauka. Taip pat bus animuotos avataro nuotraukos apkarpymo ribos.
Galiausiai, nauja kaukės sluoksnio būsena padidins ir padidins jį naudodama anksčiau sukurtą „maskY“ kintamąjį. Kadangi kaukės sluoksnio origY (arba tvirtinimo taškas) yra jo viršutinis kraštas, turime jį pakelti 420 taškų aukštyn, kad būtų matomas vaizdo centras.
Gyvenkite tarp valstybių
Norėdami animuoti tarp numatytųjų būsenų ir ką tik sukurtų naujų, mums reikia tik dar keturių kodo eilučių. Avataro sluoksnyje nustatysime paspaudimų tvarkytuvą. Kai vartotojas palies jį profilio ekrane, pereisime prie išplėstinio rodinio pagal dviračių būsenas. Kai dar kartą paliesite, mes grįšime į numatytąsias būsenas, kad jis grįžtų į mažą ratą. Tos pačios kodo eilutės tvarko abi sąveikas:
avatar.on Events.Click, -> headerMask.states.next () mask.states.next () sketch.content.states.next ()
Pirmoje šio bloko eilutėje nustatomas paspaudimų tvarkytuvas avataro sluoksnyje. Bet kuriuo metu paspaudus, nesvarbu, kaip jis yra apkarpytas ar kokio dydžio, bus vykdomi paskesni teiginiai.
Tada mes tiesiog remiamės kiekvienu sluoksniu, o būsenoms perjungti naudojame metodą layer.states.next (). Kai naudosite layer.states.next (), „Framer“ naudos numatytuosius vidinius animacijos nustatymus. Tai nepaprastai patogu, tačiau galite sukurti dar geresnes animacijas, patikslindami animacijos kreives.
Naudodami tokias būsenas, kaip mes esame čia, galite lengvai pakeisti kiekvieną animacijos kreivę atskirai, naudodami nuosavybę layer.states.animationOptions. Vos tris kartus šiek tiek pakoregavus, animacija jaučiasi visiškai kitaip:
sketch.content.states.animationOptions = kreivė: "lengvumas", laikas: 0.3 headerMask.states.animationOptions = kreivė: "spring (150, 20, 0)" mask.states.animationOptions = kreivė: "spring (300, 30, 0) "
Išnykstančiam ir įsibėgėjančiam turinio sluoksniui pasirinksime paprastą kreivės išankstinį nustatymą, lengvumą ir animacijos trukmę nustatysime į 0,3, kad ji būtų labai greita.
HeaderMask ir kaukės sluoksniams naudokite spyruoklinę kreivę. Mūsų tikslais jūs tiesiog turite žinoti, kad pavasario kreivės vertės keičia animacijos greitį ir atšokimą. Kaukės sluoksnio vertės sukurs animaciją daug greičiau nei headerMask ir turinys. Norėdami gauti daugiau informacijos apie pavasario kreivės nustatymus, žr. „Framer“ dokumentaciją, esančią framerjs.com/docs.
Išbandykite tikrame mobiliajame įrenginyje
Matyti dizainą realiame įrenginyje yra daug efektyviau nei naudoti emuliatorius, ir jūs pamatysite savo darbo naudą. „Framer“ apima veidrodinę funkciją, kuri yra įmontuotas serveris, kuris siūlo prototipo URL vietiniame tinkle. Tiesiog apsilankykite URL naudodami savo įrenginį.
„Framer“ sužinojote viską, ką reikia žinoti, norint sukurti savo dizainą. Ko lauki?
Žodžiai: Jarrodas Drysdale'as
Jarrodas Drysdale'as yra autorius, dizaino konsultantas, skaitmeninių produktų gamintojas. Šis straipsnis iš pradžių buvo paskelbtas internetinio žurnalo 270 numeryje.
Jums tai patiko? Perskaitykite tai!
- Sukurkite paspaudžiamus gyvus „Sketch“ prototipus
- Kaip sukurti tinklaraštį
- Geriausi nuotraukų redaktoriai
