CSS Houdini erzielt einen dynamischen Welleneffekt

CSS Houdini gilt als die aufregendste Innovation im CSS-Bereich. CSS selbst verfügt seit langem nicht über Syntaxfunktionen, seine Skalierbarkeit liegt bei nahezu null, seine Unterstützungseffizienz für neue Funktionen ist zu gering und seine Kompatibilität mangelhaft. Houdini stellt die CSS-API direkt für Entwickler bereit. Der zuvor völlig undurchsichtige Analysefluss des Browsers ist nun für die Außenwelt offen und Entwickler können ihre eigenen CSS-Eigenschaften anpassen.

Hintergrund

Wir wissen, dass ein Browser beim Rendern einer Seite zuerst das HTML und CSS der Seite analysiert, einen Rendering-Baum generiert und dann den gesamten Seiteninhalt durch Layout und Malerei präsentiert. Vor dem Aufkommen von Houdini hatten wir in diesem Prozess nur sehr wenig Spielraum, insbesondere in den Layout- und Malphasen, die vollständig geschlossen waren, was die Flexibilität von CSS stark einschränkte. Das Aufkommen von CSS-Vorverarbeitungstechnologien wie Sass, Less und Stylus in der Community ist hauptsächlich auf diesen Grund zurückzuführen. Sie alle hoffen, die Einschränkungen von CSS durch Vorkompilierung zu überwinden und CSS leistungsfähigere Organisations- und Schreibfunktionen zu verleihen. Nach und nach schreiben wir CSS nicht mehr von Hand und die bequemere und flexiblere CSS-Erweiterungssprache wird zum Protagonisten der Webentwicklung. Als CSS Houdini diese Situation sah, konnte er schließlich nicht mehr still sitzen.

Was ist CSS Houdini?

CSS Houdini öffnet eine Reihe von APIs für den Browser-Parsing-Prozess. Diese APIs ermöglichen Entwicklern, in den Betrieb der CSS-Engine des Browsers einzugreifen und so weitere CSS-Lösungen bereitzustellen.

CSS Houdini bietet hauptsächlich die folgenden APIs:

CSS-Eigenschaften und Werte-API

Ermöglicht Ihnen, Variablen in CSS zu definieren und zu verwenden und ist derzeit die kompatibelste API;

Layout-API

Ermöglichen Sie Entwicklern, ihre eigenen Layoutmodule zu schreiben und Layouteigenschaften wie die Anzeige anzupassen;

Malerei-API

Ermöglicht Entwicklern, eigene Paint-Module zu schreiben und Zeicheneigenschaften wie das Hintergrundbild anzupassen.

Grundlagen: Die Painting API in drei Schritten nutzen

1. Benutzerdefinierter Code zum Laden von Stilen in HTML über Worklets:

<div Klasse="rect"></div>
<Skript>
  wenn ("paintWorklet" in CSS) {
    CSS.paintWorklet.addModule("paintworklet.js");
  }
</Skript>

Worklets ist auch eine der von Houdini bereitgestellten APIs und verantwortlich für das Laden und Ausführen von benutzerdefiniertem JS-Code für Stile. Es ähnelt Web Worker, einem unabhängigen Arbeitsprozess, der außerhalb des Hauptcodes ausgeführt wird, ist jedoch leichter als Worker und eignet sich am besten für CSS-Rendering-Aufgaben.

2. Erstellen Sie ein paintworklet.js, registrieren Sie ein Rechteck der Paint-Klasse mit der Methode registerPaint und definieren Sie die Zeichenlogik des Paint-Attributs:

registerPaint(
  "Rechteck",
  Klasse {
    statisch get inputProperties() {
      zurückgeben ["--rect-color"];
    }
    Farbe(ctx, Geom, Eigenschaften) {
      const Farbe = Eigenschaften.get("--rect-color")[0];
      ctx.fillStyle = Farbe;
      ctx.fillRect(0, 0, geom.Breite, geom.Höhe);
    }
  }
);

