Hacer la transición de After Effects a transiciones y fotogramas clave CSS

Los sitios web se parecen cada vez más a las aplicaciones móviles. Los usuarios también esperan cada vez más una experiencia más parecida a una aplicación. Desde las notificaciones automáticas hasta el modo fuera de línea, las aplicaciones web nativas están llegando.

Una vez que las aplicaciones web funcionen como aplicaciones nativas, las interacciones de diseño también cambiarán para abordar el caso de uso, es decir, la ubicuidad de las animaciones. Las animaciones impulsan las interacciones en todas nuestras aplicaciones favoritas, desde Uber a Lyft y Snapchat a Instagram.

Como desarrolladores web, necesitamos una buena base para crear animaciones que sean eficaces y fáciles de mantener, lo cual es fundamental para el panorama de las aplicaciones web nativas. Necesitamos poder pasar de After Effects a transiciones, animaciones y fotogramas clave de CSS.

¿Qué es After Effects?

After Effects es un producto estándar de la industria de Adobe utilizado por diseñadores gráficos y de movimiento para crear claves, componer y rastrear animaciones. Es la herramienta de facto utilizada por muchos diseñadores para comunicar ideas a un equipo exportando las capas de animación a un video de muestra fácil de visualizar, con una tabla de referencia de los tiempos de inicio y finalización de la animación para acompañarlo.

Juntos, el video de demostración y la tabla de referencia brindan al equipo de desarrollo una buena línea de base sobre cómo implementar la animación. El video se usa para ver la imagen general, mientras que la tabla de referencia proporciona los detalles minuciosos que hacen o deshacen la interacción de la animación.

Cosas que podemos hacer con After Effects

Lo que podemos crear con After Effects está limitado únicamente por nuestra imaginación. Puede proporcionar un sinfín de efectos de postproducción para una imagen o video. En el ámbito de la web, proporciona una plataforma para compartir ideas.

Considere la bola roja de arriba. La pelota se anima usando After Effects para rodar lentamente hacia el centro, hacer una pausa por un segundo y luego acelerar lentamente para salir de la ventana gráfica. Las animaciones web clásicas de movimiento, escalado, rotación e incluso cambio de color se realizan fácilmente en After Effects y sirven como un documento de requisitos (o video o GIF) generado instantáneamente para implementar las animaciones.

Herramientas que necesita para comenzar

Con JavaScript, HTML5, CSS3 y muchos otros lenguajes convirtiéndose en estándar en la mayoría de los principales agentes de usuario de los que un sitio web recibe tráfico, el uso de estas herramientas al por mayor es cada vez más factible. A continuación se presentan algunas tecnologías clave a tener en cuenta al implementar animaciones.

Transiciones CSS

Las transiciones CSS proporcionan una forma de controlar la rapidez con la que se aplica un cambio en la propiedad CSS a un elemento. En lugar de aplicar un estilo inmediatamente (sin transiciones), podría aplicarse gradualmente sobre una curva de aceleración definida mediante reglas de personalización. Un ejemplo sería cambiar un color de fondo de negro a blanco durante un período de tiempo.

 transition-property: background-color; transition-duration: 3s;

Con esta regla sobre el elemento, el color de fondo tardaría tres segundos en cambiar, cambiando gradualmente de negro a blanco, pasando por tonalidades de gris. Esto se puede personalizar aún más agregando la función de tiempo de transición, para calcular valores intermedios, y el retraso de transición, para retrasar el inicio de la animación.

Las transiciones CSS son buenas para interacciones simples , como cambiar el color de fondo o mover un elemento a una nueva ubicación.

Uso de animaciones CSS

Las animaciones CSS brindan un control aún más preciso sobre los pasos intermedios entre una animación, utilizando puntos de ruta. Los waypoints (o fotogramas clave) son puntos fijos en el tiempo, durante la animación, cuando aplicamos ciertos estilos a un elemento. Luego usamos los fotogramas clave definidos para diseñar cómo debería verse la animación.

Supongamos que queremos un elemento para animar como un rebote. El elemento debe moverse hacia arriba, volver a la posición original, volver a subir un poco y luego volver a la posición original. Usando fotogramas clave, podemos dividir ese efecto elástico en porcentajes de tiempo que tomará la animación.

 @keyframes bounce { 0%, 20%, 50%, 80%, 100% { transform: translateY(0); } 40% { transform: translateY(-25px); } 60% { transform: translateY(-15px); } } .element { animation-name: bounce; animation-duration: 3s; }

