Antes de profundizar en la creación de un desenfoque de movimiento realista en CSS, vale la pena hacer una inmersión rápida en lo que es el desenfoque de movimiento, para que podamos tener una mejor idea de lo que estamos tratando de reproducir.
¿Alguna vez ha tomado una foto de algo que se mueve rápidamente, especialmente con poca luz, y se convirtió en una raya borrosa? ¿O tal vez toda la cámara tembló y todo el plano se convirtió en una serie de rayas? Esto es desenfoque de movimiento, y es un subproducto de cómo funciona una cámara.
Desenfoque de movimiento 101
Imagina una cámara. Tiene un obturador, una puerta que se abre para dejar entrar la luz y luego se cierra para evitar que entre la luz. Desde el momento en que se abre hasta que se cierra, es una sola fotografía o un solo cuadro de una imagen en movimiento.
Desenfoque de movimiento real en acción (Foto: Kevin Erdvig, Unsplash)
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 aparece como una mancha constante, con el sujeto en un número infinito de lugares entre su punto de partida y 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 varios subcuadros y luego combinarlos 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 un facsímil bastante convincente de un desenfoque de movimiento.
Las aplicaciones de composición de video tienden a tener configuraciones para cuántas subdivisiones debe tener su desenfoque de movimiento. Si configura este valor muy bajo, puede ver exactamente cómo funciona la técnica, así, un cuadro de una animación de un punto blanco simple en cuatro muestras por cuadro:
Cuatro muestras por cuadro.
Aquí hay 12 muestras por cuadro.
Y para cuando estamos en 32 muestras por cuadro, es casi completamente real, especialmente cuando se ve en varios cuadros por segundo.
El número de muestras que se necesitan para hacer un desenfoque de movimiento convincente es completamente relativo al contenido. Algo pequeño con bordes afilados que se mueve súper rápido necesitará muchos subcuadros; pero algo borroso que se mueve lentamente puede necesitar solo unos pocos. En general, usar más creará un efecto más convincente.
Haciendo esto en CSS
Para aproximar este efecto en CSS, necesitamos crear una tonelada de elementos idénticos, hacerlos semitransparentes y compensar sus animaciones por 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 punto negro simple y le asignaremos una transformación al pasar el mouse (o tocar, si está 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 debemos hacerlas más opacas para que se vean 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 pseudo-desenfoque de movimiento que funciona para un montón de animaciones diferentes. Podemos lanzar cambios de color allí, transiciones de escala, tiempos extraños y el efecto de desenfoque de movimiento aún funciona.
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 ajustar 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 acelerado para que sea más prominente.
Eventualmente, con el progreso de la potencia de las computadoras, espero que algunos de los principales navegadores comiencen a ofrecer este efecto de forma nativa. Entonces podemos 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.