Membina grid imej dinamik dengan Svelte: melaksanakan peralihan kad selak

Mencipta antara muka pengguna yang menarik selalunya memerlukan keseimbangan yang halus antara fungsi dan daya tarikan visual. Dalam artikel ini, kami akan meneroka cara membina komponen grid imej dinamik menggunakan Svelte yang bukan sahaja mengurus keadaan dengan cekap tetapi juga menyediakan peralihan yang lancar dan menarik perhatian apabila imej bertukar masuk dan keluar.

Penglihatan

Bayangkan grid imej yang menyegarkan dirinya sendiri secara berkala, dengan kad individu terbalik dengan lancar untuk mendedahkan imej baharu.

Ini menghasilkan paparan menarik yang sesuai untuk mempamerkan ahli pasukan, katalog produk atau sebarang koleksi imej yang lebih besar daripada yang boleh ditunjukkan sekali gus.

Inilah yang saya perlu bina ini untuk widget grid imej yang mempamerkan senarai ahli. Imej ahli datang daripada API dan berkembang dari semasa ke semasa.

Saya memutuskan untuk membina ini dengan Svelte kerana, mengapa tidak?!

Secara lebih serius, saya mahukan sesuatu yang akan disusun mengikut jumlah kod yang diperlukan sahaja dan mempunyai jejak yang sangat kecil di tapak web.
Berdasarkan itu saya mempunyai dua pilihan:

• Bina dengan javascript vanila
• Gunakan perpustakaan javascript yang akan menghasilkan berkas yang sangat kecil terutamanya memandangkan projek itu juga sangat kecil.

Tambahan pula, saya dapati model langsing itu lebih ringkas dan lebih intuitif jadi diberi pilihan, terutamanya pada projek kecil seperti ini, itulah yang saya akan lalai.

Seperti yang anda akan lihat lebih jauh, langsing menjadikan berurusan dengan banyak perubahan keadaan kecil dan rumit menjadi sangat mudah berbanding penyelesaian lain (sekali lagi, citarasa peribadi).
Selalunya terdapat kurang cara untuk mengacaukan keadaan.

Komponen Teras

Pelaksanaan kami terdiri daripada dua komponen Svelte utama:

1. App.svelte - Komponen utama yang mengurus grid dan mengatur pertukaran imej
2. MemberImageCard.svelte - Kad individu yang mengendalikan animasi flip dan paparan imej

Pengurusan Negeri: Otak Di Sebalik Grid

Inti widget kami terletak pada pengurusan negerinya. Kami perlu menjejaki beberapa maklumat:

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

Mengapa Menjejaki Keadaan Semasa Secara Berasingan?

Anda mungkin tertanya-tanya mengapa kami mengekalkan imagesInUse secara berasingan daripada imagesToUse. Pemisahan ini mempunyai beberapa tujuan penting:

1. Ia menyediakan satu sumber kebenaran untuk keadaan grid semasa
2. Ia membantu menghalang imej pendua daripada muncul dalam grid
3. Ia membolehkan kemas kini yang cekap tanpa pemaparan semula grid penuh
4. Ia mengekalkan integriti grid semasa operasi pertukaran

Koreografi Swap: Pandangan Terperinci

Proses pertukaran imej ialah urutan yang diatur dengan teliti yang memastikan peralihan lancar sambil mengekalkan integriti grid. Mari kita pecahkan fungsi suisImages langkah demi langkah:

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. Memilih Imej daripada Kolam

Mula-mula, kita perlu menentukan imej mana dari kumpulan yang tinggal kami yang akan digunakan untuk bertukar:

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

Kod ini mengendalikan dua senario:

• Jika kami kehabisan imej yang tinggal, kami menggunakan kesemuanya
• Jika tidak, kami mengambil N imej terakhir dari kolam kami, dengan N ialah NUMBER_OF_IMAGES_TO_SWITCH

2. Memilih Kedudukan Grid

Seterusnya, kami secara rawak memilih kedudukan dalam grid tempat kami akan menukar imej:

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

Ini mencipta pelbagai indeks rawak dalam saiz grid kami. Contohnya, jika NUMBER_OF_IMAGES_TO_SWITCH ialah 1 dan NUMBER_OF_IMAGES_TO_USE ialah 16, kita mungkin mendapat [7], menandakan kita akan menukar imej pada kedudukan 7 dalam grid.

3. Mencegah Pendua

Sebelum melakukan sebarang pertukaran, kami menyemak sama ada imej baharu sudah dipaparkan:

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

Fungsi ini menghalang imej yang sama daripada muncul beberapa kali dalam grid kami.

4. Operasi Swap

Kini datang logik pertukaran teras:

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

Mari kita pecahkan perkara yang berlaku dalam setiap pertukaran:

1. Kami mendapat kedudukan (indeks) yang dipilih secara rawak
2. Kami mengenal pasti imej semasa pada kedudukan itu (imageToSwap)
3. Kami mengambil imej baharu daripada kolam kami (imageToSwapWith)
4. Jika imej baharu itu sah dan belum dipaparkan:
   • Kami merekodkan pertukaran dalam imagesSwapMap
   • Kami mengemas kini keadaan grid dalam imagesInUse
   • Kami menambah imej lama kembali ke kolam pada permulaan

5. Memuktamadkan Negara

Selepas melakukan semua pertukaran, kami mengemas kini keadaan kami:

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. Mencetuskan Animasi

ImageSwapMap ialah kunci untuk mencetuskan animasi. Apabila ia dikemas kini, komponen MemberImageCard yang berkaitan bertindak balas:

remainingImages = newRemainingImages;
imagesInUse = imagesInUse;

Pernyataan reaktif ini dalam MemberImageCard:

1. Mengesan apabila kedudukannya terlibat dalam pertukaran
2. Memuatkan imej baharu pada muka bertentangan kad
3. Cetus animasi flip dengan menukar faceOnDisplay
4. Menetapkan semula keadaan pemuatan imej untuk peralihan yang lancar

Keindahan sistem ini ialah ia mengekalkan pengalaman pengguna yang lancar sambil memastikan:

• Tiada imej pendua muncul dalam grid
• Imej berputar dengan cekap
• Grid sentiasa mengekalkan strukturnya
• Animasi berlaku dengan lancar dan boleh diramal
• Pertukaran yang gagal (disebabkan oleh pendua) dikendalikan dengan baik

Animasi Flip: Menjadikannya Lancar

Setiap komponen MemberImageCard menguruskan animasi flip sendiri menggunakan transformasi dan peralihan CSS. Keajaiban berlaku melalui gabungan penjejakan keadaan dan 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[]

Apabila imej perlu bertukar, kami:

1. Muatkan imej baharu di bahagian belakang
2. Cetus animasi flip
3. Bersihkan imej lama setelah flip selesai

Pemuatan Progresif untuk UX yang Lebih Baik

Untuk meningkatkan pengalaman pengguna, kami melaksanakan kesan pemuatan progresif:

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

Imej mula kabur dan pudar dengan lancar setelah dimuatkan, memberikan rupa dan rasa yang digilap.

Menjadualkan Tarian

Pertukaran imej biasa dijadualkan menggunakan fungsi kitaran hayat onMount Svelte:

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

Kesimpulan

Pelaksanaan ini mempamerkan kuasa keupayaan reaktif Svelte yang digabungkan dengan transformasi CSS moden untuk mencipta komponen UI yang dinamik dan menarik.

Atas ialah kandungan terperinci Membina grid imej dinamik dengan Svelte: melaksanakan peralihan kad selak. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!