Das perfekte coole Auflösungs- Übergangseffekt

Wir werden einen beeindruckenden Übergangseffekt zwischen Bildern erstellen, der, wenn ich das so sagen darf, sehr einfach zu implementieren und auf jeder Website anzuwenden ist. Wir werden die kampos Bibliothek verwenden, da sie genau das, was wir brauchen, sehr gut beherrscht. Wir werden auch einige mögliche Wege erkunden, um das Ergebnis zu optimieren, damit Sie es für Ihre Bedürfnisse einzigartig gestalten und an das Erlebnis und den Eindruck anpassen können, den Sie erzeugen.

Werfen Sie einen Blick auf die Awwwards Transitions Collection und Sie werden ein Gefühl dafür bekommen, wie beliebt es ist, immersive Effekte zu erzielen, wie z. B. die Umwandlung eines Medienobjekts in ein anderes. Viele dieser Beispiele verwenden WebGL für die Aufgabe. Eine weitere Gemeinsamkeit ist die Verwendung von Texture Mapping für einen Verdrängungs- oder Auflösungseffekt (oder beides).

Um diese Effekte zu erzielen, benötigen Sie die beiden Medienquellen, von denen Sie den Übergang weg und zu machen möchten, sowie eine weitere, die die Map ist, oder ein Raster von Werten für jedes Pixel, das bestimmt, wann und wie stark das Medium von einem Bild zum nächsten wechselt. Diese Map kann ein fertiges Bild sein oder ein <canvas>, auf das gezeichnet wird, z. B. Rauschen. Die Verwendung eines Auflösungsübergangseffekts durch Anwenden von Rauschen als Map ist definitiv eines der Dinge, die das immersive Web-Erlebnis steigern können. Darum geht es uns.

Szene einrichten

Bevor wir zur schweren Maschinerie übergehen können, benötigen wir eine einfache DOM-Szene. Zwei Bilder (oder Videos, wenn Sie möchten) und die minimale Menge an JavaScript, um sicherzustellen, dass sie geladen und für die Manipulation bereit sind.

<main>
  <section>
    <figure>
      <canvas id="target">
        <img id="source-from" src="path/to/first.jpg" alt="My first image" />
        <img id="source-to" data-src="path/to/second.jpg" alt="My second image" />
      </canvas>
    <figure>
  </section>
</main>

Dies gibt uns ein minimales DOM zum Arbeiten und zur Anzeige unserer Szene. Die Bühne ist bereit; nun laden wir unsere Hauptdarsteller, die beiden Bilder, ein.

// Notify when our images are ready
function loadImage (src) {
  return new Promise(resolve => {
    const img = new Image();
    img.onload = function () {
      resolve(this);
    };
    img.src = src;
  });
}
// Get the image URLs
const imageFromSrc = document.querySelector('#source-from').src;
const imageToSrc = document.querySelector('#source-to').dataset.src;
// Load images  and keep their promises so we know when to start
const promisedImages = [
  loadImage(imageFromSrc),
  loadImage(imageToSrc)
];

Erstellung der Auflösungskarte

Die Szene ist eingerichtet, die Bilder sind geladen – machen wir etwas Magie! Wir beginnen mit der Erstellung der benötigten Effekte. Zuerst erstellen wir die Auflösungskarte, indem wir etwas Rauschen erzeugen. Wir verwenden ein klassisches Perlin-Rauschen innerhalb eines Turbulenzeffekts, der das Rauschen in verschiedenen Skalen übereinander stapelt und es auf einem <canvas> in Graustufen rendert.

const turbulence = kampos.effects.turbulence({ noise: kampos.noise.perlinNoise });

Dieser Effekt funktioniert ähnlich wie der SVG feTurbulence Filtereffekt. Es gibt einige gute Beispiele dafür in Bence Szabós „Creating Patterns With SVG Filters“.

Zweitens legen wir die Anfangsparameter des Turbulenzeffekts fest. Diese können später angepasst werden, um die spezifischen gewünschten visuellen Effekte zu erzielen, die wir möglicherweise pro Fall benötigen.

// Depending of course on the size of the target canvas
const WIDTH = 854;
const HEIGHT = 480;
const CELL_FACTOR = 2;
const AMPLITUDE = CELL_FACTOR / WIDTH;

turbulence.frequency = {x: AMPLITUDE, y: AMPLITUDE};
turbulence.octaves = 1;
turbulence.isFractal = true;

Dieser Code liefert uns eine schöne flüssigkeitsähnliche oder blob-artige Rauschtextur. Der resultierende Übergang lässt das erste Bild in das zweite Bild einsinken. Der Wert CELL_FACTOR kann erhöht werden, um eine dichtere Textur mit kleineren Blobs zu erzeugen, während octaves=1 dafür sorgt, dass das Rauschen blob-artig bleibt. Beachten Sie, dass wir auch die Amplitude auf mindestens die größere Seite des Mediums normalisieren, damit die Textur schön über unser Bild gestreckt wird.

Als nächstes rendern wir die Auflösungskarte. Um zu sehen, was wir bekommen haben, verwenden wir vorerst den bereits im DOM vorhandenen Canvas.

