Obsah
- Importovať zo Skice
- Vytvorte masku a vrstvu avatara
- Definujte štáty
- Animácia medzi štátmi
- Vyskúšajte to na skutočnom mobilnom zariadení
Dôvody prototypov prototypov nie sú nové - sú rovnaké ako všetky hlášky týkajúce sa navrhovania v prehliadači. Keď vidíte dizajn v skutočnom kontexte, je to úplne iné. Robíte lepšie rozhodnutia, keď nemusíte robiť domnienky o tom, ako bude rozhranie fungovať a ako sa bude cítiť. Môže to znieť ako práca navyše, ale poznatky, ktoré získate, keď uvidíte, že váš návrh funguje, sú neoceniteľné.
Framer je nový kódovací prototypový nástroj. Makety môžete v aplikácii Sketch (alebo Photoshop) vytvárať rovnako, ako obvykle, a importovať ich do programu Framer. Potom napíšte trochu CoffeeScript a môžete dokázať veľa.
Naučím vás základy prototypov vo Frameri, a to na príklade prototypu aplikácie pre iOS s dvoma zobrazeniami: profilovým a zväčšeným zobrazením obrázka avatara používateľa. Navrhneme, ako sa bude rozšírené zobrazenie fotografií otvárať a zatvárať, a tiež ho animujeme. Prezrite si online ukážku tu (zdrojový kód zobrazíte kliknutím na ikonu v ľavom hornom rohu). Budete tiež potrebovať bezplatnú skúšobnú verziu Framer, ktorú získate na framerjs.com.
Importovať zo Skice
Prvým krokom je import vrstiev zo Skice do Frameru. Jednoducho kliknite na tlačidlo Importovať v aplikácii Framer, keď je návrh otvorený v aplikácii Sketch, a v nasledujúcom dialógovom okne vyberte správny súbor. Framer automaticky importuje obrázky z každej vrstvy a sprístupní ich pomocou kódu, ako je tento:
sketch = Framer.Importer.load "importované / profil"
Pomocou tejto premennej získate prístup k importovaným vrstvám. Ak napríklad chcete v súbore Skica odkázať na vrstvu s názvom „obsah“, do Frameru napíšete sketch.content.
Vytvorte masku a vrstvu avatara
Hlavnou funkciou tohto prototypu je rozšíriť obrázok avatara, keď na neho klepnete, a potom ho zavrieť, keď na neho klepnete znova. Najskôr vytvoríme dve vrstvy masky - vnorenú masku alebo masku v inej maske. Obidve masky animujeme naraz, aby sme vytvorili pekný, jemný efekt otvárania a zatvárania. Vrstva headerMask orezá fotografiu avatara po rozbalení a vrstva masky ju orezá na malý kruh v zobrazení profilu.
Vytvorte vrstvu headerMask takto:
headerMask = new Šírka vrstvy: Screen.width, výška: 800 backgroundColor: "transparentná"
Prvý riadok kódu vytvorí a pomenuje novú vrstvu. Potom pomocou syntaxe odsadenia CoffeeScript nastavíme vlastnosti šírky, výšky a pozadia. Použijeme priehľadné pozadie, aby sa pri rozbalení fotografie avatara zobrazili nižšie zobrazené vrstvy.
Ďalej vytvorte vrstvu masky:
mask = nová Šírka vrstvy: 1 000, výška: 1 000 pozadia Farba: „priehľadná“, borderRadius: 500 y: sketch.header.height - 100 superVrstva: headerMaska mierky: 0,2, pôvodY: 0
Vytvoríme novú vrstvu a nastavíme vlastnosti rovnakým spôsobom. Veľký borderRadius robí z tejto vrstvy kruh. Vrstvu masky umiestnime tak, aby prekrývala vrstvu hlavičky, ktorá bola importovaná zo Skice. Tiež sa znížime na 20 percent, alebo 0,2. Počiatočný Y od nuly nastavuje kotviaci bod alebo registráciu obrázka k hornému okraju.
Zvyšná vlastnosť superLayer nastavuje vrstvu headerMask, ktorú sme vytvorili ako rodič tejto novej vrstvy. Takto funguje maskovanie vo Frameri. Jednoducho nastavíte vlastnosť superLayer a nadradená vrstva zamaskuje dieťa.
Ďalej musíme vytvoriť avatarovú grafiku a umiestniť ju do týchto nových masiek. Ak chcete zväčšiť a animovať hranice orezania, manuálne vytvoríme vrstvu avatara. Skopírujte fotografiu do podpriečinka ‘obrázky’ v priečinku projektu. Potom pomocou tohto obrázka vytvorte vrstvu:
avatar = nový Obrázok vrstvy: "images / avatar.png" šírka: mask.width, výška: mask.height superLayer: mask, force2d: true
Všimnite si, že sme nastavili supervrstvu avatara ako vrstvu masky. Oba sú teraz vnorené do headerMask. Nastavíme tiež šírku a výšku, aby obrázok úplne vyplnil maskovanú oblasť.
Na záver vytvoríme premennú na uloženie polohy Y masky, ktorú použijeme na animáciu. Vycentrujeme ho vodorovne, pretože je väčší ako obrazovka.
maskY = mask.y mask.centerX ()
Definujte štáty
Prvým krokom pri vytváraní animácie je definovanie počiatočného a konečného stavu. Vo Frameri sú stavy ako kľúčové snímky zapísané v kóde. Štát je iba súborom nehnuteľností. Každá vrstva má predvolený stav. Pre tento prototyp bude táto predvolená hodnota slúžiť ako začiatočný bod animácie, takže pre každú vrstvu stačí nastaviť druhý stav.
Syntax pre štáty je veľmi jednoduchá. Odkazujte na vrstvu, použite metódu layer.states.add () a potom uveďte vlastnosti, ktoré sa majú zahrnúť.
sketch.content.states.add (hide: {opacity: 0}) headerMask.states.add (move: {y: 120}) mask.states.add (grow: {scale: 1.1, y: maskY - 420})
Druhý stav pre vrstvu obsahu, ktorá bola importovaná z aplikácie Sketch a obsahuje všetky ostatné prvky obrazovky profilu, by mal byť úplne transparentný. Týmto spôsobom, keď sa avatar rozbalí, budeme mať čierne pozadie a zvyšné importované ikony a prvky sa zobrazia.
Druhý riadok kódu vytvára stav pre headerMask, ktorý ho jednoducho presunie nadol na pozíciu Y 120. Toto umožní, aby sa nadpis a tlačidlo zatvorenia zobrazili v hornej časti obrazovky, keď sa fotografia avatara zväčší. Bude tiež animovať hranice orezania fotografie avatara.
A nakoniec, nový stav pre vrstvu masky ju zväčší aj posunie pomocou premennej maskY, ktorú sme vytvorili predtým. Pretože originY (alebo kotviaci bod) vrstvy masky je jej horný okraj, musíme ju posunúť nahor o 420 pixelov, aby bol viditeľný stred obrázka.
Animácia medzi štátmi
Na animáciu medzi predvolenými stavmi a novými, ktoré sme práve vytvorili, potrebujeme iba ďalšie štyri riadky kódu. Na vrstvu avatara nastavíme obslužný program kliknutí. Keď na ňu používateľ klepne na obrazovke profilu, prejdeme do rozbaleného zobrazenia podľa stavov cyklovania. Po opätovnom klepnutí sa vrátime do predvolených stavov, aby sa vrátil do malého kruhu. Obidve interakcie zvládajú rovnaké riadky kódu:
avatar.on Events.Click, -> headerMask.states.next () mask.states.next () sketch.content.states.next ()
Prvý riadok tohto bloku nastavuje obslužný program kliknutia na vrstvu avatara. Kedykoľvek je klepnuté, bez ohľadu na to, ako je orezané alebo aká je jeho veľkosť, spustí sa nasledujúce príkazy.
Potom jednoducho odkazujeme na každú vrstvu a na prepínanie stavov použijeme metódu layer.states.next (). Keď použijete layer.states.next (), Framer použije svoje interné predvolené nastavenia animácie. To je mimoriadne pohodlné, ale vyladením animačných kriviek môžete vytvoriť ešte lepšie animácie.
Pri použití stavov, ako sme tu, môžete ľahko zmeniť každú animačnú krivku osobitne pomocou vlastnosti layer.states.animationOptions. Iba s tromi miernymi úpravami sa animácia cíti úplne inak:
sketch.content.states.animationOptions = curve: "easy", čas: 0,3 headerMask.states.animationOptions = curve: "spring (150, 20, 0)" mask.states.animationOptions = curve: "pružina (300, 30, 0) „
Pre vrstvu obsahu, ktorá sa postupne stráca a vyberá, zvolíme jednoduché prednastavenie krivky, jednoduchosť a nastavíme trvanie animácie na 0,3, aby to bolo veľmi rýchle.
Pre vrstvy headerMask a masku použite pružinovú krivku. Pre naše účely musíte len vedieť, že hodnoty pružinovej krivky menia rýchlosť a odskok animácie. Vďaka hodnotám vrstvy masky bude jej animácia oveľa rýchlejšia ako headerMask a content. Viac podrobností o nastavení pružinovej krivky nájdete v dokumentácii Framer na adrese framerjs.com/docs.
Vyskúšajte to na skutočnom mobilnom zariadení
Vidieť dizajn na skutočnom zariadení je oveľa efektívnejšie ako používať emulátory a uvidíte výhody svojej práce. Framer obsahuje funkciu zrkadla, čo je vstavaný server, ktorý ponúka adresu URL vášho prototypu v miestnej sieti. Pomocou svojho zariadenia jednoducho navštívte adresu URL.
Dozvedeli ste sa všetko, čo potrebujete, aby ste mohli prototypovať svoje vlastné dizajny vo Frameri. Na čo čakáš?
Slová: Jarrod Drysdale
Jarrod Drysdale je autor, konzultant v oblasti dizajnu, výrobca digitálnych produktov. Tento článok bol pôvodne publikovaný v čísle 270 sieťového časopisu.
Páčilo sa vám to? Prečítajte si tieto!
- Vytvárajte živé klikateľné prototypy v aplikácii Sketch
- Ako založiť blog
- Najlepší editor fotografií
