Share
Ați încercat vreodată să explicați comportamentul desenelor de interfață clienților dvs.? De multe ori, cuvintele nu sunt suficiente pentru a arăta ce gândește designerul atunci când livrează o piesă clienților săi. În aplicațiile mobile, cu derulări orizontale și verticale combinate și animații sau efecte de tranziție, această problemă este și mai mare. Acest tutorial vă va arăta cum să proiectați o interfață a unei aplicații mobile de la zero în Photoshop și, cel mai important, vă va arăta cum să prezentați o animație care descrie comportamentul aplicației pentru trimiterea către clientul final. Sunteți gata? Să începem!
Următoarele bunuri au fost utilizate în timpul producerii acestui tutorial.
Acest tutorial își propune să fie un ghid pentru a prezenta un eșantion mai dinamic al desenelor de interfață, indicând comportamentul pe care aplicația îl va avea atunci când este implementat.
Există mai multe avantaje ale creării unei versiuni animate înainte de ao implementa într-un limbaj de programare, aici sunt câteva:
Având în vedere acest lucru, să mergem mai departe cu tutorialul de astăzi.
Mai intai vom proiecta aplicatia News Reader iPad de la zero cu Photoshop, apoi vom anima comportamentul de derulare prin feed-urile de stiri atat verticala cat si orizontala si deschizand in sfarsit un articol intr-o fereastra pop-up. Am menționat că vom folosi doar Photoshop pentru întregul proces?
Deoarece nu este un tutorial de bază, voi presupune că aveți un nivel de bază de înțelegere a instrumentelor și proceselor Photoshop, cum ar fi crearea de măști de tăiere, măști vectoriale și straturi și, mai important, obiecte inteligente. Dacă chiar vrei să mergi prin acest tutorial și încă ești începător, îți sugerez să citești câteva articole care descriu mai întâi aceste subiecte.
Acum, să începem!
Fiecare design minunat începe cu o pânză neagră, de data aceasta vom crea un document RGB de 1400 x 1100px la 72ppi.
Deoarece creăm un design pentru o aplicație iPad, va trebui să desenați un pătrat pentru a delimita zona de lucru a ecranului iPad (1024 x 768 px). Puteți să o faceți cu ușurință creând un dreptunghi și utilizând butonul Transform Controls of the Move Tool (V) pe orice colț și apoi pe panoul Opțiuni din partea de sus scrieți dimensiunile dorite pe valorile W și H. Apoi apăsați Command / Ctrl + A pentru a selecta toate și încă cu Instrumentul de mutare selectat aliniați caseta la mijlocul absolut făcând clic pe opțiunile de aliniere.
Apoi, atunci când cutia este situată pe mijlocul absolut, trageți patru ghidaje în jurul casetei, aceasta va fi zona noastră de lucru și partea vizibilă a aplicației noastre. De acum până la sfârșitul acestui tutorial spațiul dintre aceste ghiduri va fi "zona de aplicații".
Acum, deschideți și introduceți șablonul iPad din active, rotiți-l pentru ao plasa în modul peisaj și redimensionați-l pentru a face zona activă (ecranul) să se potrivească cu ghidurile noastre. Convertiți-l într-un obiect inteligent și denumiți-l "iPad". Apoi faceți dublu clic pe miniatura obiectului inteligent din Panoul straturilor va apărea o nouă fereastră cu un set de straturi care pot fi modificate corespunzător obiectului inteligent "iPad". Ștergeți zona gri unde va fi localizată interfața. Salvați fișierul .PSB, toate modificările vor fi actualizate automat pe documentul principal.
Acum, să adăugăm câteva fundaluri, mai întâi un fundal alb dreptunghiular în spatele obiectului inteligent "iPad". Acest fundal ar trebui plasat între ghidurile stânga și dreapta din zona aplicației, puteți apela stratul "Fundal" și îl puteți pune într-un folder numit "App", deoarece acolo este locul unde vom pune întregul design al aplicației. Apoi, un fond de gradient mare pentru întregul document (# 121212 - # 434343).
Desenați un dreptunghi vector între limita superioară a zonei aplicației până la 80 de pixeli în interiorul unui nou grup denumit "Antet". Aplicați următoarele stiluri de straturi: o suprapunere de gradient (# 00345C - # 146592), un strohe alb (#FFFFFF) 1px, o umbră de picătură de 10px și o umbra interioară albastră deschisă (# 0180C7).
Dispozitivele mobile au acum afișări foarte frumoase, va fi o rușine dacă nu am adăuga niște detalii mici în antet pentru a face să pară mai frumoase. Mai întâi, adăugați o elipsă albastră (# 1C79B4) în partea stângă a antetului, aplicați un Gaussian Blur (se va rasteriza forma), utilizați orice rază, încerc cu 15px. Apoi Command / Ctrl + Faceți clic pe masca Vector a Rectangularului de antet, Command / Ctrl + Shift + I pentru a inversa selecția și apăsați Delete pentru a elimina strălucirea albastră. Dacă doriți, puteți adăuga mai multe cercuri utilizând tonuri diferite de opacități albastre și diferite, plasați-le într-un grup numit "Bubbles" și plasați-o în partea dreaptă a antetului. Apoi, puteți fie să rasterizeze și să repetați procesul de stralucire albastră din stânga, fie îl puteți converti într-un obiect inteligent și aplicați o mască vectorială pentru a ascunde depășirea.
Voi trece peste procesul de creare a unui logo elaborat pentru aplicația noastră, numesc doar "News Reader" folosind fontul frumos "Walkway Black" din active. Adăugăm o umbră de picătură subtilă și o suprapunere de gradient cu actualul Overlay ca mod de amestecare. Plasați logo-ul în partea stângă a antetului și în interiorul unui grup numit "Logo" din directorul "Header".
Desenați o elipsă neagră îngustă, apoi aplicați un raze Gaussian Blur de 5px. Apoi, utilizând instrumentul Rectangular Marquee, selectați jumătate din elipsă neclară și ștergeți-o. Apoi, adăugați o linie groasă de 1px în stânga umbrei, adăugați în final o mască de strat și umpleți-o cu un gradient alb-negru reflectat. Puneți totul în dosarul "Logo".
Adăugați un dosar numit "Conținutul căutării" în interiorul instrumentului Rounded Rectangle, adăugați un dreptunghi alb (raza de graniță de 50 pixeli). Adăugați stilurile afișate în imaginile de mai jos (o umbră interioară și un gradient Stroke) pentru a obține un efect subtil de tipărire. Apoi adăugați o pictogramă gri (#ABABAB) Lupă și un text de căutare, folosind și Grey, "Helvetica Neue" ca font și Dimensiune: 16pt.
Adăugați un nou dreptunghi rotunjit pentru butonul de căutare (raza de 5 pixeli) din dreapta casetei de căutare. Apoi adăugați textul butonului "Căutare avansată" cu fontul "Helvetica Neue 75 bold" și fundal alb.
Apoi adăugați butonului o acoperire cu gradient lucioasă, așa cum arată imaginea de mai jos, și un grafic Gradient. Apoi adăugați un stil Bevel și Emboss așa cum arată imaginea de mai jos. Puneți ambele căsuțe de căutare și buton în interiorul unui nou grup numit "Căutare".
Să adăugăm bara de meniu de jos. Desenați în partea de jos a zonei App un dreptunghi negru (înălțime de 50 de pixeli). Apoi aplicați o acoperire cu gradient lucioasă așa cum arată imaginea de mai jos.
Deasupra antetului ar trebui să existe o bară cu informații standard iPad (Semnal, ceas și baterie). Chiar și atunci când această zonă nu este prea mare, poate duce la o reducere considerabilă în zona noastră de aplicații, deci este înțelept să o adăugați. În partea de jos a directorului "Header" cu câțiva pixeli mai jos, faceți dublu clic pe "Obiectul inteligent" iPad și adăugați o bandă neagră sau bara de sus a activului iPad. Salvați Obiectul inteligent și plasați dosarul "Antet" în locul său corespunzător.
O atingere plăcută pentru orice aplicație este un fundal curat și bun. pentru aceasta, creați un folder numit "Fundal App". Desenați un dreptunghi gri (# 797979) exact în limitele zonei de aplicație. Apoi, mergeți la Filter> Render> Clouds și faceți nori negri / negri într-un nou strat deasupra fundalului gri. Apoi, mergeți la Filter> Render> Fibers? și creșteți puterea și vibrația, după cum doriți. Apoi treceți la Filter> Blur> Motion Blur și setați unghiul la 90 de grade, iar distanța până la 999. În final, ștergeți toate fibrele din afara zonei aplicației și setați opacitatea la 25%.
Ca o atingere finală, adăugați un cerc gri deasupra fibrelor (Opacitate 30% sau mai puțin). Aplicați un Blur Gaussian în jurul razei de 45 - 50 pixeli. Apoi, ștergeți strălucirea din afara zonei de aplicație. Dacă nu doriți să ștergeți sau să decupați aceste straturi, puteți transforma stratul "Fundal" de culoare gri într-o mască de decupare făcând clic între cele două straturi de miniaturi din panoul Straturi și menținând opțiunea / Alt clic.
Acum, avem fundalul aplicației noastre, este timpul să mergem mai departe cu conținutul.
Deoarece această aplicație va avea mai multe fluxuri de știri, le vom adăuga în mai multe rânduri. Fiecare rând va conține un set de cele mai recente știri despre un anumit site web sau un feed RSS. Vom începe să adăugăm un singur rând și apoi să îl duplicăm ori de câte ori este necesar.
Păstrați-vă straturile organizate, creați un grup denumit "Feed" și plasați-l între folderele "Bottom Bar" și "Background Background". Ordinea folderelor este foarte importantă pentru ca animația finală să funcționeze corect.
Desenați un dreptunghi alb (înălțime de 200 de pixeli) și plasați-o în partea de sus a zonei aplicației, lângă "Antet". Pentru umbra cutie, trageți un dreptunghi negru în spatele celui alb, denumiți-o "Shadow" și aplicați un Gaussian Blur de 4px. Apoi, folosind Instrumentele warp ale controalelor Free Transform, distrugeți dreptunghiul negru, așa cum arată setul de capturi de ecran de mai jos. În cele din urmă, modificați opacitatea "Shadow" la 50%.
Să adăugăm o filă unde vom pune numele feed-ului de știri. Desenați un dreptunghi rotunjit cu raza de coloană de 5px (#FFFFFF) și utilizând Instrumentul de selecție directă (A) deplasați punctele din dreapta jos ale dreptunghiului cu câțiva pixeli drept. Apoi aplicați un Shadow Drop subtil, după cum arată imaginea de mai jos. Plasați stratul în spatele stratului "Bg White".
Din moment ce fundalul nostru încă arată un pic șchiopătător, să creștem senzația adâncă adăugând o suprapunere Gradient subtilă la stratul "BG White" (#BEBEBE - #FFFFFF). O atingere plăcută este să adăugați un strof alb 1px pe stratul de fundal pentru a crea un spațiu plăcut între cutie și umbra sa.
Duplicați stratul "Tab", plasați copia în spatele originalului. Schimbați-i fundul spre albastru (# 014373) și Stroke lui la (# 016CB4), repetați procesul dar și setați o variantă mai întunecată de albastru (# 011A2E și # 0B4B79 pentru Stroke).
Adăugați titlul feed-ului de știri folosind "Helvetica Neue 75 bold" utilizând această culoare prim-plan: # 034170. Puteți adăuga un titlu Favicon dacă doriți.
Adăugați mai multe pictograme pe filele "Actualizați" și "Configurați" (utilizez setul de pictograme menționat pe active). Aplicați o suprapunere în Gradient și o Umbre de Drop cu valorile afișate în imaginea de mai jos.
Acum, adăugați o filă pentru butonul "Închidere".
Acum avem toate straturile Fundal create (în interiorul unui folder numit "Background Background"), iar titlul și pictograma în afara. Acum, creați un dreptunghi vectorial dreptunghiular deasupra "Background Feed" numit "Mască". Aceasta va fi o mască viitoare pentru a ascunde vizibilitatea setului de Știri pe care acest feed va avea. Dar nu vă faceți griji încă, doar schimbați modul de amestecare pentru multiplicare.
Fiecare rând din aplicația noastră va conține mai multe articole, să adăugăm unul (folosesc mai multe articole de tuts + rețea ca eșantioane). Plasați o imagine dreptunghiulară între stratul "Mască" și straturile "Titlu" - vedeți imaginea de mai jos. Repetați procesul descris în pasul 8 pentru a crea un divider de umbră și modificați Opacitatea la 50%.
Să adăugăm un titlu pentru articolul nostru, o linie de metadate și un scurt paragraf de text. Vedeți următoarea captură de ecran pentru a vedea tipografia și culorile sugerate. În cele din urmă puneți toate straturile legate de un articol într-un folder numit "Articol".
Adăugați mai multe articole, până când completați întregul rând. Odată ce ați epuizat spațiul, selectați toate dosarele de articole pe care tocmai le-ați creat (comanda / Ctrl + Shift din miniaturile folderului din panoul straturilor) și glisați-le spre stânga, dacă este necesar, pentru a adăuga un alt articol în partea dreaptă. Adăugați cât mai multe articole doriți, trageți în cele din urmă toate articolele înapoi în poziția inițială (cu primul articol aliniat la fundalul feedului).
Pune toate articolele într-un nou grup numit "Articole". Asigurați-vă că dosarul poate fi tras la stânga și la dreapta, așa cum arată imaginea de mai jos. Apoi convertiți dosarul într-un obiect inteligent. Apoi, convertiți stratul "Mască" într-o mască de decupare (opțiunea / Alt faceți clic între "Obiecte inteligente" și "Mască"). Acum, încercați să trageți obiectul "Articole" la stânga și la dreapta, stratul "Mască" ar trebui să ascundă articolele din afara zonei Mască. În acest moment, acest feed de știri are de fapt toate straturile necesare pentru a-și anima comportamentul.
Acum, adăugați multe rânduri de fluxuri de știri și puneți fiecare rând într-un dosar cu numele său respectiv: "Feed1", "Feed2" etc. Apoi adăugați toate fluxurile într-un nou dosar denumit pur și simplu "Fluxuri". Puteți să duplicați fundalul și să creați articole diferite în interiorul fiecăruia, dar NU duplicați obiectul inteligent "Articole" din primul feed, creați-l doar de la zero. Asigurați-vă că întregul dosar "Fluxuri" este ușor deplasabil de sus în jos și invers. Puteți adăuga chiar și câteva fluxuri cu text numai pe ele.
Trageți toate "Fluxurile" de jos în sus și lăsați vizibile numai partea inferioară.
În dosarul "Bottom Bar" (Pasul 11) adăugați următoarele pictograme de navigare: "Acasă", "Actualizați", "Setări", "Alimentări" din active. Adăugați fiecare nume de pictogramă sub pictograma sa folosind "Helvetica Neue 75 Bold" (# 818181). Apoi aplicați pe pictograma Stilurile de straturi afișate pe ecranul de mai jos. În cele din urmă, creați un nou stil pentru o pictogramă selectată / activă.
Adăugați o casetă transparentă în spatele acesteia și schimbați culoarea alfabetică a numelui în alb. Ar trebui să obțineți ceva asemănător cu partea de jos a ecranului de mai jos?
În interiorul directorului "Fluxuri", adăugați un buton (Runda rotunjită dreptunghiulară de 5px) copiați și lipiți stilul stratului din pictogramele barei de fund, dacă doriți să economisiți timp. Apoi adăugați cuvântul "Adăugați feed" cu "Helvetica Neue 75 Bold" (# 828282) și aliniați-l la mijlocul butonului.
Structura straturilor dvs. de până acum, ar trebui să conțină un obiect inteligent "iPad", "Antetul" "Bottom Bar", dosarul "Feeds" și "Fundalul aplicației".
Acum adăugați un nou set de straturi într-un dosar denumit doar "Feed" între dosarul "Bottom Bar" și dosarul "Feeds". Acest dosar va conține un articol, va crea un fond alb și veți adăuga conținut (titlu, miniatură și un scurt paragraf de text). Desenați un dreptunghi negru mare, chiar în interiorul limitelor zonei de aplicație, și atingeți Opacitatea la 75%. Apoi Centrul Aliniați zona albă. Nu contează dacă conținutul adăugat depășește zona aplicației, de fapt vom anima un efect de defilare pentru acest conținut. Să mergem mai departe.
Mai întâi organizați straturile, denumiți fundalul negru "BG" și aranjați-o în partea de jos. Apoi puneți toate straturile de text, miniaturile și imaginile într-un folder numit "Nou" sau "Articol".
Folosind instrumentul Ellipse, desenați un cerc alb în colțul din dreapta sus al zonei de alimentare și aplicați o umbră Drop Drop la ea. Apoi lipiți (sau desenați) un frumos "X" ca buton de închidere, puneți toate aceste straturi într-un folder numit "Close".
Selectați folderul "Nou" și convertiți-l într-un obiect inteligent. Apoi creați un alt dreptunghi, deasupra fundalului alb, și denumiți "Mască" (este afișat în negru pe ecran) și îl folosești ca o mască pentru " Obiect inteligent. Apoi, folosind Instrumentul de mutare (V) trageți obiectul de sus în jos și invers pentru a vă asigura că totul arată bine. În cele din urmă, puneți articolul în poziția inițială (aliniat la stânga-sus).
Înainte de a merge mai departe, este important să aveți toate straturile organizate și obiectele inteligente create corect. Structura stratului ar trebui să fie aceasta, de sus în jos: folderele "iPad" Smart, apoi directorul "Header", "Bottom Bar", "Feed", "Feeds" și "Background App".
Apoi, este important să creați Obiectul inteligent "Articole" din primul rând de feed-uri (Pasul 26), deoarece un obiect inteligent conține o cronologie completă și puteți cuibui tranziții animate pe mai multe niveluri (știu că sună confuz, dar au sens în câteva etape).
Veți avea nevoie de un CPU decent și de card grafic pentru a face animația, astfel încât răbdarea este un ingredient excelent aici.
Amintiți-vă: vom anima comportamentul aplicației, trebuie să țineți cont mereu de procesul de a arunca o privire la fluxurile de știri, de a naviga prin articole și, în final, deschideți un articol pentru ao citi.
Accesați fereastra> Animație. Acest panou conține o cronologie în care puteți pune cadre cheie pentru a anima tranzițiile între funcțiile Post ion, Opacity și Layer Styles. În acest tutorial vom anima poziția și opacitatea. Această zonă nu este prea diferită de alte programe de editare video, cum ar fi After Effects sau Premiere, dacă sunteți un începător este un punct de plecare excelent.
Să începem partea distractivă a acestui tutorial!
Vom începe să ascundem un dosar care nu ar trebui încărcat de la început. Fluxul pop-up trebuie să rămână ascuns până când o acțiune o face vizibilă. Pentru aceasta, pe Panoul de animație, căutați folderul "Feed" și faceți clic pe triunghiul mic de lângă el pentru a extinde opțiunile de animație. Apoi mutați cursorul triunghiular pe Cronologie și plasați-l chiar la începutul animației. Faceți clic pe pictograma Stop mic din dreptul opțiunii Opacitate din dosarul "Feed", astfel încât să creați o cheie cheie. Odată ce ați creat cadrele cheie, puteți aplica toate modificările proprietăților pe care le doriți, în acest caz, vom reduce folderul "Feed" opacitatea până la 0%. Și asta este, acest dosar va rămâne ascuns până când îl vom face din nou vizibil.
Răsfoiți folderele din Panoul de animație și găsiți obiectul inteligent "Articole" din rândul "Feed 1" și extindeți opțiunile acestuia. - Trageți mânerul de pe cronologie un pic spre dreapta, lângă 1s (o secundă), apoi faceți clic pe pictograma Stop Watch pentru a crea prima cheie de cadre. Asigurați-vă că în acest moment poziția Obiectului este lăsată aliniată cu fundalul rândului de alimentare. - Trageți mânerul de lângă cele 4 secunde din Cronologie și faceți clic pe pătratul galben mic din stânga Opțiunii de poziție (între săgețile următoare / prev) pentru a crea o nouă cheie cheie. Acum, utilizând Instrumentul de mutare, glisați obiectul inteligent "Articole" spre stânga, pentru a avea Obiectul, aliniat corect la fundalul rândului de alimentare. - Deplasați mânerul la 5 secunde de pe Cronologie și introduceți o nouă cheie cheie (amintiți-vă, faceți clic pe pătratul galben mic) și pur și simplu țineți-o (nu mutați nimic). - În cele din urmă, mutați dispozitivul de manipulare de lângă cel de-al șaptelea rând pe Cronologie, creați un nou cadru cheie și folosiți Instrumentul de mutare, întoarceți obiectul "Articole" în poziția inițială, aliniat la fundalul feedului.
Dacă doriți, puteți previzualiza această mică parte a procesului de animație accesând File> Export> Preview Video. Există doi agenți de manipulare în zonele din stânga și din dreapta ale liniei de timp pe care le puteți trage pentru a reduce zona de lucru, făcând procesul de redare mai rapid.
Începând să avem dreptate, să mergem mai departe. Acum vom anima întregul dosar "Fluxuri". Deoarece nu putem anima direct poziția unui dosar, va trebui să îl convertim într-un Obiect inteligent, dar ce se întâmplă cu animația plăcută pe care am făcut-o cu articolele? Odată ce convertiți întregul dosar într-un obiect inteligent, toată cronologia acestuia și toate cadrele cheie rămân aceleași. Cronologia este unică oricum, dacă există un efect de tranziție asupra celei de-a treia secunde a animației într-un obiect inteligent, acesta va rămâne vizibil în toate fișierele părinte și în cronologia sa. Puteți să-l testați exportând animația cu obiectul inteligent în locul dosarului și nu veți vedea nici o diferență.
În scopul de a masca corect (pentru a evita să vedeți un număr de articole care se deplasează în spatele iPad-ului) Creați o copie a stratului "BG", plasați-o peste obiectul "Feeds" și aplicați o mască Vector, 1024x768px).
Selectați Obiectul inteligent "Fluxuri" și deschideți panoul de animație. Activați funcția de gestionare a liniei de timp de lângă cele 7 secunde, creați o cheie cheie pentru poziții, asigurați-vă că fluxurile sunt aliniate în partea de sus. Apoi, mutați handler-ul de lângă 11s și creați o cheie cheie de poziție, mutați întregul obiect până când acesta este aliniat la partea inferioară. Apoi, pe 14 secunde pe cronologie creați un alt keyframe Poziție, dar nu mutați obiectul, lăsați-l în partea de jos aliniat, aceasta va crea un ține efect. În cele din urmă, mutați ordonatorul liniei de cronologie de lângă cele 15 secunde și creați un cadru cheie, trageți obiectul până când acesta este aliniat din nou.
Vizualizând pasul anterior de animație, ar trebui să aveți ceva de genul:
Mai intai vom fi nevoiti sa facem din nou pop-up vizibil, amintiti-va ca il ascundem pe pasul 35. Selectati folderul "Feed" si din Panoul de animatie mutati manerul de cronologie alaturi de 20s si creati un frame-cheie. Apoi deplasați mânerul pe 22 de secunde și creați un alt cadru cheie, schimbând Opacitatea folderului la 100%. Apoi creați un alt keyframe de lângă cei 30 de ani și păstrați opacitatea la 100%. În cele din urmă, creați o cheie cheie de lângă 31 de ani și modificați Opacitatea întregului dosar înapoi la 0%.
Este timpul să animați conținutul articolului nostru pop-up. În pasul 33, am creat un obiect inteligent în dosarul "Feed". Selectați-l și asigurați-vă că este mascat corespunzător cu stratul "Mască" din spatele acesteia. În panoul Animație. Pe 24 de secunde, creați o cheie cheie pentru poziția Smart Object "New" sau "Article", pentru a vă asigura că articolul este aliniat la început. Apoi, lângă cel de-al 25-lea, creați o cheie cheie a poziției și trageți obiectul inteligent până când articolul este aliniat la partea de jos. Apoi, în anii 26 creați un frame-cheie fără a schimba poziția obiectului. În cele din urmă, lângă cei 28 de ani, creați un cadran cheie care trage obiectul înapoi în poziția sa aliniată de sus.
În acest moment știți cum să trageți, să ascundeți și să mutați straturile și cum arată exportând animația. Toate comportamentul aplicației este animat, astfel încât să puteți opri aici. dar dacă doriți să puteți adăuga niște ajutoare vizuale pentru a vă ajuta clientul / clientul să vă înțeleagă mai bine ideile.
Plasați imaginea de mână din active, extrageți-o din fundal și, dacă doriți, adăugați un efect Drop Shadow.
Acum, totul este animat poziția mâinii care încearcă să se potrivească cu animația. Mai întâi, mișcați mâna orizontal, creând efectul derulării articolelor feed-ului orizontal de știri.
Apoi animați mâna pentru a crea efectul derulării prin feedurile noi pe verticală. Nu uitați: încercați să potriviți pozițiile cadrelor cheie create anterior atunci când animați fluxul aplicației.
Apoi animați mâna pentru a se potrivi cu derularea verticală a conținutului articolului. Mai întâi localizați mâna peste articolul selectat pe orice feed pentru a crea un efect "atingeți". Apoi mutați-l după cum arată imaginile de ecran de mai jos pentru a se potrivi cu parcurgerea verticală. În cele din urmă, localizați mâna peste butonul de închidere (rețineți, potriviți întotdeauna cadrele cheie create anterior).
Doar dacă doriți, puteți crea un strat de cerc numit "Touch" și practic să-i animați Opaci
Accentsconagua