À la fin de l'année dernière, j'ai créé le site du Sommet des développeurs Chrome. Je voulais qu'il ait une apparence Material Design, car c'est un super langage de conception, et j'ai pensé qu'il serait parfaitement adapté 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 lorsque vous traitez 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 cliquiez sur une fiche.
Pour qu'un tel effet s'exécute à 60 FPS, il a fallu réfléchir, créer un prototypage et faire quelques compromis intéressants. Lors du Sommet des développeurs Chrome, j'ai parlé de cet effet et expliqué en détail comment j'ai commencé à le créer.
Créer une animation hautes performances
Aujourd'hui, du moins, les animations hautes performances favorisent le compositeur du navigateur. Si vous parvenez à modifier les propriétés de transformation et d'opacité, vous constaterez généralement d'excellentes performances. C'est exactement ce que j'ai adopté pour l'animation des fiches:
- Mesurez la position de tous les éléments de la fiche lorsqu'elle est réduite.
- Activez ou désactivez les classes de la fiche pour la développer (sans l'animer).
- Mesurez à nouveau la position des éléments de la fiche maintenant que celle-ci est développée.
- 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 regardez les éléments s'allumer jusqu'à leur emplacement final à l'écran.
Tout cela peut sembler coûteux, mais il existe une fenêtre de 100 ms à partir du moment où l'utilisateur interagit avant que l'animation ne doive démarrer. Au-delà, l'utilisateur perçoit un retard. Vous pouvez utiliser ce temps pour effectuer un travail préparatoire coûteux afin de pouvoir s'exécuter à moindre coût pendant l'animation elle-même. Une fenêtre s'affiche également après 50 à 100 ms pour faire du ménage, ce qui peut s'avérer utile selon ce que vous essayez de faire.
Le travail fastidieux lié à l'animation est effectué dans les 100 premières millisecondes et, sur un Nexus 5, il prend environ 70 ms. Vous avez 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. N'hésitez pas à le consulter !