Zawartość
- Importuj ze szkicu
- Twórz warstwy masek i awatarów
- Zdefiniuj stany
- Animuj między stanami
- Wypróbuj na prawdziwym urządzeniu mobilnym
Powód tworzenia prototypów projektu nie jest nowy - jest taki sam, jak cały szum związany z projektowaniem w przeglądarce. Kiedy widzisz projekt w jego prawdziwym kontekście, wygląda to zupełnie inaczej. Podejmujesz lepsze decyzje, gdy nie musisz zakładać, jak interfejs będzie działał i jak będzie wyglądał. Może to brzmieć jak dodatkowa praca, ale wgląd, który można uzyskać, obserwując, jak działa projekt, jest nieoceniony.
Framer to nowe narzędzie do prototypowania oparte na kodzie. Możesz tworzyć makiety w Sketch (lub Photoshopie) tak jak zwykle i importować je do Framer. Następnie napisz trochę CoffeeScript i możesz wiele zdziałać.
Mam zamiar nauczyć Cię podstaw tworzenia prototypów we Framerze na przykładzie prototypu aplikacji na iOS z dwoma widokami: widokiem profilu i powiększonym widokiem awatara użytkownika. Opracujemy prototyp, w jaki sposób rozszerzony widok zdjęć będzie się otwierał i zamykał, a także będziemy go animować. Zobacz demo online tutaj (aby zobaczyć kod źródłowy, kliknij ikonę w lewym górnym rogu). Będziesz także potrzebować bezpłatnej wersji próbnej Framer, którą możesz uzyskać na framerjs.com.
Importuj ze szkicu
Pierwszym krokiem jest zaimportowanie warstw ze Sketch do Framer. Po prostu kliknij przycisk Importuj w programie Framer, gdy projekt jest otwarty w programie Sketch, i wybierz właściwy plik w wyświetlonym oknie dialogowym. Framer automatycznie zaimportuje obrazy z każdej warstwy i udostępni je za pomocą takiego kodu:
sketch = Framer.Importer.load "importowany / profil"
Użyj tej zmiennej, aby uzyskać dostęp do zaimportowanych warstw. Na przykład, aby utworzyć odniesienie do warstwy o nazwie „zawartość” w pliku Sketch, wpisz sketch.content w programie Framer.
Twórz warstwy masek i awatarów
Podstawową funkcją tego prototypu jest rozszerzenie obrazu awatara po dotknięciu, a następnie zamknięcie go po ponownym dotknięciu. Najpierw utworzymy dwie warstwy masek - zagnieżdżoną lub maskę wewnątrz innej maski. Animujemy obie maski jednocześnie, aby stworzyć przyjemny, subtelny efekt otwierania i zamykania. Warstwa headerMask przycina zdjęcie awatara do prostokąta, gdy jest rozwinięte, a warstwa maski przycina je do małego koła w widoku profilu.
Utwórz warstwę headerMask w następujący sposób:
headerMask = new Szerokość warstwy: Szerokość ekranu, wysokość: 800 backgroundColor: "transparent"
Pierwsza linia kodu tworzy nową warstwę i nazywa ją. Następnie, używając składni wcięć CoffeeScript, ustawiamy szerokość, wysokość i właściwości tła. Użyjemy przezroczystego tła, aby warstwy poniżej pokazywały, kiedy zdjęcie awatara jest rozwinięte.
Następnie utwórz warstwę maskującą:
mask = new Szerokość warstwy: 1000, wysokość: 1000 backgroundColor: "transparent", borderRadius: 500 y: sketch.header.height - 100 superLayer: headerMask scale: 0.2, originY: 0
Tworzymy nową warstwę i w ten sam sposób ustawiamy właściwości. Duży borderRadius sprawia, że ta warstwa jest okręgiem. Umieszczamy warstwę maski tak, aby nakładała się na warstwę nagłówka, która została zaimportowana z Sketch. Zmniejszymy też do 20 procent, czyli 0,2. Początek Y równy zero ustawia punkt kontrolny lub rejestrację obrazu na górnej krawędzi.
Pozostała właściwość, superLayer, ustawia utworzoną przez nas warstwę headerMask jako warstwę nadrzędną nowej warstwy. Tak działa maskowanie we Framerze. Po prostu ustaw właściwość superLayer, a warstwa nadrzędna zamaskuje dziecko.
Następnie musimy stworzyć grafikę awatara i umieścić ją wewnątrz tych nowych masek. Aby powiększyć i animować granice kadrowania, ręcznie utworzymy warstwę awatara. Skopiuj zdjęcie do podfolderu „images” w folderze projektu. Następnie utwórz warstwę za pomocą tego obrazu:
avatar = new Layer image: "images / avatar.png" width: mask.width, height: mask.height superLayer: mask, force2d: true
Zauważ, że ustawiliśmy superWarstwę awatara jako warstwę maski. Oba są teraz zagnieżdżone w headerMask. Ustawiamy również szerokość i wysokość, aby obraz całkowicie wypełniał zamaskowany obszar.
Na koniec utworzymy zmienną do przechowywania pozycji Y maski, której użyjemy w animacji. Wyśrodkujemy go w poziomie, ponieważ jest większy niż ekran.
maskaY = maska.y maska.centerX ()
Zdefiniuj stany
Pierwszym krokiem w tworzeniu animacji jest zdefiniowanie stanu początkowego i końcowego. We Framerze stany są jak klatki kluczowe zapisane w kodzie. Stan to po prostu zbiór właściwości. Każda warstwa ma stan domyślny. W przypadku tego prototypu ten domyślny będzie punktem początkowym animacji, więc musimy ustawić tylko drugi stan dla każdej warstwy.
Składnia stanów jest bardzo prosta. Odwołaj się do warstwy, użyj metody layer.states.add (), a następnie wymień właściwości, które mają zostać uwzględnione.
sketch.content.states.add (ukryj: {krycie: 0}) headerMask.states.add (move: {y: 120}) mask.states.add (powiększ: {skala: 1.1, y: maskaY - 420})
Drugi stan dla warstwy zawartości, która została zaimportowana ze Sketch i zawiera wszystkie inne elementy ekranu profilu, powinien być całkowicie przezroczysty. W ten sposób po rozwinięciu awatara będziemy mieć czarne tło, a pozostałe zaimportowane ikony i elementy będą widoczne.
Druga linia kodu tworzy stan dla headerMask, który po prostu przesunie go w dół do pozycji Y, równej 120. Dzięki temu tytuł i przycisk zamykania będą wyświetlane u góry ekranu, gdy zdjęcie awatara zostanie powiększone. Będzie również animować granice kadrowania zdjęcia awatara.
Wreszcie, nowy stan warstwy maski zarówno przeskaluje ją w górę, jak i przesunie w górę, używając utworzonej wcześniej zmiennej maskY. Ponieważ punktem początkowym Y (lub punktem kotwiczenia) warstwy maski jest jej górna krawędź, musimy przesunąć ją o 420 pikseli w górę, aby środek obrazu był widoczny.
Animuj między stanami
Aby animować między stanami domyślnymi a nowymi, które właśnie utworzyliśmy, potrzebujemy tylko czterech dodatkowych wierszy kodu. Ustawimy moduł obsługi kliknięć w warstwie awatara. Gdy użytkownik dotknie go na ekranie profilu, przejdziemy do widoku rozszerzonego poprzez cykliczne stany. Po ponownym dotknięciu wrócimy do stanów domyślnych, więc powróci do małego kółka. Te same wiersze kodu obsługują obie interakcje:
avatar.on Events.Click, -> headerMask.states.next () mask.states.next () sketch.content.states.next ()
Pierwsza linia tego bloku ustawia obsługę kliknięcia na warstwie awatara. Za każdym razem, gdy zostanie dotknięty, bez względu na to, jak jest przycięty lub jaki jest rozmiar, uruchomione zostaną poniższe instrukcje.
Następnie po prostu odwołujemy się do każdej warstwy i używamy metody layer.states.next () do przełączania stanów. Kiedy używasz layer.states.next (), Framer użyje swoich wewnętrznych domyślnych ustawień animacji. Jest to niezwykle wygodne, ale możesz stworzyć jeszcze lepsze animacje, dopracowując krzywe animacji.
Korzystając ze stanów, takich jak tutaj, możesz łatwo zmienić każdą krzywą animacji osobno, używając właściwości layer.states.animationOptions. Dzięki zaledwie trzem drobnym korektom animacja wygląda zupełnie inaczej:
sketch.content.states.animationOptions = krzywa: "łagodność", czas: 0,3 headerMask.states.animationOptions = krzywa: "wiosna (150, 20, 0)" mask.states.animationOptions = krzywa: "wiosna (300, 30, 0) ”
W przypadku zanikającej i pojawiającej się warstwy zawartości wybierzemy proste ustawienie krzywej, łatwość i ustawimy czas trwania animacji na 0,3, aby była bardzo szybka.
W nagłówku Warstwy maski i maski użyj krzywej sprężystej. Dla naszych celów wystarczy wiedzieć, że wartości krzywej sprężystości zmieniają prędkość i odbicie animacji. Wartości warstwy maski spowodują, że jej animacja będzie znacznie szybsza niż maska headerMask i zawartość. Więcej informacji na temat ustawień krzywych sprężyny można znaleźć w dokumentacji Framer na framerjs.com/docs.
Wypróbuj na prawdziwym urządzeniu mobilnym
Oglądanie projektu na prawdziwym urządzeniu jest o wiele skuteczniejsze niż używanie emulatorów, a zobaczysz korzyści w swojej pracy. Framer zawiera funkcję kopii lustrzanej, która jest wbudowanym serwerem oferującym adres URL do twojego prototypu w sieci lokalnej. Po prostu odwiedź adres URL za pomocą swojego urządzenia.
Dowiedziałeś się wszystkiego, co musisz wiedzieć, aby tworzyć prototypy własnych projektów w programie Framer. Na co czekasz?
Słowa: Jarrod Drysdale
Jarrod Drysdale jest autorem, konsultantem ds. Projektowania, twórcą produktów cyfrowych. Ten artykuł został pierwotnie opublikowany w numerze 270 magazynu net.
Lubiłem to? Przeczytaj to!
- Twórz aktywne, klikalne prototypy w Sketch
- Jak założyć bloga
- Najlepsi edytorzy zdjęć
