Die Erstellung ansprechender Benutzeroberfl?chen erfordert oft ein empfindliches Gleichgewicht zwischen Funktionalit?t und optischer Attraktivit?t. In diesem Artikel erfahren Sie, wie Sie mit Svelte eine dynamische Bildrasterkomponente erstellen, die nicht nur den Status effizient verwaltet, sondern auch reibungslose, auff?llige überg?nge beim Ein- und Auswechseln von Bildern bietet.

Die Vision

Stellen Sie sich ein Bildraster vor, das sich regelm??ig aktualisiert, wobei einzelne Karten sanft umgedreht werden, um neue Bilder freizulegen.

Dadurch entsteht eine ansprechende Anzeige, die sich perfekt für die Pr?sentation von Teammitgliedern, Produktkatalogen oder einer beliebigen Bildersammlung eignet, die gr??er ist als das, was auf einmal angezeigt werden kann.

Das musste ich für ein Bildraster-Widget erstellen, das eine Mitgliederliste anzeigt. Die Bilder der Mitglieder stammen von einer API und wachsen mit der Zeit.

Ich habe beschlossen, dies mit Svelte zu bauen, denn warum nicht?!

Im Ernst, ich wollte etwas, das genau so viel Code kompiliert, wie n?tig, und nur einen sehr geringen Platzbedarf auf der Website hat.
Basierend darauf hatte ich zwei M?glichkeiten:

• Erstellen Sie es mit Vanilla-Javascript
• Verwenden Sie eine Javascript-Bibliothek, die ein wirklich kleines Paket produziert, insbesondere wenn man bedenkt, dass das Projekt auch sehr klein ist.

Au?erdem finde ich das schlanke Modell einfacher und intuitiver. Wenn ich also die Wahl habe, insbesondere bei einem kleinen Projekt wie diesem, werde ich standardm??ig darauf zurückgreifen.

Wie Sie etwas weiter unten sehen werden, macht Svelte den Umgang mit vielen kleinen und komplizierten Zustands?nderungen im Vergleich zu anderen L?sungen (wiederum pers?nlicher Geschmack) wirklich einfacher.
Normalerweise gibt es weniger M?glichkeiten, Dinge durcheinander zu bringen.

Kernkomponenten

Unsere Implementierung besteht aus zwei Hauptkomponenten von Svelte:

1. App.svelte – Die Hauptkomponente, die das Raster verwaltet und den Bildaustausch orchestriert
2. MemberImageCard.svelte – Einzelne Karten, die die Flip-Animation und Bildanzeige übernehmen

Staatsmanagement: Das Gehirn hinter dem Netz

Das Herzstück unseres Widgets liegt in seiner Statusverwaltung. Wir müssen mehrere Informationen verfolgen:

let allImages: Image[]; // All available images
let imagesToUse: Image[] = []; // Initial grid images
let imagesInUse: Image[] = []; // Current grid state
let remainingImages: Image[] = []; // Pool of unused images
let imagesSwapMap = new Map<number, Image>(); // Tracks pending swaps

Warum den aktuellen Status separat verfolgen?

Sie fragen sich vielleicht, warum wir imagesInUse getrennt von imagesToUse verwalten. Diese Trennung dient mehreren entscheidenden Zwecken:

1. Es bietet eine zentrale Informationsquelle für den aktuellen Netzstatus
2. Es hilft zu verhindern, dass doppelte Bilder im Raster erscheinen
3. Es erm?glicht effiziente Aktualisierungen ohne erneutes Rendern des gesamten Rasters
4. Es bewahrt die Netzintegrit?t w?hrend des Austauschvorgangs

Die Swap-Choreographie: Ein detaillierter Blick

Der Bildaustauschprozess ist eine sorgf?ltig orchestrierte Sequenz, die reibungslose überg?nge gew?hrleistet und gleichzeitig die Rasterintegrit?t beibeh?lt. Lassen Sie uns die Funktion ?switchImages“ Schritt für Schritt aufschlüsseln:

