Obsah
- Importovat z náčrtu
- Vytvářejte vrstvy masek a avatarů
- Definujte stavy
- Animujte mezi státy
- Vyzkoušejte to na skutečném mobilním zařízení
Důvod prototypování designu není nový - je stejný jako všechny pověsti o navrhování v prohlížeči. Když vidíte design v jeho reálném kontextu, je to úplně jiné. Děláte lepší rozhodnutí, když nemusíte dělat předpoklady o tom, jak bude rozhraní fungovat a jak se bude cítit. Může to znít jako práce navíc, ale postřehy, které získáte, když uvidíte, že váš návrh funguje, jsou neocenitelné.
Framer je nový prototypový nástroj založený na kódu. Makety můžete v aplikaci Sketch (nebo Photoshop) vytvářet stejně, jako obvykle, a importovat je do Frameru. Poté napište malý CoffeeScript a můžete toho dosáhnout hodně.
Naučím vás základy prototypování ve Frameru, a to na příkladu prototypu aplikace pro iOS se dvěma zobrazeními: zobrazení profilu a zvětšené zobrazení obrázku avatara uživatele. Navrhneme, jak se bude rozšířené zobrazení fotografií otevírat a zavírat, a také jej animujeme. Zde si můžete prohlédnout online ukázku (zdrojový kód zobrazíte kliknutím na ikonu v levém horním rohu). Budete také potřebovat bezplatnou zkušební verzi Framer, kterou získáte na framerjs.com.
Importovat z náčrtu
Prvním krokem je import vrstev ze Sketch do Frameru. Jednoduše klikněte na tlačítko Importovat ve Frameru, když je návrh otevřený ve Skice, a v následujícím dialogovém okně vyberte správný soubor. Framer automaticky importuje obrázky z každé vrstvy a zpřístupní je pomocí kódu, jako je tento:
sketch = Framer.Importer.load "importováno / profil"
Pomocí této proměnné získáte přístup k importovaným vrstvám. Chcete-li například v souboru Sketch odkázat na vrstvu s názvem „content“, zadejte do Frameru sketch.content.
Vytvářejte vrstvy masek a avatarů
Základní funkcí tohoto prototypu je rozbalit obrázek avatara, když je poklepán, a poté jej zavřít, když je poklepán znovu. Nejprve vytvoříme dvě vrstvy masky - vnořenou masku nebo masku uvnitř jiné masky. Animujeme obě masky najednou, abychom vytvořili pěkný, jemný otevírací a zavírací efekt. Vrstva headerMask ořízne fotografii avatara, když je rozbalena, a vrstva masky ji ořízne na malý kruh v zobrazení profilu.
Vytvořte vrstvu headerMask takto:
headerMask = new Šířka vrstvy: Screen.width, výška: 800 backgroundColor: "transparentní"
První řádek kódu vytvoří a pojmenuje novou vrstvu. Potom pomocí syntaxe odsazení CoffeeScript nastavíme vlastnosti šířky, výšky a pozadí. Použijeme průhledné pozadí, aby se při rozbalení fotografie avatara zobrazily spodní vrstvy.
Dále vytvořte vrstvu masky:
mask = new Šířka vrstvy: 1000, výška: 1000 backgroundColor: "transparentní", borderRadius: 500 y: sketch.header.height - 100 superLayer: headerMaska měřítko: 0,2, původY: 0
Vytvoříme novou vrstvu a nastavíme vlastnosti stejným způsobem. Velký borderRadius dělá z této vrstvy kruh. Umístili jsme vrstvu masky tak, aby překrývala vrstvu záhlaví, která byla importována z aplikace Sketch. Rovněž se zmenšíme na 20 procent neboli 0,2. PočátekY nula nastavuje kotevní bod nebo registraci obrázku k hornímu okraji.
Zbývající vlastnost superLayer nastavuje vrstvu headerMask, kterou jsme vytvořili jako nadřazenou vrstvu této nové vrstvy. Takto funguje maskování ve Frameru. Jednoduše nastavte vlastnost superLayer a nadřazená vrstva bude maskovat dítě.
Dále musíme vytvořit avatarovou grafiku a umístit ji do těchto nových masek. Chcete-li zvětšit a animovat hranice oříznutí, vytvoříme ručně vrstvu avatara. Zkopírujte fotografii do podsložky „images“ složky projektu. Poté pomocí tohoto obrázku vytvořte vrstvu:
avatar = nový obrázek vrstvy: "images / avatar.png" šířka: mask.width, výška: mask.height superLayer: mask, force2d: true
Všimněte si, že jsme nastavili supervrstvu avatara jako vrstvu masky. Oba jsou nyní vnořeny do headerMask. Také jsme nastavili šířku a výšku, aby obrázek zcela vyplnil maskovanou oblast.
Nakonec vytvoříme proměnnou pro uložení polohy Y masky, kterou použijeme pro animaci. Vycentrujeme jej vodorovně, protože je větší než obrazovka.
maskY = mask.y mask.centerX ()
Definujte stavy
Prvním krokem při vytváření animace je definování počátečního a koncového stavu. Ve Frameru jsou stavy jako klíčové snímky zapsané v kódu. Stav je jen soubor vlastností. Každá vrstva má výchozí stav. U tohoto prototypu bude toto výchozí nastavení sloužit jako počáteční bod animace, takže pro každou vrstvu musíme nastavit pouze druhý stav.
Syntaxe pro stavy je velmi jednoduchá. Odkazujte na vrstvu, použijte metodu layer.states.add () a poté uveďte vlastnosti, které mají být zahrnuty.
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 pro vrstvu obsahu, který byl importován z aplikace Sketch a obsahuje všechny ostatní prvky obrazovky profilu, by měl být zcela průhledný. Tímto způsobem, když se avatar rozbalí, budeme mít černé pozadí a zbývající importované ikony a prvky se zobrazí.
Druhý řádek kódu vytvoří stav pro headerMask, který jej jednoduše přesune dolů na pozici Y 120. To umožní, aby se v horní části obrazovky po zvětšení fotografie avataru zobrazilo tlačítko nadpisu a zavřít. Bude také animovat hranice oříznutí fotografie avatara.
A konečně nový stav vrstvy masky ji zvětší a posune nahoru pomocí proměnné maskY, kterou jsme vytvořili dříve. Protože počátek Y (nebo kotevní bod) vrstvy masky je její horní hrana, musíme ji posunout o 420 pixelů nahoru, aby byl viditelný střed obrázku.
Animujte mezi státy
K animaci mezi výchozími stavy a novými, které jsme právě vytvořili, potřebujeme jen další čtyři řádky kódu. Na vrstvu avatara nastavíme obslužný program kliknutí. Když na něj uživatel klepne na obrazovce profilu, přejdeme do rozšířeného zobrazení podle stavů cyklování. Když na něj znovu klepnete, vrátíme se do výchozích stavů, aby se vrátil do malého kruhu. Obě interakce zvládnou stejné řádky kódu:
avatar.on Events.Click, -> headerMask.states.next () mask.states.next () skica.content.states.next ()
První řádek tohoto bloku nastavuje obslužný program kliknutí ve vrstvě avatara. Kdykoli je klepnuto, bez ohledu na to, jak je oříznuto nebo jaká je jeho velikost, spustí se následující příkazy.
Pak jednoduše odkazujeme na každou vrstvu a pomocí metody layer.states.next () přepínáme stavy. Když použijete layer.states.next (), Framer použije své interní výchozí nastavení animace. To je mimořádně výhodné, ale vyladěním animačních křivek můžete vytvořit ještě lepší animace.
Při použití stavů, jako jsme tady, můžete snadno změnit každou křivku animace zvlášť pomocí vlastnosti layer.states.animationOptions. S pouhými třemi mírnými úpravami se animace cítí úplně jinak:
sketch.content.states.animationOptions = křivka: "snadnost", čas: 0,3 headerMask.states.animationOptions = křivka: "pružina (150, 20, 0)" mask.states.animationOptions = křivka: "pružina (300, 30, 0) „
Pro vrstvu obsahu, která se postupně mizí a volí, zvolíme jednoduché přednastavení křivky, jednoduchost a nastavíme trvání animace na 0,3, aby to bylo velmi rychlé.
Pro vrstvy headerMask a masky použijte pružinovou křivku. Pro naše účely potřebujete vědět, že hodnoty pružinové křivky mění rychlost a odraz animace. Díky hodnotám vrstvy masky bude její animace mnohem rychlejší než headerMask a content. Další podrobnosti o nastavení pružinové křivky najdete v dokumentaci Framer na framerjs.com/docs.
Vyzkoušejte to na skutečném mobilním zařízení
Vidět design na skutečném zařízení je mnohem efektivnější než používat emulátory a uvidíte výhody vaší práce. Framer obsahuje funkci zrcadlení, což je vestavěný server, který nabízí adresu URL vašeho prototypu přes místní síť. Jednoduše navštivte adresu URL pomocí svého zařízení.
Naučili jste se vše, co potřebujete, abyste mohli prototypovat své vlastní návrhy ve Frameru. Na co čekáš?
Slova: Jarrod Drysdale
Jarrod Drysdale je autor, konzultant designu, výrobce digitálních produktů. Tento článek byl původně publikován v čísle 270 internetového časopisu.
Líbilo se vám to? Přečtěte si tyto!
- Vytvářejte klikatelné živé prototypy v aplikaci Sketch
- Jak založit blog
- Nejlepší editory fotografií