Oben wurde eine Paint-Attributklasse mit dem Namen rect definiert. Wenn rect verwendet wird, wird rect instanziiert und die Paint-Methode wird automatisch ausgelöst, um das Rendering durchzuführen. In der Paint-Methode holen wir uns die durch das CSS des Knotens definierte Variable --rect-color und füllen den Hintergrund des Elements mit der angegebenen Farbe. Der ctx-Parameter ist ein Canvas-Kontextobjekt, daher ist die Mallogik dieselbe wie die Canvas-Zeichenmethode.

3. Rufen Sie bei Verwendung in CSS einfach die Paint-Methode auf:

.rect {
  Breite: 100vw;
  Höhe: 100vh;
  Hintergrundbild: Farbe (Rechteck);
  --Rechteckfarbe: rgb(255, 64, 129);
}

Dies ist eine einfache Implementierung einer benutzerdefinierten CSS-Hintergrundfarbeigenschaft. Es ist ersichtlich, dass wir durch die Verwendung von CSS Houdini die gewünschten Stilfunktionen so flexibel erreichen können wie das Bedienen von Canvas.

Erweitert: Dynamische Ripples implementieren

Anhand der obigen Schritte zeigen wir, wie Sie mit der CSS Painting API einen dynamischen Welleneffekt erzielen:

<!-- index.html -->
<div id="Welle"></div>

<Stil>
  #Welle {
    Breite: 20 %;
    Höhe: 70vh;
    Rand: 10vh automatisch;
    Hintergrundfarbe: #ff3e81;
    Hintergrundbild: Farbe (Welle);
  }
</Stil>

<Skript>
  wenn ("paintWorklet" in CSS) {
    CSS.paintWorklet.addModule("paintworklet.js");

    const wave = document.querySelector("#wave");
    lass tick = 0;  
    requestAnimationFrame(Funktion raf(jetzt) ​​{
      Häkchen += 1;
      wave.style.cssText = `--animation-tick: ${tick};`;
      AnfrageAnimationFrame(raf);
    });
  }
</Skript>

// paintworklet.js
registerPaint('Welle', Klasse {
  statisch get inputProperties() {
    zurück ['--animation-tick'];
  }
  Farbe(ctx, Geom, Eigenschaften) {
    let tick = Zahl(Eigenschaften.get('--animation-tick'));
    Konstante {
      Breite,
      Höhe
    } = geom;
    const initY = Höhe * 0,4;
    Häkchen = Häkchen * 2;

    ctx.beginPath();
    ctx.moveTo(0, initY + Math.sin(tick / 20) * 10);
    für (lass i = 1; i <= Breite; i++) {
      ctx.lineTo(i, initY + Math.sin((i + tick) / 20) * 10);
    }
    ctx.lineTo(Breite, Höhe);
    ctx.lineTo(0, Höhe);
    ctx.lineTo(0, initY + Math.sin(tick / 20) * 10);
    ctx.closePath();

    ctx.fillStyle = "rgba(255, 255, 255, 0,5)";
    ctx.fill();
  }
})

In Paintworklet wird die Sinusfunktion zum Zeichnen der Wellenlinien verwendet. Da sich AnimationWorklets noch im experimentellen Stadium befindet und nur über begrenzte Offenheit verfügt, verwenden wir die API requestAnimationFrame außerhalb des Worklets, um die Animation zu steuern und die Wellenlinien zu bewegen. Wenn Sie fertig sind, sehen Sie den Effekt unten.

Tatsächlich ist dieser Effekt jedoch etwas starr. Die Sinusfunktion ist zu regelmäßig. In Wirklichkeit sollten Wellen unregelmäßig schwanken. Diese Unregelmäßigkeit spiegelt sich hauptsächlich in zwei Aspekten wider:

1) Die Wellenhöhe (Y) ändert sich unregelmäßig mit der Position (X)

Nachdem wir den Graphen orthogonal gemäß xy zerlegt haben, kann die erhoffte Unregelmäßigkeit als unregelmäßige Änderung der Welligkeitshöhe y betrachtet werden, wenn sich die x-Achse zu einem festen Zeitpunkt ändert.

