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

 

 

 

  • ¡Registro!
  • SmashingConf Friburgo 2024

  • Índice
    1. ¿Qué es After Effects?
      1. Cosas que podemos hacer con After Effects
    2. Herramientas que necesita para comenzar
      1. Transiciones CSS
      2. Usando animaciones CSS
      3. Usando JavaScript
    3. De la idea a After Effects, a CSS y JavaScript
      1. 1. Desglosa la animación
      2. 2. Negociar con las partes interesadas
      3. 3. Planifica el ataque
      4. 4. Implementación constante
    4. Conclusión
      1. Otras lecturas

    Una vez que las aplicaciones web funcionen como aplicaciones nativas, las interacciones de diseño también cambiarían para abordar el caso de uso, es decir, la ubicuidad de las animaciones. Como desarrolladores web, necesitamos una buena base para crear animaciones que sean eficientes y fáciles de mantener, lo cual es fundamental para el panorama de las aplicaciones web nativas. En este artículo, Christopher Ng le mostrará cómo pasar de After Effects a transiciones, animaciones y fotogramas clave de CSS.

     

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

    Una vez que las aplicaciones web funcionen como aplicaciones nativas, las interacciones de diseño también cambiarían 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 hasta Lyft y desde Snapchat hasta Instagram.

    Técnicas prácticas para diseñar animación.

    ¿Qué sucede cuando se ha activado un botón? ¿El usuario tiene que esperar sin saber si el formulario funcionó? Un botón con un cargador podría mantener al espectador interesado mientras los datos se cargan en segundo plano.Leer un artículo relacionado →

     

    Como desarrolladores web, necesitamos una buena base para crear animaciones que sean eficientes 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 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 realizar un seguimiento de animaciones. Es la herramienta de facto utilizada por muchos diseñadores para comunicar ideas a un equipo exportando las capas de animación en 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 que lo acompaña.

    Juntos, el vídeo de demostración y la tabla de referencia brindan al equipo de desarrollo una buena base sobre cómo implementar la animación. El vídeo se utiliza 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 una cantidad infinita de efectos de posproducción para una imagen o vídeo. 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, escala, 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 las animaciones que se implementarán.

    Herramientas que necesita para comenzar

    Dado que JavaScript, HTML5, CSS3 y muchos otros lenguajes se están convirtiendo en estándar en la mayoría de los principales agentes de usuario desde 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), se podría aplicar gradualmente sobre una curva de aceleración definida utilizando reglas de personalización. Un ejemplo sería cambiar el 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, pasando gradualmente de negro a blanco, pasando por tonalidades de grises. Esto se puede personalizar aún más agregando la función de sincronización 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.

    Usando animaciones CSS

    Las animaciones CSS proporcionan un control aún más preciso sobre los pasos intermedios entre una animación, utilizando puntos de referencia. Los waypoints (o fotogramas clave) son puntos fijados 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 que un elemento se anime como un rebote. El elemento debe subir, volver a la posición original, retroceder un poco y luego volver a la posición original. Usando fotogramas clave, podemos descomponer 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 que los desarrolladores pueden configurar. 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 cortas que se repiten , como expansión, rotación y rebotes.

    Usando JavaScript

    JavaScript tiene 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 clases de los elementos. Cambiar el nombre de una clase es una forma trivial pero eficaz de gestionar el estado de un elemento.

    Un ejemplo es la simple adición de una activeclase que indica a un componente inicialmente oculto que comience a animarse. Considere la pelota de abajo. Usamos JavaScript para agregar una clase que activa la animación usando propiedades de transición CSS.

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

    HTML:

    div/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 activea la bola div, que cambia la transformpropiedad, que luego activa la transitionpropiedad, que vigila la transformpropiedad en el elemento 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 .

     

    Controlar animaciones usando JavaScript es beneficioso para administrar el estado , para activar eventos basados ​​en 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

    Imaginemos que tuviéramos una tarea en la que tuviéramos que animar un elemento de 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 active la animación. La pelota en movimiento a continuación es un ejemplo de ello. Observe cómo la bola roja primero aumenta ligeramente de escala, luego comienza a acelerar alrededor de un bucle circular y desacelera nuevamente a su posición original. Sólo entonces la bola se reduce a su tamaño original.

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

    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 vídeo 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. Dependiendo de la complejidad de la animación, podrían ser simples garabatos en un ticket, un archivo de texto que contiene una lista o una hoja de cálculo completa. Cambiar bañera por plato de ducha | Mamparas - Bricoducha

    Paso Animación Tiempo Detalles
    1 La pelota crece 1 segundo Escala 1,25 con sombra.
    2 La pelota se mueve en círculo. 2 segundos Escala 1,25 con un radio de 25 píxeles.
    3 La bola se reduce 1 segundo Regresar a 1

    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 brindar contexto al implementador. Esto nos permite utilizar el vídeo de demostración como fuente universal de verdad .

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

     

    1. Desglosa la animación

    Busque patrones y observe los tiempos.

    Lo primero que debemos hacer es dibujar la línea de tiempo de las animaciones de cada uno de los elementos (o grupo de elementos). Necesitamos comprender 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 incrementalmente nuestra solución de manera mantenible para 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évete en 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 animados; por ejemplo, la sombra paralela debe ser independiente de la bola. De manera 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 los 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 los aspectos clave más inmediatos, lo que se puede hacer y lo que no es práctico.

    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 útil de respuesta que podríamos recibir de una llamada 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, teniendo en cuenta el cronograma de lanzamiento. No se recomienda solicitar la eliminación de determinadas animaciones porque esto estaría fuera de nuestro área de especialización.

    Un buen enfoque para negociar sería sincronizar tiempos o simplificar animaciones que el navegador podría no ser capaz de realizar de forma nativa y evitar animaciones que utilicen JavaScript porque serían difíciles de mantener y podrían dar como resultado un rendimiento deficiente. 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. Observe dónde se supone que debe ocurrir cada momento de transición. Aproveche BEM en las clases de CSS para aplicar animaciones con claridad. Comprenda las razones por las que JavaScript debería limitarse a favor de CSS.

     

    Examinemos la animación descrita anteriormente. Cinco estados nos llaman la atención:

    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 pelota, junto con su sombra paralela;
    5. el regreso al estado inicial, a la espera de ser activado.

    Para los cinco estados, deberíamos observar 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 podría ser nada, si el elemento aparece de la nada, o podría ser el estilo anterior, en el caso de animaciones encadenadas.

    Estado Nombres de clase Duración Tiempo de animación
    1 pelota (n/a, esperando el disparador) n / A
    2 pelota, pelota - escalar 1 segundo Facilitarse
    3 bola, bola--escalar, bola--circular 2 segundos facilidad de entrada y salida
    4 bola, bola-agrandada, bola--circulando, bola--reducida 1 segundo facilidad en
    5 pelota (n/a, esperando el disparador) n / A

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

    BEM CSS es ideal para nuestra estrategia de nombres 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. Comenzaremos solo con los marcadores de bloque y elemento y luego agregaremos modificadores a medida que avanzamos en la animación.

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

    // State 1div/div// State 2div/div// State 3div/div// State 4div/div// State 5div/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 recorre la experiencia, también lo hacen los nombres de nuestras clases 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 mano y herramientas listas para usar, deberíamos ir socavando el proyecto estado por estado.

    Podemos abordar de forma iterativa cada estado como un elemento separado, basándose en 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

    La ampliación consta de dos partes: el tamaño del elemento y su sombra paralela. Usamos un fotograma clave, llamado scale, que es compartido tanto por el escalado hacia arriba como hacia abajo para que DRY-ness maneje 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 ampliada)

    Usamos un fotograma clave, llamado circular, y movemos su transform-originpropiedad 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 ampliación)

    Para reducir la escala, reutilizamos la escala de fotogramas clave para animation-direction: reversehacer lo contrario de lo que hace la clase de ampliación. 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.

    Conclusión

    Las herramientas que se tratan en este artículo no son de vanguardia, pero generalmente son compatibles con la mayoría de los principales navegadores, lo que las hace utilizables en la actualidad.

    Anteriormente, implementar animaciones era difícil porque implicaba 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 son siempre un tira y afloja entre el desarrollador, el diseñador y el propietario del producto. El truco consiste en encontrar un punto medio, donde todas las partes interesadas estén contentas con la calidad del producto. Con suerte, esta guía le ayudará a realizar esa transición.

    Otras lecturas

    • SolidStart: una clase diferente de metamarco
    • El desarrollo web se está volviendo demasiado complejo y puede ser culpa nuestra
    • Crear animaciones de interfaz de usuario accesibles
    • Cómo dibujar gráficos de radar en la web

    (rb, yk, al, ra, il, mrn)Explora más en

    • javascript
    • Animación
    • CSS





    Tal vez te puede interesar:

    1. ¿Deberían abrirse los enlaces en ventanas nuevas?
    2. 24 excelentes tutoriales de AJAX
    3. 70 técnicas nuevas y útiles de AJAX y JavaScript
    4. Más de 45 excelentes recursos y repositorios de fragmentos de código

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

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

    ¡Registro! SmashingConf Friburgo 2024 Índice ¿Qué es After Effects?

    programar

    es

    https://aprendeprogramando.es/static/images/programar-hacer-la-transicion-de-after-effects-a-transiciones-css-y-fotogramas-clave-930-0.jpg

    2024-05-20

     

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

    Si crees que alguno de los contenidos (texto, imagenes o multimedia) en esta página infringe tus derechos relativos a propiedad intelectual, marcas registradas o cualquier otro de tus derechos, por favor ponte en contacto con nosotros en el mail [email protected] y retiraremos este contenido inmediatamente

     

     

    Top 20