Solía ser que los diseñadores diseñaban y los codificadores codificaban. No hubo cruce, y así fue. Pero con la llegada de las transiciones y animaciones CSS, esas líneas se están difuminando un poco. Ya no es tan simple como el diseñador dicta el diseño y el codificador transcribe; los diseñadores ahora deben saber algo sobre código y los codificadores deben saber algo sobre diseño para poder colaborar de manera eficaz.
Como ejemplo, digamos que un diseñador le pide a un desarrollador que haga rebotar una caja. Eso es todo, sin instrucciones adicionales. Sin un conocimiento cruzado y un vocabulario común, ambos lados están un poco perdidos en esta comunicación: el desarrollador no tiene suficiente información para realizar completamente la visión del diseñador, pero el diseñador realmente no sabe cuáles son las opciones y cómo hacerlo. comunicarlos. Con una interpretación muy básica, podrías terminar con algo parecido a esto:
Vea el cuadro de rebote de bolígrafo 1 de Brandon Gregory (@pulpexploder) en CodePen.
No es muy emocionante. Aunque, para ser justos, esto cumple con todos los criterios dados. Sin embargo, definitivamente podemos hacerlo mejor que esto.
Lo primero que hay que tener en cuenta es la función de sincronización. En el ejemplo anterior, estamos usando una función de tiempo lineal, lo que significa que la caja se mueve constantemente a la misma velocidad. En algunos casos, esto es deseable; sin embargo, en el mundo real, el movimiento no suele funcionar así.
Una solución fácil es simplemente cambiar la función de sincronización para facilitar. Esto hace que el comienzo y el final de cada animación sea un poco más lento que la parte media, lo que agrega un aspecto más natural a algunas animaciones. Aquí está el cuadro con la función de aceleración activada:
Vea Pen Bouncing Box 2 de Brandon Gregory (@pulpexploder) en CodePen.
Se trata de una ligera mejora, pero aún queda mucho trabajo por hacer. La caja todavía se ve mecánica y rígida, con la misma animación ocurriendo en el mismo período de tiempo una y otra vez. Agregar un ligero retraso entre los rebotes agrega un contraste visual que parece un poco más natural:
Vea Pen Bouncing Box 3 de Brandon Gregory (@pulpexploder) en CodePen.
Ahora parece que la caja está saltando en lugar de simplemente moverse hacia arriba y hacia abajo. Hay un poco de cuerda y enfriamiento entre saltos que imita lo que podría hacer una criatura viva si se le diera la misma instrucción. Aunque no tenemos ninguna referencia de cómo se vería una caja de salto, todos tenemos una idea bastante clara de cómo se vería una criatura que salta. Porque sabemos lo que sucedería en la naturaleza, al imitar eso, la animación se siente más natural. Pero podemos hacer más para que esa cuerda se sienta un poco más pesada.
Si miras dibujos animados, notarás que los movimientos naturales a menudo son exagerados, creando una caricatura de la vida real. Cuando se hace bien, esto puede parecer tan natural como algo en el mundo real, con la ventaja adicional de infundir un poco de encanto y carácter en la animación.
En esta etapa, la colaboración entre el diseñador y el desarrollador es crucial, pero es posible que muchos diseñadores ni siquiera sepan que existen estas opciones. Es posible que el desarrollador deba presentar esta posibilidad al diseñador.
Al agregar una distorsión sutil a la escala del cuadro, podemos agregar mucho a la animación:
Vea el Pen Bouncing Box 4 de Brandon Gregory (@pulpexploder) en CodePen.
Ahora, la caja tiene carácter. Se siente vivo. Hay muchas cosas que modificar, pero esto ya se está moviendo mucho más allá de la instrucción original, ¡de una muy buena manera!
Vamos a dar un paso más y agregar un pequeño rebote al final del salto:
Vea Pen Bouncing Box 5 de Brandon Gregory (@pulpexploder) en CodePen.
El segundo rebote hace que esto se sienta más vivo, pero algo todavía parece estar fuera de lugar. El rebote parece rígido en comparación con el resto de la animación. Necesitamos agregar otro poco de distorsión como hicimos para la cuerda:
Vea el Pen Bouncing Box 6 de Brandon Gregory (@pulpexploder) en CodePen.
Esa sutil distorsión al final hace que el rebote parezca mucho más natural. En general, una gran mejora con respecto a nuestro rebote lineal básico en el primer ejemplo.
Eso puede ser exactamente lo que estamos buscando, pero se pueden hacer más ajustes en la velocidad de movimiento con una curva de Bézier cúbica personalizada:
Vea el Pen Bouncing Box 7 de Brandon Gregory (@pulpexploder) en CodePen.
Sin que tanto el diseñador como el desarrollador conozcan los principios y controles básicos de la animación, este nivel de personalización es imposible. Realmente, este artículo solo rasca la superficie de ambos campos. Si es diseñador web o desarrollador web que trabaja con diseñadores, le recomiendo encarecidamente que lea sobre ambos.
Para los principios de la animación, The Illusion of Life: Disney Animation de Ollie Johnston y Frank Thomas es un gran manual sobre cómo hacer que esa caricatura de la vida real parezca viva y real. Con ese lenguaje común en su lugar, la comunicación y la colaboración entre diseñadores y desarrolladores se vuelve mucho más fácil.
Para los controles técnicos y las variaciones de la animación CSS, las posibilidades son casi infinitas. La demora y el tiempo son fáciles de ajustar. Como se mencionó, si no le gusta la función de temporización fácil lista para usar, es muy posible crear la suya propia usando un cubic-bezier(). También puede ajustar el nivel de distorsión que desea para acercar o alejar la animación de la realidad. Lo importante es que tanto el diseñador como el desarrollador están pensando en estas variaciones en lugar de tomar todo a ciegas sin personalización. El conocimiento y la colaboración compartidos pueden convertir incluso animaciones sencillas en fantásticas.
Más recursos
- 12 principios básicos de la animación: publicación de Wikipedia que describe los conceptos introducidos en The Illusion of Life.
- The Guide to CSS Animation: Principles and Examples – Artículo de Smashing Magazine que proporciona una guía completa de animaciones CSS.
- Animación en sistemas de diseño: artículo de 24 formas de Sarah Drasner
- Propiedad de animación: entrada de almanaque Programar Plusque cubre la propiedad y sus valores
- Propiedad de transición: entrada de almanaque Programar Plusque cubre la propiedad y sus valores
- CubicBezier.com – Recurso para crear curvas de animación personalizadas con una interfaz de usuario.