매력적인 사용자 인터페이스를 만들려면 기능과 시각적 매력 사이의 미묘한 균형이 필요한 경우가 많습니다. 이 기사에서는 상태를 효율적으로 관리할 뿐만 아니라 이미지 교체 시 매끄럽고 눈길을 끄는 전환을 제공하는 Svelte를 사용하여 동적 이미지 그리드 구성 요소를 구축하는 방법을 살펴보겠습니다.
새 이미지를 공개하기 위해 개별 카드를 부드럽게 뒤집어 주기적으로 새로 고치는 이미지 그리드를 상상해 보세요.
이렇게 하면 팀 구성원, 제품 카탈로그 또는 한 번에 표시할 수 있는 것보다 더 큰 이미지 컬렉션을 보여주기에 완벽한 매력적인 디스플레이가 만들어집니다.
회원 목록을 보여주는 이미지 그리드 위젯을 위해 이것을 만들어야 했습니다. 회원 이미지는 API에서 제공되며 시간이 지남에 따라 증가합니다.
Svelte로 이것을 구축하기로 결정한 이유는 왜 안 되겠습니까?!
좀 더 진지하게, 저는 필요한 양의 코드로 컴파일되고 웹사이트에 차지하는 공간이 아주 작은 것을 원했습니다.
이를 바탕으로 두 가지 옵션이 있었습니다.
게다가 날씬한 모델이 더 간단하고 직관적이라고 생각하므로 특히 이와 같은 소규모 프로젝트에서는 선택의 여지가 있는 경우 이를 기본적으로 사용하겠습니다.
조금 더 자세히 살펴보겠지만, svelte는 다른 솔루션에 비해 작고 복잡한 여러 상태 변경을 매우 간단하게 처리합니다(역시 개인 취향).
일반적으로 일을 망칠 수 있는 방법이 적습니다.
우리의 구현은 두 가지 주요 Svelte 구성 요소로 구성됩니다.
위젯의 핵심은 상태 관리에 있습니다. 우리는 여러 가지 정보를 추적해야 합니다.
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
imageInUse를 ImagesToUse와 별도로 유지하는 이유가 궁금할 것입니다. 이러한 분리는 다음과 같은 몇 가지 중요한 목적을 제공합니다.
이미지 교환 프로세스는 그리드 무결성을 유지하면서 원활한 전환을 보장하도록 세심하게 조정된 순서입니다. switchImages 기능을 단계별로 분석해 보겠습니다.
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[]
이 코드는 두 가지 시나리오를 처리합니다.
다음으로 그리드에서 이미지를 교환할 위치를 무작위로 선택합니다.
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);
}
그리드 크기 내에 무작위 인덱스 배열이 생성됩니다. 예를 들어 NUMBER_OF_IMAGES_TO_SWITCH가 1이고 NUMBER_OF_IMAGES_TO_USE가 16인 경우 그리드의 위치 7에서 이미지를 교체한다는 것을 나타내는 [7]을 얻을 수 있습니다.
교체를 수행하기 전에 새 이미지가 이미 표시되어 있는지 확인합니다.
indexesToSwap = Array(NUMBER_OF_IMAGES_TO_SWITCH) .fill(null) .map(() => Math.floor(Math.random() * NUMBER_OF_IMAGES_TO_USE));
이 기능은 동일한 이미지가 그리드에 여러 번 나타나는 것을 방지합니다.
이제 코어 교환 논리가 나옵니다.
const imageIsInUse = (image: Image) => {
const inUse = imagesInUse.find((img: Image) => image.picture_url === img.picture_url);
return inUse;
};
각 교환에서 어떤 일이 발생하는지 분석해 보겠습니다.
모든 교체를 수행한 후 상태를 업데이트합니다.
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
}
}
imageSwapMap은 애니메이션을 실행하는 핵심입니다. 업데이트되면 관련 MemberImageCard 구성 요소가 반응합니다.
remainingImages = newRemainingImages; imagesInUse = imagesInUse;
MemberImageCard의 반응문:
이 시스템의 장점은 다음을 보장하면서 원활한 사용자 경험을 유지한다는 것입니다.
각 MemberImageCard 구성 요소는 CSS 변환 및 전환을 사용하여 자체 플립 애니메이션을 관리합니다. 상태 추적과 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[]
이미지를 교체해야 할 경우 우리는 다음을 수행합니다.
사용자 경험을 향상하기 위해 프로그레시브 로딩 효과를 구현했습니다.
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 수명 주기 기능을 사용하여 예약됩니다.
indexesToSwap = Array(NUMBER_OF_IMAGES_TO_SWITCH) .fill(null) .map(() => Math.floor(Math.random() * NUMBER_OF_IMAGES_TO_USE));
이 구현은 역동적이고 매력적인 UI 구성요소를 생성하기 위한 최신 CSS 변환과 결합된 Svelte의 반응형 기능의 강력함을 보여줍니다.
위 내용은 Svelte를 사용하여 동적 이미지 그리드 구축: 플립 카드 전환 구현의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
