Catégories
Astuces et Design

Comment créer un flou de mouvement réaliste avec des transitions CSS

Avant de nous plonger dans la création d'un flou de mouvement réaliste dans CSS, cela vaut la peine de plonger rapidement dans le flou de mouvement est, afin que nous puissions avoir une meilleure idée de ce que nous essayons de reproduire.

Avez-vous déjà pris une photo de quelque chose se déplaçant rapidement, en particulier sous un faible éclairage, et cela s'est transformé en une séquence floue? Ou peut-être que toute la caméra a tremblé et que tout le plan est devenu une série de stries? Il s’agit de flou de mouvement, et c’est un sous-produit du fonctionnement d’une caméra.

Flou de mouvement 101

Imaginez une caméra. Il a un obturateur, une porte qui s'ouvre pour laisser entrer la lumière, puis se ferme pour empêcher la lumière d'entrer. De son ouverture à sa fermeture, il y a une seule photo ou une seule image d'une image en mouvement.

Un homme flou portant une chemise rouge sur un vélo bleu à toute vitesse à travers la forêt.
Flou de mouvement réel en action (Photo: Kevin Erdvig, Unsplash)

Si le sujet du cadre bouge pendant que l'obturateur est ouvert, on finit par prendre une photo d'un objet se déplaçant dans le cadre. Sur le film, cela apparaît comme un frottis constant, le sujet se trouvant dans un nombre infini d'endroits entre son point de départ et sa fin. L'objet en mouvement finit également par être semi-transparent, avec des parties de l'arrière-plan visibles derrière lui.

Ce que font les ordinateurs pour simuler cela, c'est modéliser plusieurs sous-trames, puis les composer ensemble à une fraction de l'opacité. Le fait de placer de nombreuses copies du même objet à des endroits légèrement différents le long de la trajectoire du mouvement crée un fac-similé assez convaincant d'un flou de mouvement.

Les applications de composition vidéo ont tendance à avoir des paramètres pour le nombre de subdivisions que leur flou de mouvement doit avoir. Si vous définissez cette valeur très bas, vous pouvez voir exactement comment la technique fonctionne, comme ceci, une image d'une animation d'un simple point blanc à quatre échantillons par image:

Quatre cercles opaques blancs superposés sur fond noir.
Quatre échantillons par image.
Douze cercles opaques blancs superposés sur fond noir.
Voici 12 échantillons par image.
Trente-deux cercles opaques blancs superposés sur fond noir.
Et au moment où nous sommes à 32 échantillons par image, il est assez proche de la réalité, en particulier lorsqu'il est vu à plusieurs images par seconde.

Le nombre d'échantillons nécessaires pour créer un flou de mouvement convaincant est entièrement relatif au contenu. Quelque chose de petit avec des arêtes vives qui se déplace très rapidement aura besoin de beaucoup de sous-trames; mais quelque chose de flou se déplaçant lentement pourrait ne nécessiter que quelques-uns. En général, utiliser plus créera un effet plus convaincant.

Faire cela en CSS

Afin d'approcher cet effet en CSS, nous devons créer une tonne d'éléments identiques, les rendre semi-transparents et compenser leurs animations d'une infime fraction de seconde.

Tout d'abord, nous allons configurer la base avec l'animation souhaitée à l'aide d'une transition CSS. Nous allons utiliser un simple point noir et lui attribuer une transformation en survol (ou toucher, si vous êtes sur mobile). Nous animerons également le rayon et la couleur de la bordure pour montrer la flexibilité de cette approche.

Voici l'animation de base sans flou de mouvement:

Maintenant, faisons 20 copies identiques du point noir, toutes placées exactement au même endroit avec un positionnement absolu. Chaque copie a une opacité de 10%, ce qui est un peu plus que ce qui pourrait être mathématiquement correct, mais je trouve que nous devons les rendre plus opaques pour paraître suffisamment solides.

La prochaine étape est celle où la magie opère. Nous ajoutons une valeur de délai de transition légèrement croissante pour chaque clone de notre objet point. Ils exécuteront tous exactement la même animation, mais ils seront chacun décalés de trois millisecondes.

La beauté de cette approche est qu'elle crée un effet de pseudo-flou de mouvement qui fonctionne pour une tonne d'animations différentes. Nous pouvons y apporter des changements de couleur, mettre à l'échelle des transitions, des timings impairs et l'effet de flou de mouvement fonctionne toujours.

L'utilisation de 20 clones d'objets fonctionnera pour de nombreuses animations rapides et lentes, mais moins peuvent encore produire une sensation raisonnable de flou de mouvement. Vous devrez peut-être modifier le nombre d'objets clonés, leur opacité et le délai de transition pour travailler avec votre animation particulière. La démo que nous venons de regarder a un effet de flou légèrement overclocké pour le rendre plus visible.


Finalement, avec les progrès de la puissance de l'ordinateur, je pense que certains des principaux navigateurs pourraient commencer à offrir cet effet de manière native. Ensuite, nous pouvons supprimer le ridicule d'avoir 20 objets identiques. En attendant, c'est une manière raisonnable d'approcher un flou de mouvement réaliste.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *