SVG und CSS erzeugen realistische Cloud -Effekte

In der griechischen Mythologie schuf Zeus die Cloud -Feen -Fairy Nefere. Wie andere griechische Mythen ist diese Geschichte ziemlich bizarr. Hier ist eine kurze und geeignete Version:

Laut Legend wurde Nerferele von Zeus nach dem Bild seiner sch?nen Frau geschaffen. Ein Sterblicher traf Nefere und verliebte sich in sie. Zusammen ... am Ende brachte diese Wolke ein halbes Mann und ein halbes m?nnliches Centaur-Baby zur Welt.

Sehr seltsam, oder? Ich pers?nlich kann nicht verstehen. Glücklicherweise ist der Prozess des Erstellens von Wolken in einem Browser viel einfacher und ernster.

Vor kurzem stellte ich fest, dass der Entwickler Yuan Chuan einen realistischen Cloud -Effekt implementiert hat, der mit Code generiert wird. Für mich war dieser Effekt, der im Browser implementiert wurde, einst ein Mythos.

Durchsuchen Sie diesen Beispielcode einfach und wir k?nnen uns das durch die Verwendung vorstellen<filter></filter> CSS- box-shadow von Elementen (einschlie?lich zwei SVG-Filter) k?nnen einen überzeugenden einzelnen Cloud-Effekt erzielen.

Der realistische Effekt, den wir wollen, wird durch die clevere Kombination von feTurbulence und feDisplacementMap erreicht. Diese SVG-Filter sind leistungsstark, komplex und bieten sehr aufregende Funktionen (einschlie?lich eines Oscar-Preistr?geralgorithmus!). Die zugrunde liegende Komplexit?t kann jedoch entmutigend sein.

W?hrend die Physik von SVG -Filtern den Rahmen dieses Artikels au?erhalb des Rahmens von MDN und W3.ORG gibt. Sehr hilfreiche Seiten über feTurbulence und feDisplacementMap stehen kostenlos zur Verfügung (und als Kapitel in diesem wunderbaren Buch).

In diesem Artikel werden wir uns darauf konzentrieren, zu lernen, wie diese SVG -Filter verwendet werden, um erstaunliche Ergebnisse zu erzielen. Wir müssen uns nicht tiefer sehen, wie die Algorithmen hinter den Kulissen funktionieren, so wie Künstler die molekulare Struktur von Pigmenten nicht verstehen müssen, um erstaunliche Landschaften zu rendern.

Lassen Sie uns stattdessen mehrere SVG -Eigenschaften im Auge behalten, die für die Zeichnung von Wolken in Ihrem Browser von entscheidender Bedeutung sind. Mit diesen Eigenschaften k?nnen wir diese leistungsstarken Filter problemlos verwenden und lernen, wie Sie sie in unseren Projekten genau anpassen k?nnen.

Beginnen Sie mit den Grundlagen

Im CSS- box-shadow Attribut sind fünf Werte zu beachten:

 <code>box-shadow:<offsetx><offsety><blurradius><spreadradius><color> ;</color></spreadradius></blurradius></offsety></offsetx></code>

Lassen Sie uns diese Werte (wahrscheinlich h?her als jeder vernünftige Entwickler verwenden), damit der Schatten selbst auf der Bühne zu einem Charakter wird.

 <code>#cloud-square { background: turquoise; box-shadow: 200px 200px 50px 0px #000; width: 180px; height: 180px; } #cloud-circle { background: coral; border-radius: 50%; box-shadow: 200px 200px 50px 0px #000; width: 180px; height: 180px; }</code>

Hast du jemals Schattendramen gespielt oder gesehen?

Genau wie die Form der Form mit Ihren H?nden, um den Schatten zu ?ndern, kann die "Quellform" in unserem HTML bewegt und deformiert werden, um sich zu bewegen und die Form des im Browser gerenderten Schattens zu ?ndern. box-shadow kopiert die ursprüngliche Gr??e und die "Transformation" -Funktionalit?t auf border-radius . SVG -Filter werden gleichzeitig auf Elemente und ihre Schatten angewendet.

<code><svg height="0" width="0"><filter><feturbulence basefrequency=".01" numoctaves="10" type="fractalNoise"></feturbulence><fedisplacementmap in="SourceGraphic" scale="10"></fedisplacementmap></filter></svg></code>

