Een beginnersgids voor het implementeren van Android-animaties (deel 2)

In deel 1 hebben we het gehad over de basisprincipes van animaties en over vastgoedanimaties. In dit bericht zal ik het hebben over het bekijken van animaties en het nieuwe kader voor activiteitsovergangen dat is geïntroduceerd in API-niveau 21. Het overgangsraamwerk is al toegevoegd in API-niveau 19 (4.4.2) maar is krachtiger geworden in API-niveau 21.

Het Android-framework begon met View-animaties, maar vanwege hun problemen introduceerden ze de Property-animaties zoals besproken in deel 1. View-animaties zijn perfect voor splashscreen-animaties en andere gebieden waar er geen dergelijke interactie met de weergave is. In de meeste gevallen worden ze geïmplementeerd met behulp van XML-code.

Soorten beeldanimatie

  1. Tween-animatie - Dit zijn de animaties die worden toegepast op een weergave die verantwoordelijk is voor het schalen, vertalen, roteren of vervagen van een weergave (hetzij samen of één voor één).
  2. Frame-animatie - Deze animaties worden toegepast met behulp van verschillende tekenbare elementen. Hierin moeten we alleen een lijst met tekenteksten in de XML-code opgeven en de animatie wordt op dezelfde manier uitgevoerd als frames van een video.

Weergave-animaties worden niet veel gebruikt, omdat hetzelfde ViewPropertyAnimator-object kan gebruiken, dat veel sneller en leesbaar is. Frame-animatie is vergelijkbaar met Drawable Animation. Het belangrijkste is om het nieuwe Transition-framework te begrijpen, dat veel nuttig is en prachtige animaties biedt.

De nieuwe animaties (API Level 21+)

Is het niet cool?

Android biedt activiteitsovergangen, fragmentovergangen en gedeelde elementovergangen. Andere animaties zijn circulaire onthulling, rimpeleffect enz., Gebogen beweging. Het rimpeleffect kan worden toegepast door de achtergrondeigenschap van een weergave in te stellen als:

android: “attr / selectableItemBackground” background =

Hier zullen we activiteitsovergangen en gedeelde elementovergangen uitproberen, net als boven GIF.

De basisstap is het maken van het bestand styles-v21 en de volgende dingen doen:

Verklaring van bovenstaande stijlen-v21.xml

Shared Element Transitions - Hierin is er een gedeelde weergave tussen twee activiteiten / fragmenten. Gedeelde weergave betekent dat beide weergaven hetzelfde zijn in beide activiteiten, alleen zijn hun afmetingen iets anders. Bijvoorbeeld: een afbeelding in een recycle-item dat, wanneer erop wordt geklikt (tikt), het itemdetail met dezelfde afbeelding maar in een groter formaat toont. We zullen zoiets doen: -

Cool ... Maar hoe werkt dit ding?

In principe zijn er hier 2 activiteiten. Een met een kleine stip en de andere met een grote stip en tekst. Wanneer ik op de knop in Activiteit A klik, wordt de Activiteit B met de animatie geopend. Dit effect is ook zichtbaar in de Google Play Store-app. Maar ze passen ook circulaire onthullende, boogbewegingseffecten toe. Het belangrijkste om op te merken dat het beeld NIET van de oorspronkelijke positie naar de eindpositie beweegt. Het overgangsraamwerk berekent de startscène en de eindscène en animeert vervolgens tussen die scènes. Om te weten hoe animaties werken, verwijst u hiernaar. Ook met behulp van een nieuw intentiemechanisme is dit mogelijk zoals hieronder wordt getoond:

Hier heb ik de API-controle voor lolly gebruikt en vervolgens de overgang uitgevoerd en op andere niveaus begint de activiteit normaal. De nieuwe paar <> regel helpt het systeem om de gedeelde elementen te kennen.

Opmerking - Houd de overgangsnaam in beide weergaven hetzelfde (kleine stip en grote stip). Dit helpt het systeem de gedeelde elementen te kennen. Een goede zaak is om de overgangsnaam in strings.xml te plaatsen.

Hier heb ik de overgang custom_animation.xml gebruikt voor de activiteitstransitie, wat een explode-effect is. Bovendien heb ik enkele weergaven uitgesloten om deel te nemen aan animatie. Deze weergaven zijn de statusbalk en de werkbalk. We kunnen verschillende soorten effecten (vervagen, glijden) gebruiken om bij onze use case te passen.

Activiteitsovergangen - API-niveau 21 introduceerde meer realistische en gebruikersvriendelijke activiteitsovergangen. Explode, ChangeImageTransform-overgangen lijken bijvoorbeeld realistischer en leiden de gebruiker beter van de activiteitenstroom. In ons voorbeeld hierboven heb ik vervagingstransitie gebruikt die wordt geleverd door het Android-systeem. Als we geen animatie opgeven, wordt standaard AutoTransition gebruikt. We kunnen onze eigen overgang maken door een aangepaste klasse te maken die de overgang verlengt. Zie dit voor referentie.

Circulaire onthulling

Circulair onthullend effect

Het bovenstaande circulaire onthullingseffect wordt gemaakt wanneer op FAB wordt geklikt:

Bedankt voor het lezen van het artikel. Suggesties / correcties / opmerkingen zijn altijd welkom. Als het je bevalt, klik je op de knop Vind ik leuk en deel je het artikel met de Android-community. Laten we de kennis zoveel mogelijk delen.

Laten we ook vrienden worden op About.me, Twitter, LinkedIn, Github en Facebook.