CSS-Tricks zum Erstellen von Welleneffekten

Es war schon immer sehr schwierig, Welleneffekte mit reinem CSS zu erzielen.

Denn zur Realisierung des Wellenverlaufs wird die Bézierkurve benötigt.

Was die Verwendung von reinem CSS zur Implementierung von Bézierkurven betrifft, gibt es derzeit keine gute Möglichkeit.

Natürlich lässt sich mit Hilfe anderer Kräfte (SVG, CANVAS) der sogenannte Welleneffekt problemlos erzielen.

Schauen wir uns zunächst den Welleneffekt an, der durch Nicht-CSS-Methoden erzielt wird.

SVG-Welleneffekt

Mit SVG ist es einfach, kubische Bézierkurven zu zeichnen.

<svg Breite="200px" Höhe="200px" Version="1.1" xmlns="http://www.w3.org/2000/svg">
    <text Klasse = "liquidFillGaugeText" Textanker = "Mitte" Schriftgröße = "42px" Transform = "Translate (100,120)" Stil = "Füllung: #000">50,0 %</text>
    <!-- Welle -->
    <g id="Welle">
    <Pfad-ID="Welle-2" Füllung="rgba(154, 205, 50, .8)" d="M 0 100 C 133,633 85,12 51,54 116,327 200 100 A 95 95 0 0 1 0 100 Z">
    <animate dur="5s" repeatCount="unbestimmt" attributeName="d" attributeType="XML" values="M0 100 C90 28, 92 179, 200 100 A95 95 0 0 1 0 100 Z;
    M0 100 C145 100, 41 100, 200 100 A95 95 0 0 1 0 100 Z;
    M0 100 C90 28, 92 179, 200 100 A95 95 0 0 1 0 100 Z"></animate>
    </Pfad>
    </g>
    <circle cx="100" cy="100" r="80" stroke-width="10" stroke="weiß" fill="transparent"></circle>
    <circle cx="100" cy="100" r="90" stroke-width="20" stroke="yellowgreen" fill="keine" class="percentage-pie-svg"></circle>
</svg>

Der Kern des Zeichnens der kubischen Bézierkurve liegt in diesem Segment: <path id="wave-2" fill="rgba(154, 205, 50, .8)" d="M 0 100 C 133.633 85.12 51.54 116.327 200 100 A 95 95 0 0 1 0 100 Z">. Bei Interesse können Sie selbst einige Recherchen durchführen.

Leinwand erzielt Welleneffekt

Das Prinzip der Verwendung von Canvas zum Erzielen von Welleneffekten ist das gleiche wie bei SVG. Dabei werden Pfade verwendet, um kubische Bézierkurven zu zeichnen und ihnen Animationseffekte zu verleihen.

$(Funktion() {
    lass Leinwand = $("Leinwand");
    Lassen Sie ctx = canvas[0].getContext('2d');
    sei Bogenmaß = (Math.PI / 180) * 180;
    let startTime = Date.now();
    sei Zeit = 2000;
    sei im Uhrzeigersinn = 1;
    sei cp1x, cp1y, cp2x, cp2y;

    // Anfangszustand // ctx.bezierCurveTo(90, 28, 92, 179, 200, 100);
    // Endzustand // ctx.bezierCurveTo(145, 100, 41, 100, 200, 100);

    requestAnimationFrame(Funktion waveDraw() { 
        sei t = Math.min(1.0, (Date.now() - startTime) / Zeit);

        wenn (im Uhrzeigersinn) {
            cp1x = 90 + (55 * t);
            cp1y = 28 + (72 * t);
            cp2x = 92 – (51 * t);
            cp2y = 179 – (79 * t);
        } anders {
            cp1x = 145 – (55 * t);
            cp1y = 100 – (72 * t);
            cp2x = 41 + (51 * t);
            cp2y = 100 + (79 * t);
        }

        ctx.clearRect(0, 0, 200, 200); 
        ctx.beginPath();
        ctx.moveTo(0, 100);
        // Zeichnen Sie eine kubische Bézierkurve ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, 200, 100);
        // Einen Bogen zeichnen ctx.arc(100, 100, 100, 0, radians, 0);
        ctx.fillStyle = "rgba(154, 205, 50, .8)";
        ctx.fill();
        ctx.speichern(); 

        wenn( t == 1 ) {
            Startzeit = Datum.jetzt();
            im Uhrzeigersinn = !im Uhrzeigersinn;
        }

        AnfrageAnimationFrame(waveDraw);
    });
})

