Erkundung der CSS -Paint -API: Blob Animation

In diesem Artikel wird mit der CSS -Paint -API faszinierende Blobimationen erstellt. Während die Lack-API traditionell mit SVG erreicht wird, bietet sie eine leistungsstarke Alternative auf CSS-basierte, die derzeit auf Chrom und Rand beschränkt ist.

Dies ist Teil zwei einer Serie:

• Teil 1: Bildfragmentierungseffekt
• Teil 2: Blob Animation (dieser Artikel)
• Teil 3: Polygongrenze
• Teil 4: Rundenformen

Lassen Sie uns einen Blob bauen. Das verstehen<canvas></canvas> Ansatz klärt zunächst den Prozess:

Ein Blob ist im Wesentlichen ein verzerrter Kreis. Wir definieren 'n' Punkte um einen Kreis. Mit der Trigonometrie berechnen wir die Koordinaten jedes Punktes (grüne Punkte in der Abbildung). Kubische Bézier -Kurven verbinden diese Punkte und erfordern einen Startpunkt, einen Kontrollpunkt und einen Endpunkt (rote Punkte). Rote Punkte sind Mittelpunkte zwischen grünen Punkten.

Durch Einstellen der Kontrollpunkte (grüne Punkte) formen wir den Blob. Durch zufällig in Richtung Mitte ausgleichen Punkte erzeugen den Blob -Effekt.

Diese Form wird dann zu einer Maske für ein Bild mit der CSS -Farb -API. Quadratische Elemente (Breite gleich Höhe) sind ideal, wobei der Radius die halbe Breite/Höhe beträgt. Eine CSS -Variable (n) steuert die Punktzahl.

Das Animieren des Blob beinhaltet reibungslose Verschiebungspunkte. Eine einfache Animation wechselt von einem Kreis zu einem Blob, indem sie die Position eines Punktes ändert. Eine CSS -Variable ( --b ) mit einem Übergang wird verwendet. Bei schweber ändert sich --b ändert sich, verschiebt den Punkt und erstellt die Animation. Die Erweiterung dieser auf mehrere Punkte (z. B. gleichnummerierte) erzeugt komplexere Animationen.

Einführung von Zufälligkeit: Anstelle von Fixpunktbewegungen erstellen zufällige Aussätze dynamische Animationen. Eine Variable ( T ) wirkt als Boolean -Schalter zwischen einheitlichen und zufälligen Konfigurationen. Eine benutzerdefinierte random() -Funktion mit einem kontrollierbaren Saatgut sorgt für konsistente Zufallssequenzen.

Kontrolle der Punktbewegung: Wir können die X- und Y -Koordinaten unabhängig für verschiedene Animationen manipulieren. Das Einstellen einer Koordinate auf Null erzeugt beispielsweise eine Achsenbewegung (horizontal oder vertikal). Die Richtungsbewegung (links oder rechts) erfordert Gruppierungspunkte basierend auf ihrem Winkel und das Anwenden verschiedener Zeichen auf ihre Offsets. Das Einstellen der Größe des Kreises verhindert, dass Punkte den Maskenbereich überschreiten. Eine Verpackung mit negativen Rändern stellt sicher, dass der Schwebebereich mit dem sichtbaren Blob übereinstimmt.

Kombinieren Animationen: Keyframes und Cubic-Bezier () -Funktionen verbessern Animationen. Eine sinusförmige Kurve erzeugt eine wackelnde Wirkung. Transformationen fügen Gleiteffekte hinzu.

Rundschreiben: Punkte umdrehen ihre anfänglichen Positionen und erstellen Sie kontinuierliche Animationen. Der maximale Orbit -Radius verhindert eine Überlappung.

Spiralbewegung: Das Kombinieren von kreisförmigen und zentralen Bewegungen erzeugt Spiralanimationen. Zwei Animationsvariablen ( B und Bo ) steuern die Umlaufbahn- bzw. Punktbewegungen.

Zusammenfassung:

• N: Anzahl der Punkte (Kontrolldetail).
• T: Bewegungstyp (gleichmäßig oder zufällig).
• Saatgut: Für zufällige Konfigurationen.
• NA: Art der Bewegung (Mitte-Konvergenz, Einachse, kreisförmiger, Spirale usw.).
• B (und Bo): Animationsvariable (s).
• V: Maximaler Wert von B (steuert Formbereich).

Die Codestruktur ist unkompliziert: CSS -Variablen -Steuerparameter und JavaScript -Funktionen ( Fx , Fy , A ) Definieren Sie die Animationslogik. Das CSS wendet die Maske an und belebt die B -Variable.

Damit schließt sich die Erforschung von Blobimationen mit der CSS -Farb -API ab. Experimentieren Sie mit den CSS -Variablen, um unzählige Variationen zu erstellen.

Das obige ist der detaillierte Inhalt vonErkundung der CSS -Paint -API: Blob Animation. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!