2) Ein fester Punkt (X ist fest), die Wellenhöhe (Y) ändert sich im Laufe der Zeit unregelmäßig

Der dynamische Prozess muss die Zeitdimension berücksichtigen. Die von uns erhoffte Unregelmäßigkeit muss sich auch im Einfluss der Zeit widerspiegeln. Beispielsweise wird sich die Wellenhöhe an derselben Position definitiv eine Sekunde vor und eine Sekunde nach dem Wind unregelmäßig ändern.

Wenn es um Unregelmäßigkeiten geht, denken manche Freunde vielleicht daran, die Math.random-Methode zu verwenden. Die Unregelmäßigkeit hier ist jedoch nicht für die Implementierung mit Zufallszahlen geeignet, da die zweimal genommenen Zufallszahlen diskontinuierlich sind, während die Wellen der beiden Punkte davor und danach kontinuierlich sind. Das ist nicht schwer zu verstehen. Haben Sie schon einmal zackige Wellen gesehen? Oder haben Sie schon einmal eine Welle gesehen, die in einem Moment 10 Meter hoch war und im nächsten auf 2 Meter abfiel?

Um diese kontinuierliche unregelmäßige Eigenschaft zu erreichen, verzichten wir auf die Sinusfunktion und führen ein Paket mit Simplex-Rauschen ein. Da es zwei Dimensionen gibt, die die Wellenhöhe beeinflussen, Position X und Zeit T, wird hier die Methode noise2D benötigt. Sie konstruiert im Voraus eine kontinuierliche unregelmäßige Oberfläche in einem dreidimensionalen Raum:

// paintworklet.js
importiere SimplexNoise von „simplex-noise“;
const sim = neues SimplexNoise(() => 1);

registerPaint('Welle', Klasse {
  statisch get inputProperties() {
    zurück ['--animation-tick'];
  }

  Farbe(ctx, Geom, Eigenschaften) {
    const tick = Zahl(Eigenschaften.get('--animation-tick'));

    this.drawWave(ctx, geom, 'rgba(255, 255, 255, 0.4)', 0.004, tick, 15, 0.4);
    this.drawWave(ctx, geom, 'rgba(255, 255, 255, 0,5)', 0,006, Tick, 12, 0,4);
  }
  
  /**
   * Wellen zeichnen */
  zeichneWelle(ctx, geom, Füllfarbe, Verhältnis, Tick, Amp, ih) {
    Konstante {
      Breite,
      Höhe
    } = geom;
    const initY = Höhe * ih;
    const speedT = Tick * Verhältnis;

    ctx.beginPath();
    für (lass x = 0, GeschwindigkeitX = 0; x <= Breite; x++) {
      GeschwindigkeitX += Verhältnis * 1;
      var y = initY + sim.noise2D(GeschwindigkeitX, GeschwindigkeitT) * Ampere;
      ctx[x === 0 ? 'VerschiebeZu' : 'ZeileZu'](x, y);
    }
    ctx.lineTo(Breite, Höhe);
    ctx.lineTo(0, Höhe);
    ctx.lineTo(0, initY + sim.noise2D(0, speedT) * amp);
    ctx.closePath();

    ctx.fillStyle = Füllfarbe;
    ctx.fill();
  }
})

Durch Ändern von Parametern wie Peak und Bias können Sie ein anderes Wellenmuster zeichnen. Der Effekt ist wie folgt. Fertig!

Zusammenfassen

Oben ist der CSS Houdini, den ich Ihnen vorgestellt habe, um dynamische Welleneffekte zu erzielen. Ich hoffe, es wird Ihnen hilfreich sein. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und ich werde Ihnen rechtzeitig antworten. Ich möchte auch allen für ihre Unterstützung der Website 123WORDPRESS.COM danken!
Wenn Sie diesen Artikel hilfreich finden, können Sie ihn gerne abdrucken und dabei bitte die Quelle angeben. Vielen Dank!