Es verwendet hauptsächlich die dynamische Zeichnung der kubischen Bézierkurve ctx.bezierCurveTo(), um den Wellenbewegungseffekt zu erzielen. Interessierte können es selbst studieren.

CSS zum Erzielen eines Welleneffekts

Haben Sie nicht am Anfang gesagt, dass CSS dies nicht leisten könne? Ja, wir können keine kubische Bézierkurve direkt zeichnen, aber wir können einige Tricks verwenden, um den Effekt der Wellenbewegung zu simulieren. Schauen wir uns diese Methode einmal an.

Prinzip

Das Prinzip ist ganz einfach. Wir alle wissen, dass wir einen Kreis erhalten, wenn wir zu einem Quadrat den Randradius von 50 % addieren.

Breite: 240px;
Höhe: 240px;
Hintergrund: #f13f84;
Randradius: 50 %;

OK, wenn der Rahmenradius nicht 50 % beträgt, sondern nahe bei 50 % liegt, erhalten wir eine Form wie diese (beachten Sie die Ecken, die gesamte Form fühlt sich ein wenig rund an, aber nicht ganz rund.)

Breite: 240px;
Höhe: 240px;
Hintergrund: #f13f84;
Randradius: 40 %;

Okay, was ist also der Sinn einer solchen Grafik? Kannst du Wellen erzeugen?

Drehen wir die obige Grafik, um den Effekt zu sehen:

CSS zum Erzielen eines Welleneffekts

@keyframes drehen{
    von {transform: drehen(0 Grad)}
    um {359 Grad} zu transformieren: zu drehen
}
.ripple{
    Breite: 240px;
    Höhe: 240px;
    Hintergrund: #f13f84;
    Randradius: 40 %;
    Animation: 3 s rotieren, linear, unendlich;
}

Vielen Menschen ist der Zweck der Rotation möglicherweise nicht klar, wenn sie dies sehen, aber bei genauerem Hinsehen erkennen Sie einen wellenförmigen Effekt, der dem einer Welle ähnelt.

Unser Ziel ist es, mit dieser sich dynamisch verändernden Wellenanimation einen wellenähnlichen Effekt zu simulieren.

erreichen

Was wir hier sehen, ist natürlich ein Panorama-Implementierungsdiagramm, daher ist es nicht sehr offensichtlich. OK, sehen wir uns anhand der Beispiele nacheinander an, welche Art von Effekt durch eine bestimmte Implementierung erzielt werden kann.

Wir können das obige Prinzip verwenden, um einen Wellenbewegungs-Hintergrundeffekt zu erzeugen:

Der schwebende Welleneffekt auf der Rückseite nutzt tatsächlich die Ellipse mit dem obigen Randradius: 40 %, ist aber um ein Vielfaches vergrößert. Die Grafiken außerhalb des Sichtfelds sind ausgeblendet, sodass nur eine Seite des Sichtfelds übrig bleibt, und einige entsprechende Transformationsänderungen werden hinzugefügt.

Einige Schüler haben möglicherweise noch Zweifel. OK, lassen Sie uns den obigen Effekt ausblenden und anzeigen und die Animation außerhalb des Sichtfelds abschließen. Dann lautet das Prinzip der Wellenerzeugung wie folgt:

Das rote Kästchen im Bild ist unser tatsächliches Sichtfeld.

Es ist erwähnenswert, dass wir hier Wellen nicht durch Verwendung der rotierenden Ellipse selbst erzeugen, sondern indem wir sie zum Schneiden des Hintergrunds verwenden, um den Welleneffekt zu erzeugen.

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.