Exploration de l'API CSS Paint: Blob Animation

Cet article plonge à la création d'animations Blob captivantes à l'aide de l'API CSS Paint. Bien que traditionnellement atteint avec SVG, l'API Paint propose une alternative basée sur CSS puissante, bien que actuellement limitée à Chrome et Edge.

Ceci est la deuxième partie d'une série:

• Partie 1: Effet de fragmentation de l'image
• Partie 2: Blob Animation (cet article)
• Partie 3: bordure de polygone
• Partie 4: Formes d'arrondi

Construisons un blob. Comprendre le<canvas></canvas> L'approche clarifie d'abord le processus:

Un blob est essentiellement un cercle déformé. Nous définissons des points de «n» autour d'un cercle. En utilisant la trigonométrie, nous calculons les coordonnées de chaque point (points verts dans l'illustration). Les courbes cubes de Bézier relient ces points, nécessitant un point de départ, un point de contrôle et un point final (points rouges). Les points rouges sont des points intermédiaires entre les points verts.

En ajustant les points de contrôle (points verts), nous façonnons le blob. Compenser chaque point au hasard vers le centre crée l'effet blob.

Cette forme devient alors un masque pour une image utilisant l'API CSS Paint. Les éléments carrés (largeur égaux de hauteur) sont idéaux, le rayon étant la moitié de la largeur / hauteur. Une variable CSS (n) contrôle le nombre de points.

L'animation du blob implique des positions de points de changement de changement en douceur. Une animation simple passe d'un cercle à un blob en modifiant la position d'un point. Une variable CSS ( --b ) avec une transition est utilisée. En survol, --b change, déplace le point et créant l'animation. L'extension à plusieurs points (uniformes, par exemple), crée des animations plus complexes.

Introduction de l'aléatoire: au lieu du mouvement de point fixe, les décalages aléatoires créent des animations dynamiques. Une variable ( T ) agit comme un commutateur booléen entre les configurations uniformes et aléatoires. Une fonction random() personnalisée avec une graine contrôlable assure des séquences aléatoires cohérentes.

Mouvement de point de contrôle: nous pouvons manipuler les coordonnées X et Y indépendamment pour diverses animations. Par exemple, la définition d'une coordonnée sur zéro crée un mouvement à un axe (horizontal ou vertical). Le mouvement directionnel (gauche ou à droite) nécessite du regroupement des points en fonction de leur angle et de l'application de différents signes à leurs décalages. L'ajustement de la taille du cercle empêche les points de dépasser la zone du masque. Un emballage avec des marges négatives garantit que la zone de survol correspond au blob visible.

Combinaison d'animations: les images clés et les fonctions cubic-bezier () améliorent les animations. Une courbe sinusoïdale crée un effet vacillant. Transforme les effets coulissants.

Mouvement circulaire: les points orbitent leurs positions initiales, créant des animations continues. Le rayon d'orbite maximal empêche le chevauchement.

Mouvement en spirale: La combinaison des mouvements circulaires et de condamnation au centre crée des animations en spirale. Deux variables d'animation ( B et Bo ) contrôlent respectivement les mouvements d'orbite et de point.

Résumé:

• N: Nombre de points (Détails des contrôles).
• T: type de mouvement (uniforme ou aléatoire).
• Semence: pour des configurations aléatoires.
• NA: Nature du mouvement (convergence centrale, axe, circulaire, spirale, etc.).
• B (et bo): variable d'animation (s).
• V: valeur maximale de B (zone de forme des contrôles).

La structure du code est simple: les paramètres de contrôle des variables CSS et les fonctions JavaScript ( Fx , Fy , A ) définissent la logique d'animation. Le CSS applique le masque et anime la variable B

Cela conclut l'exploration des animations blob avec l'API CSS Paint. Expérimentez les variables CSS pour créer d'innombrables variations.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!