Hay 10 principios que generalmente uso para que las animaciones web se sientan bien, como se ve en sitios como aprilzero.com.
- No cambie ninguna propiedad además de opacidad y transformación. Estos pueden ser acelerados por GPU y serán órdenes de magnitud más eficientes. Tampoco desea rehacer sus cálculos de diseño, por lo que tratar de animar algo como el ancho o los márgenes es un desastre absoluto. Ningún complemento mágico de JavaScript solucionará esto, es solo cómo funcionan el navegador y el DOM. La carga generalmente es proporcional al número de píxeles que cubre un elemento, por lo que animar un elemento pequeño es generalmente fácil, pero modificar algo que cubra toda la pantalla será mucho más intenso.
- Utilice eventos de puntero: ninguno para limpiar elementos ocultos. Originalmente, muchas de las complicaciones con mostrar y ocultar cosas fueron eliminar completamente los elementos al final con una devolución de llamada. Esto te permite ser mucho más vago con la limpieza. Teóricamente, puede dejar elementos absolutamente posicionados en algún lugar y si son opacidad cero y puntos-eventos ninguno, entonces efectivamente no están allí, hasta que necesite recuperarlos.
- No animes todo al mismo tiempo. Por lo general, puede hacer una o dos cosas bastante bien, incluso si son intensivas. Las computadoras son bastante rápidas ahora. Los problemas comienzan cuando intentas hacer 20 cosas diferentes a la vez. Tal vez todos funcionaron bien en la demostración, pero juntos hay demasiada contención de recursos.
- Eso está realmente bien, ya que, en cuanto al diseño, tampoco quieres que todo suceda al mismo tiempo. Usar retrasos leves para escalonar sus animaciones en una página generalmente es una buena idea y puede verse bien con la coreografía correcta. Por lo general, deseará que las cosas fluyan sin problemas, como de izquierda a derecha y de arriba a abajo, o siguiendo algún tipo de jerarquía de información. El uso de retrasos de transición cada vez mayores puede hacer que esto sea fácil de construir.
- Cree configuraciones configurables y luego ajuste todo. Un multiplicador global para la velocidad es probablemente una buena idea. Debe intentar que funcione sin problemas a una velocidad de 1/10, y limpie todo, y luego vuelva a acelerarlo al final. Tener configuraciones para ajustar los tiempos y los retrasos hará que sea más fácil probar un montón de variaciones y encontrar la que se siente bien. Puede haber docenas de variables, y algunas se verán mejor que otras, por lo que es importante centrarse en la correcta.
- Graba videos de tu interfaz de usuario para una valiosa perspectiva en tercera persona. He encontrado que el iPhone es realmente útil para tomar videos rápidos de cosas y luego mirar hacia atrás. En general, verá picos de retraso o partes que no son lo suficientemente buenas como para compartir. Iterar varias veces y luego volver a filmar generalmente puede ayudarlo a descubrir cómo mejorarlo.
- La actividad de la red puede causar mucha carga y ralentizar las cosas. Precargue o demore las solicitudes grandes para que las animaciones puedan ocurrir cuando no están sucediendo muchas otras cosas. En general, esto significa que es posible que desee esperar un segundo mientras la página se está inicializando por primera vez. Cargar toneladas de videos o recursos de imágenes grandes también puede arruinar las cosas, por lo que es posible que desee precargarlos o retrasar su carga hasta que finalice el trabajo de animación principal.
- No se una directamente al desplazamiento u otros eventos que se repiten constantemente. Una de las cosas comunes, causada por la desafortunada tendencia de diseño de desplazamiento de paralaje hace unos años, está desencadenando un montón de cosas en el evento de desplazamiento. Si bien es posible hacerlo con buen gusto, una implementación simple donde el renderizado está directamente relacionado con la distancia de desplazamiento no es una buena idea: no será suave y se desmoronará por completo en dispositivos móviles o casos en los que se optimiza el desplazamiento.
- Pruebe temprano y con frecuencia en dispositivos móviles. Tiene restricciones diferentes y más rigurosas, aunque son posibles animaciones suaves en dispositivos móviles, y en algunos casos más fáciles. Los teléfonos modernos y los navegadores web móviles son muy potentes y tienen excelentes GPU, por lo que no hay excusa para el mal rendimiento en los dispositivos móviles en estos días.
- Probar y usar constantemente varios dispositivos. Cada tipo de computadora puede tener un rendimiento totalmente diferente. Las pantallas de retina pueden crear mucha más carga, ya que hay muchos más píxeles para calcular. Las máquinas que son unos años más antiguas también pueden funcionar de manera diferente. En algunos casos, es posible que desee detectar estas situaciones, a través de consultas de medios u otros métodos, y tratarlas, para que todos tengan una buena experiencia. Una cosa que encuentro útil es cambiar regularmente entre mi MacBook Air de 11 ″ y mi iMac de retina de 27 ″. Representan las computadoras Apple más pequeñas y más grandes, y representan una amplia gama de dispositivos. Invariablemente, después de trabajar en uno habrá optimizaciones necesarias para el otro.
Seguir estas ideas le permitirá tener velocidades de cuadro consistentemente altas. Sin embargo, no existe un atajo para las constantes pruebas y ajustes necesarios para que las cosas se sientan bien.