Eind vorig jaar heb ik de Chrome Dev Summit- site gebouwd. Ik wilde dat het de look en feel van Material Design zou krijgen, omdat het een geweldige ontwerptaal is, en ik vond dat het goed zou passen bij het soort site dat ik wilde maken. Maar net als bij elke nieuwe ontwerptaal zijn er vragen, uitdagingen en beslissingen die moeten worden genomen, vooral als het gaat om de conventies van het internet.
Een aspect van de site dat bijzonder uitdagend was om te maken, was het 'overname'-effect wanneer je op een kaart klikt.
Om een effect als dit met 60 fps te laten werken, 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 bloederig detail uit hoe ik het ging bouwen.
Het bouwen van een hoogwaardige animatie
Animaties met hoge prestaties zijn, tenminste vandaag de dag, de animaties die de voorkeur geven aan de compositor van de browser. Als u zich aan de veranderende transformatie- en dekkingseigenschappen kunt houden, zult u doorgaans geweldige prestaties zien. De algemene benadering die ik voor de kaartanimatie heb gevolgd, doet precies dat:
- Meet de positie van alle elementen op de kaart wanneer de kaart is samengevouwen.
- Schakel tussen de klassen van de kaart om deze uit te vouwen (zonder animatie).
- Meet de positie van de elementen op de kaart opnieuw, nu de kaart is uitgevouwen.
- Bereken de verschillen.
- Pas negatieve transformaties toe om de elementen terug naar de startposities te verplaatsen.
- Schakel animaties in.
- Verwijder de negatieve transformaties en zie hoe de elementen naar hun uiteindelijke locatie op het scherm zoeven.
Dit klinkt allemaal misschien duur, maar er is een tijdsbestek van 100 ms vanaf het moment dat een gebruiker interactie heeft voordat de animatie moet starten. Als dit meer is, zal de gebruiker een vertraging ervaren. Deze tijd kun je gebruiken om duur voorbereidend werk te doen, zodat je tijdens de animatie zelf goedkoper kunt rennen. Er is ook een venster aan het einde van ongeveer 50-100 ms waarin u opruimwerk kunt doen, wat handig kan zijn, afhankelijk van wat u probeert te doen.
Het dure werk om de animatie te maken wordt binnen die eerste 100 ms gedaan en op een Nexus 5 duurt het werk ongeveer 70 ms, dus er is ruimte over.
Verkrijg de code
Als je geïnteresseerd bent om de site in meer detail te bekijken, zul je blij zijn te horen dat de code op GitHub is vrijgegeven , dus ga eens kijken!