Fin de l'année dernière, j'ai créé le site Chrome Dev Summit. Je voulais qu'il ait l'apparence Material Design, car c'est un excellent langage de conception et je pensais qu'il conviendrait parfaitement au type de site que je voulais créer. Mais comme pour tout nouveau langage de conception, il y a des questions, des défis et des décisions à prendre, en particulier lorsqu'il s'agit des conventions du Web.
L'un des aspects du site qui a été particulièrement difficile à créer était l'effet de "prise de contrôle" lorsque vous cliquez sur une fiche.
Pour que cet effet s'exécute à 60 FPS, il a fallu réfléchir, prototyper et faire quelques compromis intéressants. Lors du Chrome Dev Summit, j'ai parlé de cet effet et expliqué en détail comment je l'avais créé.
Créer une animation hautes performances
Les animations très performantes, du moins aujourd'hui, sont celles qui favorisent le compositeur du navigateur. Si vous parvenez à vous en tenir à la modification des propriétés de transformation et d'opacité, vous obtiendrez généralement d'excellentes performances. L'approche générale que j'ai adoptée pour l'animation de la carte est la suivante :
- Mesurez la position de tous les éléments de la fiche lorsqu'elle est réduite.
- Basculez les classes de la fiche pour la développer (sans animation).
- Remesurez la position des éléments de la fiche maintenant qu'elle est développée.
- Calculez les différences.
- Appliquez des transformations négatives pour ramener les éléments à leur position de départ.
- Activez les animations.
- Supprimez les transformations négatives et regardez les éléments se déplacer vers leur emplacement final à l'écran.
Tout cela peut sembler coûteux, mais il y a une fenêtre de 100 ms à partir du moment où un utilisateur interagit avant que l'animation ne doive commencer. Au-delà, l'utilisateur percevra un délai. Vous pouvez utiliser ce temps pour effectuer des tâches préparatoires coûteuses afin de pouvoir exécuter l'animation elle-même à moindre coût. Il existe également une fenêtre de 50 à 100 ms à la fin pour effectuer des tâches de nettoyage, ce qui peut être utile selon ce que vous essayez de faire.
Le travail coûteux d'animation est effectué au cours de ces 100 premières millisecondes. Sur un Nexus 5, il prend environ 70 ms, il y a donc de la marge.
Obtenir le code
Si vous souhaitez examiner le site plus en détail, vous serez ravi d'apprendre que le code a été publié sur GitHub. N'hésitez pas à y jeter un coup d'œil !