Al igual que con las transiciones CSS, hay muchas opciones para que los desarrolladores las configuren. Podemos hacer que las animaciones se repitan indefinidamente usando animation-iteration-count , con el valor infinite , o incluso controlar la dirección en la que fluye la animación, usando la propiedad animation-direction . Muchas propiedades de animación CSS nos brindan un control detallado para hacer coincidir una animación con el diseño.

Las animaciones CSS son útiles para animaciones repetitivas breves , como expansión, rotación y rebotes.

Usando JavaScript

JavaScript tiene una multitud de usos, desde servidores Raspberry Pi hasta código del lado del cliente, pero uno de sus usos principales sigue siendo cambiar los nombres de las clases en los elementos. Cambiar el nombre de una clase es una forma trivial pero efectiva de administrar el estado de un elemento.

Un ejemplo es la simple adición de una clase active que señala un componente inicialmente oculto para comenzar a animar. Considere la pelota de abajo. Usamos JavaScript para agregar una clase que activa la animación usando las propiedades de transición de CSS.

La primera parte de esta animación se puede replicar usando una combinación simple de HTML, CSS y JavaScript.

HTML:

 <div class="ball"></div>

CSS:

 .ball { width: 100px; height: 100px; color: red; transform: scale(0.25); transition: all 1s ease-in; } .ball.active { transform: scale(1.25); }

JavaScript:

 setTimeout(function() { document.querySelector('.ball').addClass('active'); }, 500);

Cuando expira el tiempo de espera (de 500ms ), se agrega una clase de active a ball div , lo que cambia la propiedad de transform , que luego activa la propiedad de transition , que observa la propiedad de transform en el elemento de bola. Cambiar las clases de CSS usando JavaScript no solo nos ayuda a administrar el estado de un componente, sino que también nos brinda un mayor control sobre las animaciones más allá de las animaciones y transiciones de CSS.

El control de animaciones mediante JavaScript es beneficioso para administrar el estado , para desencadenar eventos en función de factores dinámicos, como la entrada del usuario o el estado de la aplicación.

De la idea a After Effects a CSS y JavaScript

Imagina que tuviéramos una tarea en la que tuviéramos que animar un elemento en la página. Hagamos de este elemento una bola roja. La bola tendría que girar alrededor de la página, así como escalar hacia arriba y hacia abajo.

After Effects nos permite crear maquetas de cómo se vería la interacción cuando se activa la animación. La pelota en movimiento a continuación es un ejemplo de eso. Observe cómo la bola roja primero se escala ligeramente, luego comienza a acelerar alrededor de un bucle circular y desacelera de nuevo a su posición original. Solo entonces la bola se reduce a su tamaño original.

Considere el cambio en la escala por encima de donde la pelota crece o se encoge antes de moverse o detenerse. Esta es una característica pequeña que el diseñador ha creado en After Effects y debe comunicarse claramente al desarrollador para que no se pierdan los detalles más pequeños.

Es por eso que sería necesario realizar cierta preparación antes de pasar de After Effects al desarrollador. No podíamos simplemente crear un archivo de video de la animación en acción, compartirlo con el desarrollador y dar por terminado el día.

Una forma de transmitir nuestras ideas con claridad es crear una hoja de cálculo que detalle los pasos necesarios para la animación. Según la complejidad de la animación, pueden ser simples garabatos en un ticket, un archivo de texto que contiene una lista o una hoja de cálculo completa.

Otra forma de transmitir información sobre la animación es incrustarla en el propio vídeo . Puede hacer esto directamente en After Effects, agregando información crucial, como cuánto escalar, la cantidad de pasos y otra información a medida que sucede, para darle contexto al implementador. Esto nos permite usar el video de demostración como una fuente universal de verdad .

Este archivo de video exportado de After Effects actúa como una forma de contrato entre el diseñador y el desarrollador. Con un entendimiento común establecido, podemos usar las herramientas discutidas para implementarlo, es decir, clases de CSS, eventos de JavaScript, transiciones de CSS, animaciones de CSS y animaciones de JavaScript.

1. Desglose de la animación

Busque patrones y observe los tiempos.

