A fines del año pasado, desarrollé el sitio de la Chrome Dev Summit. Quería que tuviera una apariencia de Material Design, ya que es un lenguaje de diseño genial, y sentía que sería una excelente opción para el tipo de sitio que quería crear. Pero, al igual que con cualquier lenguaje de diseño nuevo, hay preguntas, desafíos y decisiones que tomar, en especial, cuando se trata de las convenciones de la Web.
Un aspecto del sitio que fue particularmente difícil de crear fue el efecto "efectuado en el mercado" al hacer clic en una tarjeta.
Para lograr que un efecto como este se ejecute a 60 fps, se necesitaron pensar, crear prototipos y algunas concesiones interesantes. En Chrome Dev Summit, hablé sobre este efecto y expliqué con sangriento detalle cómo lo hice.
Cómo compilar una animación de alto rendimiento
Las animaciones de alto rendimiento, al menos hoy en día, son aquellas que favorecen el compositor del navegador. Si logras limitarte a los cambios de las propiedades de transform y opacidad, por lo general, verás un rendimiento excelente. El enfoque general que adopté para la animación con tarjetas permite precisamente eso:
- Mide la posición de todos los elementos en la tarjeta cuando esta se contrae.
- Activa o desactiva las clases de la tarjeta para expandirla (sin animarla).
- Vuelve a medir la posición de los elementos en la tarjeta ahora que esta se expande.
- Calcula las diferencias.
- Aplica transformaciones negativas para mover los elementos de vuelta a las posiciones iniciales.
- Activa las animaciones.
- Quita las transformaciones negativas y observa cómo los elementos llegan a su ubicación final en la pantalla.
Todo esto puede sonar costoso, pero hay una ventana de 100 ms desde el momento en que un usuario interactúa antes de que deba comenzar la animación. Si superan esto, el usuario percibirá un retraso. Puedes usar este tiempo para realizar trabajos preparatorios costosos, de modo que puedas ejecutar el proceso de forma más económica durante la animación. También hay una ventana al final de unos 50 a 100 ms para ordenar el trabajo, lo que puede ser útil según lo que intentes hacer.
El costoso trabajo para hacer la animación se realiza dentro de esos primeros 100 ms y, en un Nexus 5, el trabajo tarda alrededor de los 70 ms, por lo que hay espacio de sobra.
Obtén el código
Si te interesa revisar el sitio con más detalle, te alegrará saber que se lanzó el código en GitHub. ¡Revísalo!