Grauer Ausbruch

Dieser fesselende graue Burst -Effekt bietet zwar nicht übermäßig komplex, bietet aber eine wertvolle Lernmöglichkeit. Lassen Sie uns die Erstellung mit SVG untersuchen und sich auf Schlüsseltechniken konzentrieren.

SVG -Implementierung

Nutzung von SVGs<line></line> Element (mit Attributen x1 , x2 , y1 , y2 ) vereinfacht das Burst -Design. Der Mittelpunkt ( x1 , y1 ) bleibt konstant, während x2 und y2 unter Verwendung von Zufallszahlen dynamisch erzeugt werden. Das Attribut viewBox="0 0 100 100" macht Koordinatenberechnungen einfach. Erwägen Sie viewBox="-50 -50 100 100" zu verwenden, um den Ursprung für eine leichtere Manipulation zu zentrieren.

Zufällige Zahlengenerierung

Eine benutzerdefinierte Funktion generiert zufällige Ganzzahlen innerhalb eines bestimmten Bereichs:

 const GetRandomint = (min, max) => {
  min = math.ceil (min);
  max = math.floor (max);
  return math.floor (math.random () * (max - min 1)) min;
};

Diese Funktion ist von unschätzbarem Wert für die Steuerung von Linienpositionierung, Schlaganfallbreite und Deckkraft, wodurch die Notwendigkeit eines ähnlichen integrierten JavaScript-Mathematik-Helfers hervorgehoben wird.

Optimierte HTML -Erzeugung

Vorlage -Literale bieten einen sauberen und lesbaren Ansatz, um die SVG -Zeilen dynamisch zu erzeugen:

 Newlines;
für (sei i = 0; i <h3 id="Klicken-Sie-auf-die-Interaktivität"> Klicken Sie auf die Interaktivität</h3><p> Das Hinzufügen von Interaktivität ist überraschend einfach. Eine einzelne Funktion ( <code>doArt()</code> ) übernimmt die Artwork -Generation, und ein Ereignishörer löst diese Funktion auf jedem Klick aus:</p><pre class="brush:php;toolbar:false"> Doart ();
window.addeventListener ("klicken", doart);

Verbesserte Ästhetik mit Rundung

Die Verwendung von stroke-linecap="round" verbessert die visuelle Anziehungskraft erheblich durch Runden der Linienende.

CSS -Transformation für Animation

Der Animationseffekt wird unter Verwendung von CSS -Transformationen erreicht, speziell scale() , anstatt die Linienkoordinaten direkt zu verändern. Dies erzeugt eine pulsierende Wirkung:

 Linie {
  Transform-Ursprung: Zentrum;
  Animation: 4s unendlich alternativ;
}
/ * ... Animationsverzögerungen ... */

@keyframes do {
  100% {
    Transformation: Skala (0,69);
  }
}

Die gestaffelten Animationsverzögerungen ( animation-delay ) unter Verwendung von nth-child -Selektoren bringen der Animation eine subtile Zufälligkeit ein.

Zukünftige Verbesserungen

Mehrere Verbesserungen könnten diesen Effekt verbessern:

• Färbung: Das Hinzufügen von Farbe würde das visuelle Interesse erhöhen. Die kontrollierte Randomisierung und nicht vollständig zufällige Farben würde ästhetisch ansprechende Ergebnisse erzielen.
• Gruppierung der Ästhetik: Das Gruppieren ähnlicher Schlagbreiten oder Farben würde ein zusammenhängenderes Aussehen erzielen.
• Erweiterte Bewegung: Die Einführung von Rotation, Seitenbewegung oder mehreren Bursts würde eine Dynamik hinzufügen.
• Interaktive Steuerelemente: Eine Bibliothek wie dat.gui würde es Benutzern ermöglichen, Parameter direkt innerhalb der Demo anzupassen.

Das obige ist der detaillierte Inhalt vonGrauer Ausbruch. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!