Lo primero que hay que hacer es dibujar la línea de tiempo de las animaciones para cada uno de los elementos (o grupo de elementos). Necesitamos entender dónde se cruzan las animaciones para sincronizar el tiempo y el ciclo de vida de la animación a su alrededor. La planificación es clave para una animación compleja, de modo que podamos construir gradualmente nuestra solución de manera que se pueda mantener para los requisitos futuros.

A partir de la información anterior, la desglosamos en los siguientes pasos:

1. Inicialice el componente y espere un disparador.
2. Una vez activado, aumente el tamaño y expanda la sombra paralela.
3. Después de eso, muévase en un círculo con ease-in-out .
4. Luego, reduzca el tamaño y disminuya la sombra paralela.

El beneficio de delinear es que entendemos qué componentes deben vivir fuera de los elementos de animación; por ejemplo, la sombra paralela debe ser independiente de la pelota. Similar a esbozar un ensayo, desglosar la animación organiza nuestros pensamientos sobre el trabajo que tenemos que hacer. Los esquemas demuestran el proceso de pensamiento detrás de una animación y sirven doblemente como documentación para nuestro trabajo.

2. Negociar con las partes interesadas

¿Podemos simplificar algunas áreas? ¿Qué partes de la animación son imprescindibles? ¿Podemos sincronizar tiempos?

Una vez que hemos investigado el trabajo necesario para realizar la tarea, negociamos. Negociar con el diseñador y el propietario del producto es responsabilidad de cada desarrollador. El implementador tiene una comprensión completa de la fruta clave al alcance de la mano, lo que se puede hacer y lo que no es práctico hacer.

La animación es complicada porque eliminar detalles aparentemente minuciosos de una animación podría cambiar la experiencia del usuario. Para dar un ejemplo basado en el desarrollo, cambiar el comportamiento de una animación es similar a cambiar la carga de respuesta que podríamos recibir de una llamada a la API: Ciertas cosas podrían cambiarse, pero algunas partes deben estar ahí.

Esta es una situación caso por caso, basada en nuestra relación con el diseñador, así como con el propietario del producto dado el cronograma para el lanzamiento. No se recomienda solicitar que se eliminen ciertas animaciones porque esto estaría más allá de nuestra área de especialización.

Un buen enfoque para la negociación sería sincronizar los tiempos o simplificar las animaciones que el navegador podría no ser capaz de hacer de forma nativa y evitar las animaciones que usan JavaScript porque serían difíciles de mantener y podrían resultar en un rendimiento irregular. En su lugar, podemos y debemos pedir estas concesiones.

3. Planifica el ataque

Sepa cuál debe ser el estado inicial y final de cada elemento. Mire dónde se supone que debe ocurrir cada tiempo de transición. Aproveche BEM en las clases de CSS para aplicar animaciones con claridad. Comprenda las razones por las que JavaScript debe limitarse a favor de CSS.

Examinemos la animación descrita anteriormente. Cinco estados saltan a la vista:

1. el estado inicial, con la bola roja y algo de sombra;
2. la versión ampliada de la pelota con una sombra paralela más larga;
3. el movimiento de la pelota alrededor de un círculo;
4. reducción de escala de la bola, junto con su sombra paralela;
5. el retorno al estado inicial, a la espera de ser desencadenado.

Para los cinco estados, debemos ver cuál es el estilo antes y cuál debería ser después. Esto nos proporcionará información sobre qué tipo de herramientas de animación necesitaríamos para implementarlo.

Para hacer esto, comenzamos con el estilo del caso base. Esto puede ser nada, si el elemento aparece de la nada, o puede ser el estilo anterior, en el caso de animaciones encadenadas.

Manténgalo simple al tener muy pocos cambios en los estilos entre estados. Una vez que hayamos identificado los estados inicial y final, debemos etiquetarlos como clases CSS, para que puedan aplicarse fácilmente al elemento. Esto nos brinda la flexibilidad de usar JavaScript para manejar la aplicación de clases en función de los datos recibidos de las llamadas AJAX de las que podría depender el elemento.

BEM CSS es ideal para nuestra estrategia de nomenclatura debido a cómo representaríamos los estados de nuestras animaciones en progreso con modificadores. Si la animación es lo suficientemente genérica, BEM también es una buena metodología para mantener clases CSS DRY ("no te repitas") que funcionan en todas las bases de código. Comenzaríamos solo con los marcadores de bloque y elemento y luego agregaríamos modificadores a medida que avanzamos en la animación.