let allImages: Image[]; // All available images
let imagesToUse: Image[] = []; // Initial grid images
let imagesInUse: Image[] = []; // Current grid state
let remainingImages: Image[] = []; // Pool of unused images
let imagesSwapMap = new Map<number, Image>(); // Tracks pending swaps

1. Bilder aus dem Pool ausw?hlen

Zuerst müssen wir bestimmen, welche Bilder aus unserem verbleibenden Pool zum Austausch verwendet werden:

const switchImages = () => {
  let newImagesSwapMap = new Map<number, Image>()
  let remainingImagesToUse
  let newRemainingImages: Image[]

Dieser Code behandelt zwei Szenarien:

• Wenn uns die verbleibenden Bilder ausgehen, verwenden wir alle
• Andernfalls nehmen wir die letzten N Bilder aus unserem Pool, wobei N NUMBER_OF_IMAGES_TO_SWITCH ist

2. Auswahl der Rasterpositionen

Als n?chstes w?hlen wir zuf?llig Positionen im Raster aus, an denen wir Bilder austauschen:

if (remainingImages.length <= NUMBER_OF_IMAGES_TO_SWITCH) {
 // If we have fewer remaining images than needed, use all of them
 remainingImagesToUse = remainingImages.slice(0);
 newRemainingImages = [];
} else {
 // Take the last N images from the remaining pool
 remainingImagesToUse = remainingImages.slice(-NUMBER_OF_IMAGES_TO_SWITCH);
 // Keep the rest for future swaps
 newRemainingImages = remainingImages.slice(0, -NUMBER_OF_IMAGES_TO_SWITCH);
}

Dadurch wird ein Array zuf?lliger Indizes innerhalb unserer Rastergr??e erstellt. Wenn beispielsweise NUMBER_OF_IMAGES_TO_SWITCH 1 und NUMBER_OF_IMAGES_TO_USE 16 ist, erhalten wir m?glicherweise [7], was bedeutet, dass wir das Bild an Position 7 im Raster austauschen.

3. Duplikate verhindern

Bevor wir einen Austausch durchführen, prüfen wir, ob das neue Bild bereits angezeigt wird:

indexesToSwap = Array(NUMBER_OF_IMAGES_TO_SWITCH)
 .fill(null)
 .map(() => Math.floor(Math.random() * NUMBER_OF_IMAGES_TO_USE));

Diese Funktion verhindert, dass dasselbe Bild mehrmals in unserem Raster erscheint.

4. Die Swap-Operation

Jetzt kommt die grundlegende Austauschlogik:

const imageIsInUse = (image: Image) => {
 const inUse = imagesInUse.find((img: Image) => image.picture_url === img.picture_url);
 return inUse;
};

Lassen Sie uns zusammenfassen, was bei jedem Tausch passiert:

1. Wir erhalten die zuf?llig ausgew?hlte Position (Index)
2. Wir identifizieren das aktuelle Bild an dieser Position (imageToSwap)
3. Wir nehmen ein neues Bild aus unserem Pool (imageToSwapWith)
4. Wenn das neue Bild gültig ist und noch nicht angezeigt wird:
   • Wir zeichnen den Tausch in imagesSwapMap auf
   • Wir aktualisieren den Rasterstatus in imagesInUse
   • Wir fügen das alte Bild zu Beginn wieder dem Pool hinzu

5. Den Staat finalisieren

Nachdem wir alle Tauschvorg?nge durchgeführt haben, aktualisieren wir unseren Status:

for (let i = 0; i < indexesToSwap.length; i++) {
 let index = indexesToSwap[i];
 let imageToSwap = imagesInUse[index]; // Current image in the grid
 let imageToSwapWith = remainingImagesToUse.pop(); // New image to display

 if (imageToSwapWith && !imageIsInUse(imageToSwapWith)) {
  // Record the swap in our map
  newImagesSwapMap.set(index, imageToSwapWith);
  // Update the swap map to trigger component updates
  imagesSwapMap = newImagesSwapMap;
  // Update the grid state
  imagesInUse[index] = imageToSwapWith;
  // Add the old image back to the pool
  newRemainingImages.unshift(imageToSwap);
 } else {
  return; // Skip if the image is already in use
 }
}

6. Ausl?sen der Animation

Die imagesSwapMap ist der Schlüssel zum Ausl?sen von Animationen. Bei der Aktualisierung reagieren die relevanten MemberImageCard-Komponenten:

remainingImages = newRemainingImages;
imagesInUse = imagesInUse;

Diese reaktive Aussage in MemberImageCard:

1. Erkennt, wenn seine Position an einem Tausch beteiligt ist
2. Ladet das neue Bild auf die gegenüberliegende Seite der Karte
3. L?st die Flip-Animation durch ?ndern von faceOnDisplay aus
4. Setzt den Bildladestatus für reibungslose überg?nge zurück

Das Sch?ne an diesem System ist, dass es ein reibungsloses Benutzererlebnis gew?hrleistet und gleichzeitig Folgendes gew?hrleistet:

• Im Raster werden keine doppelten Bilder angezeigt
• Bilder werden effizient durchlaufen
• Das Gitter beh?lt immer seine Struktur bei
• Animationen erfolgen reibungslos und vorhersehbar
• Fehlgeschlagene Swaps (aufgrund von Duplikaten) werden ordnungsgem?? behandelt

Die Flip-Animation: Machen Sie es reibungslos

Jede MemberImageCard-Komponente verwaltet ihre eigene Flip-Animation mithilfe von CSS-Transformationen und -überg?ngen. Die Magie geschieht durch eine Kombination aus Statusverfolgung und CSS:

let allImages: Image[]; // All available images
let imagesToUse: Image[] = []; // Initial grid images
let imagesInUse: Image[] = []; // Current grid state
let remainingImages: Image[] = []; // Pool of unused images
let imagesSwapMap = new Map<number, Image>(); // Tracks pending swaps

const switchImages = () => {
  let newImagesSwapMap = new Map<number, Image>()
  let remainingImagesToUse
  let newRemainingImages: Image[]

Wenn ein Bild ausgetauscht werden muss, tun wir Folgendes:

1. Laden Sie das neue Bild auf der Rückseite
2. L?sen Sie die Flip-Animation aus
3. Bereinigen Sie das alte Bild, sobald der Flip abgeschlossen ist

Progressives Laden für bessere UX

Um das Benutzererlebnis zu verbessern, haben wir einen progressiven Ladeeffekt implementiert:

if (remainingImages.length <= NUMBER_OF_IMAGES_TO_SWITCH) {
 // If we have fewer remaining images than needed, use all of them
 remainingImagesToUse = remainingImages.slice(0);
 newRemainingImages = [];
} else {
 // Take the last N images from the remaining pool
 remainingImagesToUse = remainingImages.slice(-NUMBER_OF_IMAGES_TO_SWITCH);
 // Keep the rest for future swaps
 newRemainingImages = remainingImages.slice(0, -NUMBER_OF_IMAGES_TO_SWITCH);
}

Bilder beginnen unscharf und werden nach dem Laden sanft eingeblendet, was für ein ausgefeiltes Erscheinungsbild sorgt.

Den Tanz planen

Der regelm??ige Bildaustausch wird mithilfe der onMount-Lebenszyklusfunktion von Svelte geplant:

indexesToSwap = Array(NUMBER_OF_IMAGES_TO_SWITCH)
 .fill(null)
 .map(() => Math.floor(Math.random() * NUMBER_OF_IMAGES_TO_USE));

Abschluss

Diese Implementierung demonstriert die Leistungsf?higkeit der reaktiven F?higkeiten von Svelte in Kombination mit modernen CSS-Transformationen, um eine dynamische, ansprechende UI-Komponente zu erstellen.

Das obige ist der detaillierte Inhalt vonErstellen eines dynamischen Bildrasters mit Svelte: Implementierung von Flip-Card-überg?ngen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!