A fines del año pasado, creé el sitio de la Chrome Dev Summit. Quería que tuviera el aspecto de Material Design, ya que es un excelente lenguaje de diseño y sentí que sería una gran opción para el tipo de sitio que quería crear. Sin embargo, como con cualquier lenguaje de diseño nuevo, hay preguntas, desafíos y decisiones que tomar, especialmente cuando se trata de las convenciones de la Web.
Un aspecto del sitio que fue particularmente difícil de crear fue el efecto de “apoderamiento” cuando haces clic en una tarjeta.
Lograr que un efecto como este se ejecute a 60 FPS requirió algo de reflexión, creación de prototipos y algunas concesiones interesantes. En Chrome Dev Summit, hablé sobre este efecto y expliqué con todo detalle cómo lo creé.
Cómo crear una animación de alto rendimiento
Las animaciones de alto rendimiento, al menos hoy en día, son aquellas que favorecen al compositor del navegador. Si puedes mantenerte en las propiedades de transformación y opacidad cambiantes, por lo general, verás un gran rendimiento. El enfoque general que adopté para la animación de la tarjeta hace exactamente eso:
- Mide la posición de todos los elementos de la tarjeta cuando está contraída.
- Alterna las clases de la tarjeta para expandirla (sin animación).
- Vuelve a medir la posición de los elementos de la tarjeta ahora que está expandida.
- Calcula las diferencias.
- Aplica transformaciones negativas para volver a colocar los elementos en las posiciones iniciales.
- Activa las animaciones.
- Quita las transformaciones negativas y observa cómo los elementos se desplazan rápidamente a sus ubicaciones finales en la pantalla.
Todo esto puede sonar costoso, pero hay un período de 100 ms desde el momento en que un usuario interactúa hasta que debe comenzar la animación. Si es más, el usuario percibirá una demora. Puedes usar este tiempo para realizar un trabajo preparatorio costoso, de modo que puedas ejecutarlo de forma más económica durante la animación. También hay una ventana al final de entre 50 y 100 ms para realizar trabajos de limpieza, lo que puede ser útil según lo que intentes hacer.
El trabajo costoso para hacer la animación se realiza en esos primeros 100 ms y, en un Nexus 5, el trabajo lleva alrededor de 70 ms, por lo que hay espacio de sobra.
Obtén el código
Si te interesa ver el sitio con más detalle, te complacerá saber que el código se lanzó en GitHub, así que ve y échale un vistazo.