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

願(yuàn)景

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

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

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

我決定用 Svelte 建造這個(gè)，因?yàn)闉槭颤N不呢？ ！

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

• 使用 vanilla javascript 建構(gòu)它
• 使用一個(gè) javascript 函式庫，它將產(chǎn)生一個(gè)非常小的包，特別是考慮到該專案也非常小。

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

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

核心組件

我們的實(shí)作由兩個(gè)主要的 Svelte 元件組成：

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

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

我們小部件的核心在於它的狀態(tài)管理。我們需要追蹤幾個(gè)訊息：

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ù)。這種分離有幾個(gè)重要目的：

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

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

影像交換過程是一個(gè)精心策劃的序列，可確保平滑過渡，同時(shí)保持網(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[]

此程式碼處理兩種情況：

• 如果剩餘影像不足，我們會(huì)使用所有影像
• 否則，我們從池中取得最後 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);
}

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

3. 防止重複

在執(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;
};

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

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

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ā)動(dòng)畫

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

remainingImages = newRemainingImages;
imagesInUse = imagesInUse;

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

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

這個(gè)系統(tǒng)的美妙之處在於它保持流暢的使用者體驗(yàn)，同時(shí)確保：

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

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

每個(gè) MemberImageCard 元件使用 CSS 變換和轉(zhuǎn)換來管理自己的翻轉(zhuǎn)動(dòng)畫。神奇的事情是透過狀態(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)影像需要交換時(shí)，我們：

1. 在反面載入新圖片
2. 觸發(fā)翻轉(zhuǎn)動(dòng)畫
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í)作展示了 Svelte 反應(yīng)功能與現(xiàn)代 CSS 轉(zhuǎn)換相結(jié)合的強(qiáng)大功能，可建立動(dòng)態(tài)、引人入勝的 UI 元件。

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