Eind vorig jaar heb ik de Chrome Dev Summit -website gebouwd. Ik wilde dat het een Material Design- uitstraling zou hebben, omdat het een geweldige ontwerptaal is en ik vond dat het perfect zou passen bij het soort site dat ik wilde maken. Maar zoals bij elke nieuwe ontwerptaal zijn er vragen, uitdagingen en beslissingen die genomen moeten worden, vooral als het gaat om de conventies van het web.
Eén aspect van de site dat bijzonder lastig te creëren was, was het ‘overname-effect’ wanneer je op een kaart klikt.
Om een effect als dit op 60 fps te laten draaien, was wat denkwerk, prototypen en een paar interessante compromissen nodig. Op de Chrome Dev Summit sprak ik over dit effect en legde ik tot in de kleinste details uit hoe ik het heb gebouwd.
Een animatie met hoge prestaties maken
Hoogwaardige animaties zijn, in ieder geval vandaag de dag, animaties die de compositor van de browser ondersteunen. Als je je kunt houden aan het aanpassen van de transformatie- en dekkingseigenschappen, zul je doorgaans geweldige prestaties zien. De algemene aanpak die ik voor de kaartanimatie heb gekozen, doet precies dat:
- Meet de positie van alle elementen op de kaart wanneer de kaart is samengevouwen.
- Schakel de klassen van de kaart in of uit om deze uit te vouwen (zonder te animeren).
- Meet de positie van de elementen op de kaart opnieuw op, nu de kaart is uitgevouwen.
- Bereken de verschillen.
- Pas negatieve transformaties toe om de elementen terug te verplaatsen naar de startposities.
- Animaties inschakelen.
- Verwijder de negatieve transformaties en zie hoe de elementen naar hun uiteindelijke locatie op het scherm vliegen.
Dit klinkt misschien duur, maar er zit een tijdsbestek van 100 ms tussen het moment dat een gebruiker interactie heeft en het moment dat de animatie moet starten. Langer dan dit en de gebruiker zal een vertraging waarnemen. Je kunt deze tijd gebruiken om duur voorbereidend werk te doen, zodat je tijdens de animatie zelf goedkoper kunt werken. Er is ook een tijdsbestek van ongeveer 50-100 ms om op te ruimen, wat handig kan zijn, afhankelijk van wat je wilt doen.
Het dure werk voor de animatie vindt plaats binnen die eerste 100 ms. Op een Nexus 5 duurt dat zo'n 70 ms, dus er is nog ruimte over.
Ontvang de code
Als je de site graag wat beter wilt bekijken, zul je blij zijn om te horen dat de code op GitHub is gepubliceerd . Neem gerust een kijkje!