A fines del año pasado, creé el sitio de Chrome Dev Summit. Quería tener una apariencia de Material Design, ya que es un lenguaje de diseño genial, y sentí que sería una buena opción para el tipo de sitio que quería crear. Pero, como con cualquier lenguaje de diseño nuevo, hay preguntas, desafíos y decisiones que tomar, y especialmente así cuando se trata de las convenciones de la Web.
Un aspecto del sitio que fue particularmente difícil de crear fue el efecto de "apropiación" cuando haces clic en una tarjeta.
Lograr que un efecto como este se ejecute a 60 fps requirió pensar, crear prototipos y hacer algunas concesiones interesantes. En la Cumbre de desarrolladores de Chrome, hablé sobre este efecto y expliqué con detalles sangrientos cómo profundicé en su creación.
Cómo compilar una animación de alto rendimiento
Las animaciones de alto rendimiento, al menos en la actualidad, son aquellas que favorecen el compositor del navegador. Si logras limitarte a los cambios de las propiedades de transformación y opacidad, normalmente obtendrás un rendimiento excelente. El enfoque general que adopté para la animación de tarjetas permite hacer justamente 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 está expandida.
- Calcula las diferencias.
- Aplica transformaciones negativas para mover los elementos de vuelta a las posiciones de inicio.
- Activa las animaciones.
- Quita las transformaciones negativas y observa cómo los elementos se mueven 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 debe comenzar la animación. Si supera esta cantidad, el usuario percibirá una demora. Puedes usar este tiempo para realizar trabajos preparatorios costosos, de modo que puedas ejecutar el contenido de manera más económica durante la animación. También hay una ventana al final de unos 50-100 ms para ordenar el trabajo, lo que puede ser práctico dependiendo de lo que estés intentando hacer.
El trabajo costoso para hacer la animación se realiza dentro de los primeros 100 ms y, en un Nexus 5, el trabajo requiere algo de alrededor de 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 complacerá escuchar que se lanzó el código en GitHub, así que revísalo.