tranziții de animație între cele două fragmente de 19
- 08.11.15 12:57 •
- AStefanovskiy •
- • # 270361
- • Habrahabr
- • traducere
- 10 •
- cum ar fi Forbes, doar mai bine.
Unul dintre elementele-cheie în proiectarea materialelor sunt mișcare semnificative între ecrane. Lollipop oferă suport în formă de animații, tranziții între activitatea cadru și Fragment. Deoarece articolele de pe acest subiect nu este atât de mult, am decis să scrie propria mea!
Produsul nostru final este destul de simplu. Vom face galeria aplicației cu sigilii. ecran cu detalii se va deschide când faceți clic pe imagine. Datorită tranziției cadrului dintr-o grilă de imagini din fereastra cu detalii vor fi însoțite de animație.
Dacă doriți să vedeți ce sa întâmplat - cererea este completată pe GitHub.
Am două vești pentru tine: bine și rău. Vestea proastă este că Lollipop înainte de a cadrului nu funcționează. În ciuda acestui fapt, problema este rezolvată prin metodele bibliotecilor de sprijin cu ajutorul cărora puteți implementa tranziții animate disponibile în API-ul 21+.
Articolul va fi utilizat pentru a sprijini funcțiile bibliotecii pentru a muta conținutul.
este necesară View pentru asocierea pe primul ecran, iar a doua dublă legătură. Lollipop propune utilizarea „numele de tranziție“ proprietate pentru legătura între o vizualizare.
Există două modalități de a adăuga numele de tranziție (numele de tranziție) pentru vizualizarea ta:
- Codul poate fi folosit ViewCompat.setTransitionName (). Desigur, puteți, de asemenea, pur și simplu apel setTransitionName (). în cazul în care suportul începe cu Lollipop.
- Pentru a adăuga la XML, utilizați aplicația Android atribut: transitionName.
Este important de remarcat faptul că într-un singur aspect (aspect), tranzițiile numele trebuie să fie unice. Păstrați acest lucru în minte atunci când organizarea de tranziții. Arătând numele de tranziție pentru ListView sau RecyclerView cere același nume și pentru toate celelalte elemente.
Setarea FragmentTransactions ar trebui să fie foarte familiar pentru tine:
utilizați metoda addSharedElement () - pentru a specifica tipul de vizualizare va trece între fragmente.
Vezi transferat în addSharedElement () este punctul de vedere de la prima piesa pe care doriți să împartă (cota) la al doilea fragment. Numele de tranziție aici este numele tranziției în divizat (partajat) View într-un al doilea fragment.
În cele din urmă, a venit momentul când ne cerem animații de tranziție între fragmente.
Pentru elemente comune:
- Pentru trecerea de la prima piesa la metoda a doua utilizare setSharedElementEnterTransition ().
- Pentru a merge înapoi, utilizați metoda setSharedElementReturnTransition (). Animație se întâmplă atunci când apăsați butonul din spate.
Rețineți că trebuie să utilizați aceste metode într-un al doilea fragment, pentru că dacă face acest lucru în primul - nimic nu se va întâmpla.
Puteți anima, de asemenea, pentru toate tranzițiile View nepartajate. Pentru aceasta, utilizați opțiunea setEnterTransition (). setExitTransition (). setReturnTransition (). și setReenterTransition () în fragmentele respective.
Fiecare dintre aceste metode de tranziție are un parametru pentru efectuarea animației.
vom fi foarte ușor de a crea o animație. Noi folosim tranziția noastră personalizată pentru mișcarea imaginii (mai mult pe acest lucru mai târziu), și dispariția de ieșire (fade).
Android oferă unele tranziții gata făcute de animație, care sunt potrivite pentru cele mai multe cazuri. Fade efectuează animație dispariție. Slide de tranziție animează apariția / dispariția alunecand din unghiul ecranului. Explode animație similar cu o explozie, imaginea se mută de la marginile ecranului. În cele din urmă, AutoTransition face șterge imaginea, muta și redimensiona. Acestea sunt doar câteva exemple ale pachetului, ele sunt de fapt mult mai mult!
V-am spus că avem nevoie de o tranziție personalizată pentru imaginea noastră. Aici este:
Tranziția noastră personalizată este nimic mai mult decât un set de trei tranziții gata asamblate:
- ChangeBounds animă de frontieră (poziția și mărimea) din punctul nostru de vedere.
- ChangeTransform animă scară de vedere, inclusiv părinții.
- ChangeImageTransform ne permite să modificați dimensiunea (și / sau tipul de scală) a imaginii noastre
Dacă vrei să știi cum trei dintre ele interacționează, încercați să se joace cu aplicația, la rândul său, de a scoate una atunci cealaltă animație, vizionarea toate pauzele.
Puteți crea, de asemenea, animații mai complexe, utilizând XML. Dacă preferați XML, atunci va fi interesat să vadă documentația pe site-ul de tranziție Android.
Codul pe care în cele din urmă ne-am dovedit a fost destul de simplu:
Asta este! Un mod simplu de a pune în aplicare tranziții de animație între cele două fragmente este gata!
Sincer întotdeauna înfuriat de această animație în noul Android. Ea nu are nici un sens real, pentru că noi înțelegem că în lumea reală sau că carte, sau un obiect poate să nu apară netede, sau se evaporă.
Atunci ce fel de animație ar trebui să utilizați? Eu personal nu știu. Aș fi foarte fericit să audă răspunsul la întrebarea mea de la designeri profesioniști, și, în general, de la oricine :)
Biblia este descris script de animație.
1. Mai întâi a fost cuvântul. (Label)
...
Plus cele 10 amendamente de la Disney.
Ne pare rau, dar este simplu: înainte de schimbarea a fost imagini instantanee, care a descurajat și mai mult. Acum înlocuit cu o schimbare bruscă de animatie buna, care a fost percepută ca o îmbunătățire foarte frumos.
Dar, în general, în cazul în care considerați că problema este pur psihologic, ca la cinema, în general - nu ne trece cu vederea realitatea în anticiparea schimbării imaginii, iar imaginea vine la noi, schimbătoare, atât în acțiunile noastre, nu eforturile noastre.
Și, de fapt - aș recomanda utilizarea unui efect îmbunătățit - nu se schimbă și transformarea imaginii. și apoi, într-o mai multe imagini similare. Ar fi mai aproape de magia medievală :)
Această animație este extrem de îndoielnic Design material. Tot ceea ce se poate întâmpla este descris în ghidul de la Google. Mult mai logic să fie considerată ca o carte de fotografie, care inițial scalate împreună cu o fotografie, apoi se întinde în afară (doar de fundal), și au textul afișat pe gol în locul său.