Tartalom
- Importálás a Vázlatból
- Hozzon létre maszk és avatar rétegeket
- Állapotok meghatározása
- Éljen az államok között
- Próbálja ki egy igazi mobil eszközön
A tervezési prototípusok mögött álló érvelés nem új keletű - ugyanolyan, mint a böngészőben a tervezéssel kapcsolatos összes hang. Amikor egy designt a valós kontextusában lát, teljesen más. Jobb döntéseket hozol, amikor nem kell feltételezned a felület működéséről és érzéséről. Ez többletmunkának tűnhet, de felbecsülhetetlenek azok a betekintések, amelyeket megszerezhet, ha meglátja a tervét.
A Framer egy új kódalapú prototípus-készítő eszköz. A Sketch-ben (vagy Photoshopban) a szokásos módon hozhat létre maketteket, és importálhatja őket a Framer-be. Ezután írjon egy kis CoffeeScript-t, és sok mindent el tud érni.
A prototípus készítésének alapjait megtanítom a Framer-re, egy iOS alkalmazás prototípusának példáján keresztül, két nézettel: profilnézet és nagyított nézet a felhasználó avatar képével. Prototípusozzuk, hogyan nyílik és záródik a kibővített fotónézet, és animáljuk is. Itt tekintheti meg az online bemutatót (a forráskód megtekintéséhez kattintson a ikonra a bal felső sarokban). Szüksége lesz a Framer ingyenes próbaverziójára is, amelyet a framerjs.com oldalon szerezhet be.
Importálás a Vázlatból
Az első lépés a rétegek importálása a Sketch-ből a Framer-be. Egyszerűen kattintson az Importálás gombra a Framer alkalmazásban, amíg a rajz meg van nyitva a Sketch alkalmazásban, és válassza ki a megfelelő fájlt a következő párbeszédpanelen. A Framer automatikusan importálja a képeket az egyes rétegekből, és hozzáférhetővé teszi ezeket a kódokat:
sketch = Framer.Importer.load "importált / profil"
Használja ezt a változót az importált rétegek eléréséhez. Például a „tartalom” nevű réteg hivatkozására a Sketch fájlban a sketch.content parancsot írja be a Framer fájlba.
Hozzon létre maszk és avatar rétegeket
Ennek a prototípusnak az a fő feladata, hogy kibővítse az avatar képet, amikor megérinti, majd bezárja, amikor újra megérinti. Először két maszkréteget hozunk létre - beágyazott maszkot, vagy egy maszkot egy másik maszk belsejében. Egyszerre animáljuk mindkét maszkot, hogy szép, finom nyitó és záró hatást érjünk el. A headerMask réteg az avatar fotót téglalapra vágja, amikor kibontja, a maszk réteg pedig egy kis körre vágja a profilnézetben.
Hozzon létre egy ilyen headerMask réteget:
headerMask = új Rétegszélesség: Képernyő.szélesség, magasság: 800 backgroundColor: "átlátszó"
Az első kódsor létrehozza és megnevezi az új réteget. Ezután a CoffeeScript behúzási szintaxisának használatával beállítjuk a szélességet, magasságot és a háttér tulajdonságait. Átlátszó hátteret fogunk használni, így az alatta lévő rétegek az avatárkép kibontásakor megjelennek.
Ezután hozza létre a maszk réteget:
maszk = új Rétegszélesség: 1000, magasság: 1000 háttérSzín: "átlátszó", szegélyRadius: 500 y: sketch.header.height - 100 superLayer: headerMask skála: 0.2, originY: 0
Létrehozunk egy új réteget, és ugyanúgy beállítjuk a tulajdonságokat. A nagy borderRadius ezt a réteget körré teszi. A maszk réteget úgy helyezzük el, hogy átfedje a fejléc réteget, amelyet a Sketch alkalmazásból importáltunk. Ezenkívül 20 százalékra, azaz 0,2-re csökkentjük. A nulla eredete a kép rögzítési pontját vagy regisztrációját a felső élre állítja.
A fennmaradó tulajdonság, a superLayer, az általunk létrehozott headerMask réteget állítja be ennek az új rétegnek a szülőjévé. A maszkolás így működik a Framerben. Egyszerűen állítsa be a superLayer tulajdonságot, és a szülő réteg elfedi a gyermeket.
Ezután létre kell hoznunk az avatar grafikát, és be kell helyeznünk az új maszkokba. A levágási határok nagyításához és animálásához manuálisan létrehozzuk az avatar réteget. Másoljon egy fotót a projekt mappa ’images’ almappájába. Ezután hozzon létre egy réteget a kép segítségével:
avatar = new Layer image: "images / avatar.png" width: mask.width, height: mask.height superLayer: maszk, force2d: true
Figyelje meg, hogy az avatar superLayer-jét álarcrétegnek állítottuk be. Mindkettő be van ágyazva a headerMask-ba. Beállítottuk a szélességet és a magasságot is, hogy a kép teljesen kitöltse a maszkos területet.
Végül létrehozunk egy változót az animációhoz használt maszk Y pozíciójának tárolására. Vízszintesen középre helyezzük, mivel nagyobb, mint a képernyő.
maskY = mask.y mask.centerX ()
Állapotok meghatározása
Az animáció létrehozásának első lépése a kezdő és a végállapot meghatározása. A Framer-ben az állapotok olyanok, mint a kódba írt kulcsképek. Az állam csak a tulajdonságok gyűjteménye. Minden rétegnek van egy alapértelmezett állapota. Ennél a prototípusnál ez az alapértelmezés szolgál az animáció kiindulópontjaként, ezért minden réteghez csak egy második állapotot kell beállítanunk.
Az állapotok szintaxisa nagyon egyszerű. Hivatkozzon a fóliára, használja a layer.states.add () metódust, majd sorolja fel a beépítendő tulajdonságokat.
sketch.content.states.add (elrejtés: {átlátszatlanság: 0}) headerMask.states.add (mozgás: {y: 120}) mask.states.add (növekedés: {skála: 1.1, y: maskY - 420})
A Sketch-ből importált és az összes többi profilképernyő-elemet tartalmazó tartalmi réteg második állapotának teljesen átlátszónak kell lennie. Így az avatar kibővítésekor fekete háttérünk lesz, és a fennmaradó importált ikonok és elemek láthatók lesznek.
A második kódsor létrehoz egy állapotot a headerMask számára, amely egyszerűen áthelyezi azt egy Y pozícióba, 120-ra. Ez lehetővé teszi a cím és a bezárás gomb megjelenítését a képernyő tetején, amikor az avatar fotót kinagyítják. Animálja az avatárkép vágási határait is.
Végül a maszk réteg új állapota felnagyítja és feljebb fogja mozgatni, a korábban létrehozott maskY változó használatával. Mivel a maszk réteg origY (vagy rögzítési pontja) annak felső széle, 420 pixelrel feljebb kell mozgatnunk, hogy a kép közepe látható legyen.
Éljen az államok között
Az alapértelmezett és az imént létrehozott új állapotok animálásához csak még négy kódsorra van szükségünk. Egy kattintáskezelőt állítunk be az avatar rétegben. Amikor a felhasználó megérinti a profil képernyőn, áttérünk a kibővített nézetre kerékpáros állapotok szerint. Ha ismét megérinti, visszatérünk az alapértelmezett állapotokhoz, így visszatér egy kis körbe. Ugyanazok a kódsorok kezelik mindkét interakciót:
avatar.on Events.Click, -> headerMask.states.next () mask.states.next () sketch.content.states.next ()
Ennek a blokknak az első sora állítja be a kattintáskezelőt az avatar rétegben. Bármikor megérintik, függetlenül attól, hogy levágták, vagy milyen méretű, az ezt követő utasítások futni fognak.
Ezután egyszerűen hivatkozunk minden rétegre, és a layer.states.next () módszerrel válthatunk az állapotok között. A layer.states.next () használatakor a Framer a belső alapértelmezett animációs beállításokat használja. Ez rendkívül kényelmes, de még jobb animációkat készíthet az animációs görbék finomításával.
Ha olyan állapotokat használunk, mint amilyen itt vagyunk, akkor a layer.states.animationOptions tulajdonság segítségével könnyedén megváltoztathatja az egyes animációs görbéket külön-külön. Csak három apró kiigazítással az animáció teljesen másnak érzi magát:
sketch.content.states.animationOptions = görbe: "könnyű", idő: 0.3 headerMask.states.animationOptions = görbe: "spring (150, 20, 0)" mask.states.animationOptions = görbe: "spring (300, 30, 0) "
Az elhalványuló és beilleszkedő tartalmi réteghez egy egyszerű görbe előre beállított értéket, könnyűséget és az animáció időtartamát 0,3-ra állítjuk, hogy nagyon gyors legyen.
A headerMask és a maszk rétegekhez használjon rugós görbét. Céljainkhoz csak tudnia kell, hogy a tavaszi görbe értékei megváltoztatják az animáció sebességét és visszapattanását. A maszk réteg értékei sokkal gyorsabbá teszik az animációját, mint a headerMask és a tartalom. A rugó görbe beállításokkal kapcsolatos további részletek a Framer dokumentációban találhatók a framerjs.com/docs címen.
Próbálja ki egy igazi mobil eszközön
Ha valódi eszközön látja a kivitelt, sokkal hatékonyabb, mint az emulátorok használata, és meglátja majd munkájának előnyeit. A Framer tartalmaz egy tükrös funkciót, amely egy beépített szerver, amely URL-t kínál a prototípusához a helyi hálózaton keresztül. Egyszerűen keresse fel az URL-t a készülékével.
Megtanult mindent, amit tudnia kell a saját tervei prototípusához a Framerben. Mire vársz?
Szavak: Jarrod Drysdale
Jarrod Drysdale szerző, tervezési tanácsadó, digitális termékgyártó. Ez a cikk eredetileg a net magazin 270. számában jelent meg.
Tetszett ez? Olvassa el ezeket!
- Hozzon létre kattintható, élő prototípusokat a Sketch-ben
- Hogyan lehet blogot indítani
- A legjobb fotószerkesztők
