À la fin de l'année dernière, j'ai créé le site du Chrome Dev Summit. Je voulais qu'il ait une apparence Material Design, car c'est un langage de conception fantastique, 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 de traiter les conventions du Web.
Un aspect du site qui était particulièrement difficile à créer était l'effet de « prise de contrôle » lorsque vous cliquez sur une fiche.
Pour obtenir un tel effet à 60 ips, il a fallu réfléchir, créer un prototypage 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'ai créé.
Créer une animation hautes performances
Aujourd'hui du moins, les animations hautes performances sont celles qui favorisent le compositeur du navigateur. Si vous parvenez à modifier les propriétés de transformation et d'opacité, vous constaterez généralement d'excellents résultats. L'approche générale que j'ai adoptée pour l'animation des fiches permet justement de:
- Mesurez la position de tous les éléments de la fiche lorsqu'elle est réduite.
- Activer/Désactiver les classes de la fiche pour la développer (sans l'animer).
- Maintenant que la fiche est développée, mesurez à nouveau la position des éléments.
- Calculez les différences.
- Appliquez des transformations négatives pour remettre les éléments à leur position de départ.
- Activez les animations.
- Supprimez les transformations négatives et observez les éléments s'évanouir jusqu'à leur emplacement final à l'écran.
Tout cela peut sembler coûteux, mais il s'écoule une fenêtre de 100 ms à partir du moment où l'utilisateur interagit avant que l'animation ne doive commencer. Au-delà, l'utilisateur perçoit un délai. Vous pouvez utiliser ce temps pour effectuer des tâches préparatoires coûteuses afin de pouvoir exécuter l'animation à un coût moindre. Une fenêtre s'affiche au bout de 50 à 100 ms pour effectuer le rangement, ce qui peut s'avérer utile selon ce que vous essayez de faire.
Le travail coûteux pour l'animation est effectué dans les 100 premières millisecondes et, sur un Nexus 5, il prend environ 70 ms. Il y a donc de la place.
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, alors n'hésitez pas à le consulter !