Aquí hay un viaje de clase de plantilla de muestra:

 // State 1 <div class="ball"></div> // State 2 <div class="ball ball--scale-up"></div> // State 3 <div class="ball ball--scale-up ball--circling"></div> // State 4 <div class="ball ball--scale-up ball--circling ball--scale-down"></div> // State 5 <div class="ball"></div>

Comenzamos con el elemento contenedor con la bola de clase, que representaría la bola roja que estamos animando. A medida que la animación itera a lo largo de la experiencia, también lo hacen nuestros nombres de clase BEM , desde escalar hasta moverse en círculo. Este es un método para realizar un seguimiento de cómo se supone que debe verse el elemento cuando se aplican los estilos.

4. Implementación constante

Con un esquema a la mano y las herramientas listas para usar, debemos desmenuzar el proyecto estado por estado.

Podemos abordar iterativamente cada estado como un elemento separado, construyendo sobre el estado anterior según sea necesario. Con cada estado claramente definido, podemos centrarnos más en hacer que nuestro código sea SECO y fácil de leer, en lugar de en los detalles de implementación. Y, por supuesto, sería bueno agregar pruebas para cubrir nuestra lógica.

Estado inicial

Comenzamos con una simple bola roja, con una ligera sombra.

 .ball { background-color: #D24D57; width: 25px; height: 25px; margin: 5px; display: inline-block; border-radius: 50%; box-shadow: 0 8px 6px -6px #6C7A89; }

Ampliar

Hay dos partes para aumentar la escala: el tamaño del elemento y su sombra paralela. Usamos un fotograma clave, llamado scale , que comparten tanto el escalado hacia arriba como hacia abajo para DRY-ness para manejar esta animación.

 @keyframes ball-scale { from { transform: scale(1); box-shadow: 0 8px 6px -6px #6C7A89; } to { transform: scale(1.25); box-shadow: 0 10px 6px -6px #6C7A89; } } .ball--scale-up { animation: ball-scale 1s ease-out forwards; }

Círculos (después de aplicar la animación de aumento de escala)

Usamos un fotograma clave, llamado circular , y movemos su propiedad transform-origin para mover el elemento en un círculo, comenzando desde el principio. Tenga en cuenta que los círculos solo ocurren cuando se completa la animación de ampliación.

 @keyframes ball-circular { from { box-shadow: 0 10px 6px -6px #6C7A89; transform-origin: 50% -450%; transform: scale(1.25) rotate(0deg) translateY(-100%) rotate(0deg); } to { box-shadow: 0 10px 6px -6px #6C7A89; transform-origin: 50% -450%; transform: scale(1.25) rotate(360deg) translateY(-100%) rotate(-360deg); } } .ball--circling { animation: ball-circular 2s ease-in-out forwards; }

Reducción de escala (después de aplicar animaciones circulares y de aumento de escala)

Para reducir la escala, reutilizamos la escala de fotogramas clave, con animation-direction: reverse para hacer lo contrario de lo que hace la clase de escalado ascendente. Esto nos devuelve a nuestro estado original.

 .ball--scale-down { animation: ball-scale 1s ease-in forwards; animation-direction: reverse; }

Demostración de trabajo

Si combinamos todas estas clases en una secuencia, tendríamos una representación CSS del renderizado realizado en After Effects.

Haz clic en la pelota para comenzar.

Vea la bola que anima la pluma de Chris Ng (@chrisrng) en CodePen.

Conclusión

Las herramientas cubiertas en este artículo no son de última generación, pero generalmente son compatibles con la mayoría de los principales navegadores, lo que las hace útiles en la actualidad.

Anteriormente, implementar animaciones era difícil porque significaba usar herramientas externas como jQuery Animate para hacer cosas simples como mover elementos en la página. Hoy en día, las transiciones y animaciones CSS se pueden realizar de forma nativa y eficiente, aprovechando la GPU.

Las animaciones siempre son un tira y afloja entre el desarrollador, el diseñador y el propietario del producto. El truco consiste en encontrar el término medio, donde todas las partes interesadas estén satisfechas con la calidad del producto. Con suerte, esta guía lo ayudará a hacer esa transición.