創(chuàng)建引人入勝的用戶界面通常需要在功能和視覺吸引力之間取得微妙的平衡。在本文中，我們將探索如何使用 Svelte 構(gòu)建動態(tài)圖像網(wǎng)格組件，該組件不僅可以有效管理狀態(tài)，而且可以在圖像換入和換出時提供平滑、引人注目的過渡。

愿景

想象一個定期刷新自身的圖像網(wǎng)格，各個卡片平滑地翻轉(zhuǎn)以顯示新圖像。

這創(chuàng)建了一個引人入勝的顯示，非常適合展示團(tuán)隊(duì)成員、產(chǎn)品目錄或任何大于一次顯示的圖像集合。

這就是我必須為顯示成員列表的圖像網(wǎng)格小部件構(gòu)建的內(nèi)容。會員圖像來自 API，并隨著時間的推移而增長。

我決定用 Svelte 構(gòu)建這個，因?yàn)闉槭裁床荒?？?/p>

更認(rèn)真地說，我想要的東西將被編譯為所需的必要代碼量，并且在網(wǎng)站上占用的空間非常小。
基于此，我有兩個選擇：

• 使用 vanilla javascript 構(gòu)建它
• 使用一個 javascript 庫，它將生成一個非常小的包，特別是考慮到該項(xiàng)目也非常小。

此外，我發(fā)現(xiàn) svelte 模型更簡單、更直觀，因此如果有選擇，尤其是在像這樣的小項(xiàng)目上，我將默認(rèn)使用它。

正如您進(jìn)一步看到的那樣，與其他解決方案相比，svelte 使得處理許多小而復(fù)雜的狀態(tài)變化變得非常簡單（同樣，個人品味）。
通常，把事情搞砸的方法會更少。

核心組件

我們的實(shí)現(xiàn)由兩個主要的 Svelte 組件組成：

1. App.svelte - 管理網(wǎng)格和協(xié)調(diào)圖像交換的主要組件
2. MemberImageCard.svelte - 處理翻轉(zhuǎn)動畫和圖像顯示的單獨(dú)卡片

狀態(tài)管理：網(wǎng)格背后的大腦

我們小部件的核心在于它的狀態(tài)管理。我們需要追蹤幾條信息：

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

為什么要單獨(dú)跟蹤當(dāng)前狀態(tài)？

您可能想知道為什么我們將 imagesInUse 與 imagesToUse 分開維護(hù)。這種分離有幾個重要目的：

1. 它為當(dāng)前網(wǎng)格狀態(tài)提供單一事實(shí)來源
2. 它有助于防止重復(fù)的圖像出現(xiàn)在網(wǎng)格中
3. 它可以實(shí)現(xiàn)高效更新，無需完全網(wǎng)格重新渲染
4. 它在交換操作期間保持網(wǎng)格完整性

交換編排：詳細(xì)觀察

圖像交換過程是一個精心策劃的序列，可確保平滑過渡，同時保持網(wǎng)格完整性。讓我們一步步分解 switchImages 函數(shù)：

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. 從池中選擇圖像

首先，我們需要確定剩余池中的哪些圖像將用于交換：

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

此代碼處理兩種情況：

• 如果剩余圖像不足，我們會使用所有圖像
• 否則，我們從池中獲取最后 N 張圖像，其中 N 是 NUMBER_OF_IMAGES_TO_SWITCH

2. 選擇網(wǎng)格位置

接下來，我們在網(wǎng)格中隨機(jī)選擇要交換圖像的位置：

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);
}

這會在我們的網(wǎng)格大小內(nèi)創(chuàng)建一個隨機(jī)索引數(shù)組。例如，如果 NUMBER_OF_IMAGES_TO_SWITCH 為 1 并且 NUMBER_OF_IMAGES_TO_USE 為 16，我們可能會得到 [7]，表示我們將交換網(wǎng)格中位置 7 的圖像。

3. 防止重復(fù)

在執(zhí)行任何交換之前，我們檢查新圖像是否已顯示：

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

此功能可防止同一圖像在我們的網(wǎng)格中多次出現(xiàn)。

4. 互換操作

現(xiàn)在是核心交換邏輯：

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

讓我們分解一下每次交換中會發(fā)生什么：

1. 我們得到隨機(jī)選擇的位置（索引）
2. 我們識別該位置的當(dāng)前圖像（imageToSwap）
3. 我們從池中獲取新圖像 (imageToSwapWith)
4. 如果新圖像有效且尚未顯示：
   • 我們將交換記錄在imagesSwapMap中
   • 我們更新imagesInUse中的網(wǎng)格狀態(tài)
   • 我們在開始時將舊圖像添加回池中

5. 確定狀態(tài)

執(zhí)行所有交換后，我們更新狀態(tài)：

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. 觸發(fā)動畫

imagesSwapMap是觸發(fā)動畫的關(guān)鍵。當(dāng)它更新時，相關(guān)的 MemberImageCard 組件會做出反應(yīng)：

remainingImages = newRemainingImages;
imagesInUse = imagesInUse;

MemberImageCard 中的此反應(yīng)語句：

1. 檢測其位置何時涉及交換
2. 在卡片的反面加載新圖像
3. 通過改變faceOnDisplay觸發(fā)翻轉(zhuǎn)動畫
4. 重置圖像加載狀態(tài)以實(shí)現(xiàn)平滑過渡

這個系統(tǒng)的美妙之處在于它保持流暢的用戶體驗(yàn)，同時確保：

• 網(wǎng)格中沒有出現(xiàn)重復(fù)的圖像
• 圖像高效循環(huán)
• 網(wǎng)格始終保持其結(jié)構(gòu)
• 動畫順利且可預(yù)測地發(fā)生
• 失敗的交換（由于重復(fù)）會得到妥善處理

翻轉(zhuǎn)動畫：使其平滑

每個 MemberImageCard 組件使用 CSS 變換和過渡來管理自己的翻轉(zhuǎn)動畫。神奇的事情是通過狀態(tài)跟蹤和 CSS 的結(jié)合來實(shí)現(xiàn)的：

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[]

當(dāng)圖像需要交換時，我們：

1. 在反面加載新圖像
2. 觸發(fā)翻轉(zhuǎn)動畫
3. 翻轉(zhuǎn)完成后清理舊圖像

漸進(jìn)式加載以獲得更好的用戶體驗(yàn)

為了增強(qiáng)用戶體驗(yàn)，我們實(shí)現(xiàn)了漸進(jìn)式加載效果：

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);
}

加載后圖像開始模糊并平滑淡入，提供精美的外觀和感覺。

安排舞蹈

定期圖像交換是使用 Svelte 的 onMount 生命周期函數(shù)安排的：

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

結(jié)論

此實(shí)現(xiàn)展示了 Svelte 反應(yīng)功能與現(xiàn)代 CSS 轉(zhuǎn)換相結(jié)合的強(qiáng)大功能，可創(chuàng)建動態(tài)、引人入勝的 UI 組件。

以上是使用 Svelte 構(gòu)建動態(tài)圖像網(wǎng)格：實(shí)現(xiàn)翻轉(zhuǎn)卡過渡的詳細(xì)內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！