const mapTarget = document.querySelector('#target'); // instead of document.createElement('canvas');
mapTarget.width = WIDTH;
mapTarget.height = HEIGHT;

const dissolveMap = new kampos.Kampos({
  target: mapTarget,
  effects: [turbulence],
  noSource: true
});
dissolveMap.draw();

Zwischenspiel

Wir pausieren hier und untersuchen, wie sich die Änderung der obigen Parameter auf die visuellen Ergebnisse auswirkt. Nun passen wir einige der Rauscheinstellungen an, um etwas zu erhalten, das eher rauchähnlich als flüssigkeitsähnlich ist, sagen wir.

const CELL_FACTOR = 4; // instead of 2

Und auch das

turbulence.octaves = 8; // instead of 1

Jetzt haben wir ein dichteres Muster mit acht überlagerten Ebenen (statt einer), was für viel mehr Details sorgt.

Fantastisch! Nun zurück zu den ursprünglichen Werten und weiter zu unserem Hauptpunkt...

Erstellung des Übergangs

Es ist Zeit, den Übergangseffekt zu erstellen.

const dissolve = kampos.transitions.dissolve();
dissolve.map = mapTarget;
dissolve.high = 0.03; // for liquid-like effect

Beachten Sie den obigen Wert für high? Dieser ist wichtig, um diese flüssigkeitsähnlichen Ergebnisse zu erzielen. Der Übergang verwendet eine Schrittfunktion, um zu bestimmen, ob das erste oder das zweite Medium angezeigt werden soll. Während dieses Schritts wird der Übergang sanft durchgeführt, sodass wir weiche Kanten anstelle von gezackten erhalten. Wir behalten jedoch die untere Kante des Schritts bei 0.0 (Standard). Sie können sich vorstellen, dass ein Übergang von 0.0 auf 0.03 sehr abrupt ist, was zu einer schnellen Änderung von einem Medium zum nächsten führt. Denken Sie daran als Clipping.

Wenn der Bereich hingegen 0.0 bis 0.5 wäre, bekämen wir einen größeren Bereich an „Transparenz“ oder eine Mischung aus den beiden Bildern – ähnlich wie bei teilweiser Opazität – und wir bekämen einen rauch- oder wolkenähnlichen Effekt. Das werden wir gleich ausprobieren.

Bevor wir fortfahren, müssen wir daran denken, den Canvas, den wir aus dem Dokument erhalten haben, durch einen neuen zu ersetzen, den wir außerhalb des DOM erstellen, wie folgt.

const mapTarget = document.createElement('canvas');

Einstöpseln und… Action!

Wir sind fast fertig! Erstellen wir unsere Compositor-Instanz.

const target = document.querySelector('#target');
const hippo = new kampos.Kampos({target, effects: [dissolve]});

Und schließlich die Bilder abrufen und den Übergang abspielen.

Promise.all(promisedImages).then(([fromImage, toImage]) => {
  hippo.setSource({media: fromImage, width, height});
  dissolve.to = toImage;
  hippo.play(time => {
    // a sin() to play in a loop
    dissolve.progress = Math.abs(Math.sin(time * 4e-4)); // multiply time by a factor to slow it down a bit
  });
});

Super!

Spezialeffekte

OK, wir haben diese Blob-Güte bekommen. Wir können ein wenig mit den Parametern spielen, um ein ganz anderes Ergebnis zu erzielen. Zum Beispiel etwas Rauchähnlicheres.

const CELL_FACTOR = 4;
turbulence.octaves = 8;

Und für einen sanfteren Übergang erhöhen wir die obere Grenze der Schrittfunktion des Übergangs.

dissolve.high = 0.3;

Nun haben wir das hier.

Extra Spezialeffekte

Und als letzten Wendepunkt animieren wir auch das Rauschen selbst! Zuerst müssen wir sicherstellen, dass kampos die Auflösungskarten-Textur bei jedem Frame aktualisiert, was es standardmäßig nicht tut.

dissolve.textures[1].update = true;

Dann wollen wir bei jedem Frame die time-Eigenschaft der Turbulenz fortschreiten und sie neu zeichnen. Wir verlangsamen auch den Übergang, damit wir das sich ändernde Rauschen sehen können, während der Übergang stattfindet.

hippo.play(time => {
  turbulence.time = time * 2;
  dissolveMap.draw();
  // Notice that the time factor is smaller here
  dissolve.progress = Math.abs(Math.sin(time * 2e-4));
});

Und wir erhalten das hier.

Das ist alles!

Abgang… rechts

Dies ist nur ein Beispiel dafür, was wir mit kampos für Medienübergänge tun können. Es liegt nun an Ihnen, die Zutaten zu mischen, um das Beste daraus zu machen. Hier sind einige Ideen, um Ihnen den Einstieg zu erleichtern.

• Übergang zwischen Website-/Abschnittshintergründen
• Übergang zwischen Hintergründen in einer Bildkarussell
• Hintergrundwechsel als Reaktion auf einen Klick oder Hover
• Entfernen eines benutzerdefinierten Posterbildes von einem Video, wenn es zu spielen beginnt

Was auch immer Sie tun, lassen Sie es uns in den Kommentaren wissen.