Accentsconagua
Share
De taal Materiaalontwerp is gemaakt om problemen met een vlak ontwerp op kleinere schermen op te lossen door visuele aanwijzingen te geven aan interactieve elementen. In dit artikel leer je over enkele van de fundamentele concepten van animatie en hoe ze kunnen worden gebruikt om een natuurlijk, levensecht gevoel aan elementen te geven. U zult zien hoe u deze ideeën kunt gebruiken om uw gebruikers te verrassen en ze te helpen de gebruikersinterface van uw app te begrijpen.
Google suggereert dat alle animaties responsief, natuurlijk, bewust en opzettelijk moeten zijn. Objecten op het scherm moeten werken alsof ze zijn gemaakt van specifieke materialen, met hun eigen gewicht en volume die bepalen hoe ze bewegen en op het scherm werken.
Animaties die optreden, moeten direct verband houden met een actie en moeten doelgericht en levend zijn. Ze moeten betekenisvol zijn en de gebruiker helpen bij uw aanvraag door een doel te hebben en dat doel te dienen. Animaties moeten een context creëren voor uw gebruikers en hun ogen op het scherm richten, zodat zij weten wat er mogelijk is met uw app.
Beweging zou zich meer moeten bezighouden met de hoeveelheid tijd die nodig is om van punt A naar punt B te komen in plaats van de afstand die moet worden afgelegd. Afstanden veranderen afhankelijk van de grootte van het scherm, maar de snelheid van een object zal de nadruk leggen en de gebruiker helpen begrijpen wat er gebeurt.
Wanneer een object moet worden verwijderd en een ander moet worden toegevoegd aan het scherm (zoals een knop die verandert van afspelen in pauze), dan moet u het eerste object in de tweede vervormen. Evenzo kunt u significante wijzigingen in een object melden door de kleur en alpha te wijzigen voor het schermitem. Op deze manier weten gebruikers wat er is gewijzigd en kunt u benadrukken wat beschikbaar is in uw apps zodat gebruikers hiermee kunnen communiceren.
Een van de grootste verwijzingen voor het begrijpen van natuurlijke animaties is het boek De illusie van het leven door Frank Thomas en Ollie Johnston, die een hoofdstuk heeft dat de principes van animatie beschrijft die Disney in hun animatiefilms gebruikt. Thomas en Johnston schetsen 12 fundamentele principes in hun boek. In deze sectie bespreken we enkele van deze principes en hoe deze gerelateerd kunnen zijn aan Material Design.
Wanneer een voorwerp door een actie vordert, zal het veranderingen in zijn vorm vertonen op basis van het materiaal waaruit het is gemaakt.
Dit concept wordt vertegenwoordigd door het Squash and Stretch-principe, dat het best kan worden geïllustreerd door te denken aan een stuiterende bal. Als externe krachten op de bal inwerken, zoals de zwaartekracht of opwaartse versnelling, zal de bal uitrekken. Wanneer het voorwerp de grond raakt, zal het zich bundelen en naar de oppervlakte pletten. Objecten die bewegen en communiceren met oppervlakken in uw app, moeten dit idee gebruiken om de illusie van gewicht en volume te geven aan uw object terwijl het beweegt.
Geen enkele grote actie zou uit het niets moeten gebeuren. Wanneer u een animatie in uw apps uitvoert, moet u een andere, kleinere actie hebben die leidt naar de hoofdanimatie. Dit principe wordt anticipatie genoemd en het helpt de situatie te voorkomen dat uw gebruiker vraagt: "Waarom gebeurde dit?" Natuurlijke beweging begint meestal met een warming-up in plaats van eenvoudigweg te starten. In Android kunt u de AnticipateInterpolator klasse om een animatie te maken die eerst een klein stukje achteruit gaat voordat u verdergaat.
Het doel van staging is om uw inhoud duidelijk en begrijpelijk te maken voor uw gebruikers. Uw gebruikersinterface en animaties moeten natuurlijk aanvoelen en verankerd zijn aan een kerntaak of concept, in plaats van uw gebruiker onzeker te maken waarom iets op een bepaalde manier is gebeurd. U moet slechts één belangrijke actie tegelijk uitvoeren om de zaken eenvoudig en doelbewust te houden.
Wanneer een bewegend object tot stilstand komt, stopt het niet allemaal tegelijk (behalve een ander stevig voorwerp raken, maar dat is waar Stretch en Squash in het spel komen). Appendages van een object zullen nog een korte tijd blijven bewegen nadat de kern van het object is gestopt.
Bij het maken van materiaalanimaties moet je proberen om twee verschillende posities te gebruiken: het gewenste stoppunt en een ander punt dat iets verder ligt, waar je animatie volledig kan stoppen en vervolgens terugkaatst naar je uiteindelijke positie. Dit voorkomt dat uw animatie plat en mechanisch lijkt. Dit soort animatie kan worden bereikt met behulp van de BounceInterpolator of OvershootInterpolator klassen.
Natuurlijk bewegen gebeurt niet met een constante snelheid, en dat geldt ook voor uw animaties.
Wanneer een object zich van buiten het gezichtsveld verplaatst en het scherm binnenkomt, zou het dat snel moeten doen en dan langzamer gaan naar zijn uiteindelijke positie. De snelle beweging zal de aandacht van uw gebruiker trekken en genoeg tijd voor hen geven om op te merken waar het terechtkomt.
Omgekeerd moet een object dat het scherm verlaat, langzaam starten en versnellen wanneer het het scherm verlaat. Dit geeft je gebruiker voldoende tijd om op te merken dat het object in beweging is en als het versnelt om te vertrekken, zullen ze begrijpen dat ze moeten ophouden met zorgen voor dat item op het scherm.
Wanneer een object van de ene positie op het scherm naar de andere verplaatst zonder het scherm te verlaten, moet u deze twee ideeën combineren, zodat de gebruiker ziet wat er gebeurt terwijl uw animatie een natuurlijk gevoel behoudt. Dit principe wordt ook toegepast op lijsten, omdat ze snel scrollen wanneer een gebruiker ze gooit, en dan langzamer gaan totdat ze stoppen. Wanneer een lijst tussen secties springt, wordt het minder meeslepend en voelt het mechanisch aan. U kunt de LinearOutSlowInInterpolator, FastOutLinearInInterpolator, of FastOutSlowInInterpolator om deze animatie-effecten toe te voegen.
Op enkele uitzonderingen na, vindt natuurlijke beweging plaats in bogen in plaats van exacte rechte lijnen. Bij het verplaatsen van objecten over het scherm, naast het langzame in en uit-principe, moet u proberen het object in een boogvormig pad te verplaatsen om een mechanisch, onnatuurlijk gevoel in uw animatie te voorkomen. U kunt de Android gebruiken ArcMotion voorwerp om uw objecten langs een gebogen pad te verplaatsen.
Secundaire acties zijn kleinere, eenvoudigere acties die het idee van de belangrijkste voorkomende actie ondersteunen. Secundaire acties mogen niet overschaduwen of interessanter lijken dan de hoofdactie, omdat ze alleen maar voor de nadruk liggen.
Een voorbeeld van een secundaire actie zou zijn wanneer u de navigatielade in een Android-toepassing opent. Terwijl de lade open schuift, is de animatie van het hamburgerpictogram naar de pijl een eenvoudig effect dat benadrukt wat er gebeurt zonder de belangrijkste verandering op het scherm te overschaduwen..
Bij het werken met animaties is timing alles. Als een animatie te langzaam of te snel beweegt, merkt de gebruiker dat iets zich "off" voelt.
Het is belangrijk om te onthouden dat Material Design vraagt om objecten te laten verschijnen alsof ze van een soort materiaal zijn gemaakt. Als het de bedoeling is dat een voorwerp aanvoelt als papier dat over een oppervlak schuift, mag het niet snel over het scherm worden bewogen. Het is begrijpelijk dat er geen vaste formule is voor animatiesnelheden in apps, maar met wat tijd en praktijk moet je goed getimede animaties kunnen maken die passen bij het thema en doel van je app.
Nu u zich bewust bent van de belangrijkste concepten van Material Motion en enkele van de basisprincipes van animatie, kunt u beginnen met het spelen met de verschillende beschikbare hulpmiddelen om uw app te animeren en de kleine extra pop toe te voegen om uw gebruikers te verrassen..
Als je meer wilt weten over het maken van animaties in Android, bekijk dan de diepgaande cursus Animate Your Android App van Ashraff Hathibelagal, hier op Envato Tuts+.
Of bekijk enkele van onze andere tutorials over animatie in Android!
