Cómo crear un desenfoque de movimiento realista con transiciones CSS

Antes de profundizar en cómo crear un desenfoque de movimiento realista en CSS, vale la pena profundizar rápidamente en qué es el desenfoque de movimiento , para que podamos tener una mejor idea de lo que estamos tratando de reproducir.

¿Alguna vez tomaste una fotografía de algo que se movía rápidamente, especialmente con poca luz, y se convirtió en una raya borrosa? ¿O tal vez toda la cámara tembló y toda la toma se convirtió en una serie de rayas? Esto es desenfoque de movimiento y es un subproducto del funcionamiento de una cámara.

Desenfoque de movimiento 101

Imagina una cámara. Tiene una contraventana, una puerta que se abre para dejar entrar la luz y luego se cierra para impedir que entre. Desde el momento en que se abre hasta el momento en que se cierra, hay una sola fotografía o un solo fotograma de una imagen en movimiento.

Si el sujeto del encuadre se mueve durante el tiempo que el obturador está abierto, terminamos tomando una foto de un objeto que se mueve a través del encuadre. En la película, esto se muestra como una mancha constante, con el sujeto estando en un número infinito de lugares desde su punto inicial hasta su final. El objeto en movimiento también termina siendo semitransparente, con partes del fondo visibles detrás de él.

Lo que hacen las computadoras para simular esto es modelar varias subtramas y luego combinarlas con una fracción de la opacidad. Poner muchas copias del mismo objeto en lugares ligeramente diferentes a lo largo de la trayectoria del movimiento crea una facsímil bastante convincente de un desenfoque de movimiento.

Las aplicaciones de composición de vídeo tienden a tener configuraciones sobre cuántas subdivisiones debe tener su desenfoque de movimiento. Si establece este valor muy bajo, podrá ver exactamente cómo funciona la técnica, como este, un fotograma de una animación de un simple punto blanco con cuatro muestras por fotograma:

La cantidad de muestras que se necesitan para crear un desenfoque de movimiento convincente depende completamente del contenido. Algo pequeño con bordes afilados que se mueve súper rápido necesitará muchos subtramas; pero algo borroso que se mueve lentamente puede necesitar sólo unos pocos. En general, usar más creará un efecto más convincente.

Haciendo esto en CSS

Para aproximarnos a este efecto en CSS, necesitamos crear un montón de elementos idénticos, hacerlos semitransparentes y compensar sus animaciones en una pequeña fracción de segundo.

Primero, configuraremos la base con la animación que queremos usando una transición CSS. Iremos con un simple punto negro y le asignaremos una transformación al pasar el cursor (o tocar, si estás en un dispositivo móvil). También animaremos el radio y el color del borde para mostrar la flexibilidad de este enfoque.

Aquí está la animación base sin desenfoque de movimiento:

Ahora, hagamos 20 copias idénticas del punto negro, todas colocadas exactamente en el mismo lugar con posicionamiento absoluto. Cada copia tiene una opacidad del 10%, que es un poco más de lo que podría ser matemáticamente correcto, pero creo que necesitamos hacerlas más opacas para que parezcan lo suficientemente sólidas.

El siguiente paso es donde ocurre la magia. Agregamos un valor de retardo de transición ligeramente creciente para cada clon de nuestro objeto de punto. Todos ejecutarán exactamente la misma animación, pero cada uno tendrá un desplazamiento de tres milisegundos.

La belleza de este enfoque es que crea un efecto de desenfoque de pseudo-movimiento que funciona para un montón de animaciones diferentes. Podemos realizar cambios de color allí, escalar transiciones, tiempos impares y el efecto de desenfoque de movimiento seguirá funcionando.

El uso de 20 clones de objetos funcionará para muchas animaciones rápidas y lentas, pero menos aún pueden producir una sensación razonable de desenfoque de movimiento. Es posible que deba modificar la cantidad de objetos clonados, su opacidad y la cantidad de retraso de transición para trabajar con su animación particular. La demostración que acabamos de ver tiene el efecto de desenfoque ligeramente overclockeado para hacerlo más prominente.

Con el tiempo, con el progreso de la potencia informática, espero que algunos de los principales navegadores empiecen a ofrecer este efecto de forma nativa. Entonces podremos acabar con la ridiculez de tener 20 objetos idénticos. Mientras tanto, esta es una forma razonable de aproximarse a un desenfoque de movimiento realista.