Dies ist das Markup für unsere aktuelle SVG. Es wird nicht gerendert, weil wir keine Grafiken definiert haben (ganz zu schweigen von Null Breite und H?he). Sein einziger Zweck ist es, einen Filter zu retten, den wir unserem SourceGraphic (dh unsere<div> ). Unsere Quelle<code><div> Seine Schatten werden vom Filter unabh?ngig verzerrt. Wir werden die erforderlichen CSS-Regeln hinzufügen und das HTML-Element ( <code>#cloud-circle ) mit seiner ID mit dem SVG-Filter verknüpfen:

 <code>#cloud-circle { filter: url(#filter); box-shadow: 200px 200px 50px 0px #fff; }</code>

Sehen!

OK, geben Sie es zu, es ist ziemlich unauff?llig, SVG -Filter hinzuzufügen.

Mach dir keine Sorgen! Wir haben gerade die Oberfl?che berührt und es gab viele gute Dinge zu sehen.

Experiment feDisplacementMap scale -Eigenschaft

Durch die Durchführung einiger nichtwissenschaftlicher Experimente dieses Attributs k?nnen dramatische Effekte führen. Lassen Sie uns für den Moment alle Werte in feTurbulence unver?ndert halten. Passen Sie einfach scale Skaleneigenschaft DisplacementMap an.

Wenn scale Skalierungswert (in 30 Schritten) zunimmt, unsere Quelle<div> Verzerrungen treten auf und Schatten werden gegossen, um die zuf?llige Form der Wolken am Himmel zu reflektieren.<pre class="brush:php;toolbar:false">&lt;code&gt;&lt;fedisplacementmap in=&quot;SourceGraphic&quot; scale=&quot;180&quot;&gt;&lt;/fedisplacementmap&gt;&lt;/code&gt;</pre> <p> Ok, wir haben einige Fortschritte gemacht! Lassen Sie uns die Farbe ein wenig ?ndern, um einen überzeugenden Cloud -Effekt zu erzielen und sie zu verbessern.</p> <pre class="brush:php;toolbar:false"> &lt;code&gt;body { background: linear-gradient(165deg, #527785 0%, #7FB4C7 100%); } #cloud-circle { width: 180px; height: 180px; background: #000; border-radius: 50%; filter: url(#filter); box-shadow: 200px 200px 50px 0px #fff; }&lt;/code&gt;</pre> <p> Jetzt sind wir dem realistischen Cloud -Effekt n?her!</p> <h3> ?ndern Sie den <code>blur von box-shadow

Die folgenden Bilderreihen zeigen den Effekt des blur auf box-shadow . Hier erh?ht sich der blur in Schritten von 10 Pixel.

Um unseren Wolken einen kumulus?hnlichen Effekt zu verleihen, k?nnen wir unsere Quelle leicht erweitern<div> .<pre class="brush:php;toolbar:false"> &lt;code&gt;#cloud-circle { width: 500px; height: 275px; background: #000; border-radius: 50%; filter: url(#filter); box-shadow: 200px 200px 60px 0px #fff; }&lt;/code&gt;</pre> <p> usw! Wir haben das Quellelement erweitert, und jetzt blockiert es den wei?en Schatten, den wir Wolken nennen. Lassen Sie uns die Schatten in eine l?ngere Entfernung "erneut abschlie?en", damit unsere Wolken durch das Quellbild nicht verdeckt werden. (Stellen Sie sich vor, Sie entfernen Ihre H?nde von der Wand, damit Sie die Sicht des Schattendramas nicht blockieren.)</p> <p> Dies kann mit einigen CSS -Positionierung leicht erreicht werden.<code><div> Es ist das übergeordnete Element der Cloud und ist standardm??ig standardm??ig positioniert. Verwenden wir eine absolute Positionierung, um unsere Quelle zu übertragen<code><div> "Ziehen" es nach oben und entfernen Sie den Dokumentstrom. Dies wird zun?chst auch unsere Schatten neu positionieren, sodass wir auch den Abstand zwischen den Schatten erh?hen und die Position des Elements leicht einstellen müssen.<pre class="brush:php;toolbar:false"> &lt;code&gt;#cloud-circle { width: 500px; height: 275px; background: #000; border-radius: 50%; filter: url(#filter); box-shadow: 400px 400px 60px 0px #fff; /* 增加陰影偏移量*/ position: absolute; /* 將父元素移出文檔流*/ top: -320px; /* 向下移動*/ left: -320px; /* 向右移動*/ }&lt;/code&gt;</pre> <p> Ja! Wir haben bereits eine ziemlich überzeugende Wolke.</p> <p> Die in den Browser gerendeten Bilder zeigen die Wolken recht gut - aber ich bin mir nicht sicher ... kann diese Cloud das Cloud -Fairy Neferre wirklich widerspiegeln? Ich glaube, wir k?nnen es besser machen!</p> <h3 id="Tiefe-mit-Schichten-ausdrücken"> Tiefe mit Schichten ausdrücken</h3> <p> Das wollen wir:</p> <p> Nach Tiefe, Textur und Reichtum der Wolken auf diesem Foto zu urteilen, ist klar: Zeus hat die Kunstschule besucht. Zumindest muss er die universellen Prinzipien des Designs gelesen haben, die ein kraftvolles und scheinbar gew?hnliches Konzept erl?utern:</p> <blockquote><p> […] Die Beleuchtungsabweichung spielt eine wichtige Rolle bei der Interpretation von Tiefe und Naturgefühl und kann vom Designer auf verschiedene Weise betrieben werden. Verwenden Sie den Kontrast zwischen hellen und dunklen Bereichen, um das Erscheinungsbild der Tiefe zu ver?ndern.</p></blockquote> <p> Diese Passage gibt uns einen Hinweis darauf, wie wir den Cloud -Code, den wir selbst generieren, erheblich verbessern k?nnen. Wir k?nnen Wolken rendern, die denen im Referenzbild sehr ?hnlich sind, indem wir Schichten verschiedener Formen, Gr??en und Farben zusammen stapeln. Dies erfordert nur, dass unser Filter nach Bedarf mehrfach angerufen wird. </p> <pre class="brush:php;toolbar:false">&lt;code&gt;&lt;svg height=&quot;0&quot; width=&quot;0&quot;&gt;&lt;filter&gt;&lt;feturbulence basefrequency=&quot;0.012&quot; numoctaves=&quot;4&quot; type=&quot;fractalNoise&quot;&gt;&lt;/feturbulence&gt;&lt;fedisplacementmap in=&quot;SourceGraphic&quot; scale=&quot;170&quot;&gt;&lt;/fedisplacementmap&gt;&lt;/filter&gt;&lt;filter&gt;&lt;feturbulence basefrequency=&quot;0.012&quot; numoctaves=&quot;2&quot; type=&quot;fractalNoise&quot;&gt;&lt;/feturbulence&gt;&lt;fedisplacementmap in=&quot;SourceGraphic&quot; scale=&quot;150&quot;&gt;&lt;/fedisplacementmap&gt;&lt;/filter&gt;&lt;filter&gt;&lt;feturbulence basefrequency=&quot;0.012&quot; numoctaves=&quot;2&quot; type=&quot;fractalNoise&quot;&gt;&lt;/feturbulence&gt;&lt;fedisplacementmap in=&quot;SourceGraphic&quot; scale=&quot;100&quot;&gt;&lt;/fedisplacementmap&gt;&lt;/filter&gt;&lt;/svg&gt;&lt;/code&gt;</pre> <p> Die Anwendung unserer Schichten bietet uns die M?glichkeit, <code>feTurbulence zu erkunden und ihre Vielseitigkeit zu erreichen. Wir werden den reibungsloseren Typ ausw?hlen: fractalNoise und numOctaves bis zu 6.

<code><feturbulence basefrequency="n" numoctaves="6" type="fractalNoise"></feturbulence></code>

Was bedeutet das? Konzentrieren wir uns nun auf baseFrequency . Hier ist das Ergebnis, das wir erhalten, wenn wir den Wert von n erh?hen:

W?rter wie Turbulenzen , L?rm , Frequenz und Oktave k?nnen seltsam oder sogar verwirrend erscheinen. Aber mach dir keine Sorgen! Der Vergleich der Wirkung dieses Filters mit Schallwellen ist tats?chlich v?llig genau. Wir k?nnen Niederfrequenzen ( baseFrequency=0.001 ) mit niedrigem Rauschen und hohen Frequenzen ( baseFrequency=0.1 ) mit h?heren, klareren T?nen assoziieren.

Wir k?nnen sehen, dass für kumulus?hnliche Effekte der Wert des baseFrequency bequem in den Bereichen ~ 0,005 und ~ 0,01 liegen kann.

Fügen Sie Details mit numOctaves

Durch das Inkrementieren von numOctaves k?nnen wir Bilder mit extrem feinen Details rendern. Dies erfordert viele Berechnungen. Beachten Sie daher, dass hohe Werte die Leistung ernsthaft beeinflussen k?nnen. Versuchen Sie, diesen Wert zu erh?hen, es sei denn, Ihr Browser tr?gt einen Helm und Knieschalter.

Die gute Nachricht ist, dass wir diesen Wert nicht zu hoch anpassen müssen, um Details und Feinheiten zu erstellen. Wie im obigen Bild gezeigt, k?nnen wir den numOctaves -Wert auf 4 oder 5 festlegen.

Die Ergebnisse sind wie folgt

Verwenden Sie seed Saatgutattribut, um unendliche Ver?nderungen zu erreichen

Es gibt viel zu sagen über seed , weil es auf die Magie hinweist, die hinter den Kulissen stattfindet. Für unseren Zweck kann jedoch der Nutzen von seed in vier W?rtern zusammengefasst werden: "unterschiedliche Werte, unterschiedliche Formen".

Die Perlin -Rauschfunktion (früher erw?hnt) verwendet diesen Wert als Ausgangspunkt für den Zufallszahlengenerator. Wenn Sie diese Eigenschaft nicht einschlie?en, wird seed auf Null standardm??ig. Wenn diese Eigenschaft jedoch enthalten ist, müssen wir seed nicht um Leistungsprobleme kümmern.

Das obige GIF repr?sentiert einige der von seed bereitgestellten Merkmale. Denken Sie daran, dass jede Wolke eine geschichtete zusammengesetzte Wolke ist. (Obwohl ich die Eigenschaften jeder Schicht angepasst habe, halte ich ihre jeweiligen seed konsistent.)

Hier habe ich hier vorsichtig 3 Wolken eingestellt<div> (Unterschiedliche Deckkraft) überlagern Sie eine Basis<code><div> Vorgesetzter. Durch Versuch und Irrtum und die Eingabe beliebiger <code>seed hatte ich eine Form, die der Form einer Wolke auf dem Foto ?hnelt.

Ein wild und fantasievoll

Denken Sie natürlich, wir stützen uns auf den Browser<div> Nerferele, der besser w?re als Zeus, w?re arrogant. Je mehr Geheimnisse wir jedoch aus CSS- und SVG -Filtern herausgraben k?nnen, desto mehr k?nnen wir etwas Erstaunliches und Thors ursprünglicher Sch?pfung visuell und sehr ?hnlich schaffen. Dann k?nnen wir weiterhin weitere Experimente durchführen!<p> Reflektierter Nebel</p> <p> Hochhaus Cirrus Cloud</p> <p> In diesem Artikel tupfen wir nur in einem Meer von Macht und Komplexit?t. SVG -Filter sehen normalerweise überw?ltigend und unzug?nglich aus.</p> <p> Wie bei den Beispielen in einem einzigen Div -Projekt oder Diana Smiths Zeichenf?higkeiten bringt eine entspannte und angenehme Experiment -Methode immer erstaunliche Ergebnisse!</p> <h4 id="Errungenschaft-entsperren-Nerferre-Cloud-Generator"> Errungenschaft entsperren! Nerferre Cloud Generator</h4> <p> Ich glaube, viele von Ihnen würden gerne tief in alle technischen Details eintauchen, die für die Herstellung von Wolken erforderlich sind, bevorzugen jedoch einige bequemere M?glichkeiten, Wolken in Ihrem Projekt zu verwenden. Ich habe ein Ger?t entwickelt, um Wolken zu generieren und mit Formen und Ver?nderungen zu experimentieren.</p> <p> Wolken erzeugen!</p> <p> Haben Sie Fragen, Vorschl?ge oder Kommentare? Bitte kontaktieren Sie mich auf Twitter oder hinterlassen Sie einen Kommentar in diesem Beitrag.</p> <p> <small>Vielen Dank an Amelia Bellamy-Royds für Ihre wertvollen Vorschl?ge zu diesem Artikel.</small></p> </div>