魅力的なユーザー インターフェイスを作成するには、多くの場合、機能と視覚的な魅力の間の微妙なバランスが必要です。この記事では、Svelte を使用して、狀態(tài)を効率的に管理するだけでなく、畫像の入れ替え時にスムーズで目を引く遷移を提供する動的畫像グリッド コンポーネントを構(gòu)築する方法を検討します。

ビジョン

畫像のグリッドが定期的に更新され、個々のカードが滑らかにめくられて新しい畫像が表示されることを想像してください。

これにより、チーム メンバー、製品カタログ、または一度に表示できるサイズより大きい畫像のコレクションを紹介するのに最適な魅力的なディスプレイが作成されます。

これは、メンバー リストを表示する畫像グリッド ウィジェット用に構(gòu)築する必要があったものです。メンバーの畫像は API から取得され、時間の経過とともに増加します。

これを Svelte で構(gòu)築することにしたのは、なぜそうしないのですか?!

もっと真剣に考えれば、必要な量のコードにコンパイルされ、Web サイト上の占有面積が非常に小さいものが欲しかったのです。
それに基づいて、私には 2 つの選択肢がありました:

• バニラ JavaScript でビルドします
• 特にプロジェクトが非常に小さいことを考慮すると、非常に小さなバンドルを生成する JavaScript ライブラリを使用します。

さらに、洗練されたモデルのほうがシンプルで直感的だと思うので、特に今回のような小規(guī)模なプロジェクトでは、選択肢があればそれをデフォルトにします。

もう少し詳しく見ると、svelte を使用すると、他のソリューションと比較して、多くの小さくて複雑な狀態(tài)変更の処理が非常に簡単になります (これも個人的な好みです)。
通常、物事を臺無しにする方法は少なくなります。

コアコンポーネント

私たちの実裝は 2 つの主要な Svelte コンポーネントで構(gòu)成されています:

1. App.svelte - グリッドを管理し、畫像の交換を調(diào)整するメインコンポーネント
2. MemberImageCard.svelte - 反転アニメーションと畫像表示を処理する個別のカード

狀態(tài)管理: グリッドの背後にある頭脳

ウィジェットの中心はその狀態(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

現(xiàn)在の狀態(tài)を個別に追跡する理由

なぜimagesToUseとは別にimagesInUseを維持するのか疑問に思われるかもしれません。この分離には、いくつかの重要な目的があります:

1. 現(xiàn)在のグリッド狀態(tài)の信頼できる唯一の情報源を提供します
2. 重複した畫像がグリッドに表示されるのを防ぐのに役立ちます
3. 完全なグリッドを再レンダリングせずに効率的な更新が可能になります
4. スワップ操作中にグリッドの整合性を維持します

スワップの振り付け: 詳細な外観

畫像の交換プロセスは、グリッドの整合性を維持しながらスムーズな移行を保証する慎重に調(diào)整されたシーケンスです。 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[]

このコードは 2 つのシナリオを処理します:

• 殘りの畫像が少なくなった場合は、すべて使用します
• それ以外の場合は、プールから最後の N 枚の畫像を取得します。N は NUMBER_OF_IMAGES_TO_SWITCH です。

2. グリッド位置の選択

次に、畫像を交換するグリッド內(nèi)の位置をランダムに選択します。

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

これにより、グリッド サイズ內(nèi)でランダムなインデックスの配列が作成されます。たとえば、NUMBER_OF_IMAGES_TO_SWITCH が 1、NUMBER_OF_IMAGES_TO_USE が 16 の場合、[7] が得られ、グリッドの 7 番目の位置で畫像を交換することを示します。

3. 重複の防止

交換を?qū)g行する前に、新しい畫像がすでに表示されているかどうかを確認します。

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

この機能は、グリッド內(nèi)に同じ畫像が複數(shù)回表示されるのを防ぎます。

4. スワップ操作

ここでコア交換ロジックを説明します:

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

各スワップで何が起こるかを詳しく見てみましょう:

1. ランダムに選択された位置 (インデックス) を取得します
2. その位置で現(xiàn)在の畫像を識別します (imageToSwap)
3. プールから新しいイメージを取得します (imageToSwapWith)
4. 新しい畫像が有効でまだ表示されていない場合:
   • 畫像SwapMapにスワップを記録します
   • imagesInUse のグリッドの狀態(tài)を更新します
   • 最初に古いイメージをプールに追加し直します

5. 狀態(tài)を完成させる

すべてのスワップを?qū)g行した後、狀態(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. アニメーションのトリガー

imageSwapMap はアニメーションをトリガーするための鍵です。更新すると、関連する MemberImageCard コンポーネントが反応します:

remainingImages = newRemainingImages;
imagesInUse = imagesInUse;

MemberImageCard のこのリアクティブ ステートメント:

1. そのポジションがスワップに関與していることを検出します
2. カードの反対側(cè)の面に新しい畫像をロードします
3. faceOnDisplay を変更することで反転アニメーションをトリガーします
4. スムーズな遷移のために畫像の読み込み狀態(tài)をリセットします

このシステムの利點は、次のことを保証しながらスムーズなユーザー エクスペリエンスを維持できることです。

• グリッドに重複した畫像は表示されません
• 畫像は効率的に循環(huán)します
• グリッドは常にその構(gòu)造を維持します
• アニメーションはスムーズかつ予測通りに実行されます
• (重複による) 失敗したスワップは適切に処理されます

フリップ アニメーション: スムーズにする

各 MemberImageCard コンポーネントは、CSS 変換とトランジションを使用して獨自の反転アニメーションを管理します。この魔法は、狀態(tài)追跡と 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[]

畫像を交換する必要がある場合、次のことを行います:

1. 裏面に新しい畫像をロードします
2. 反転アニメーションをトリガーします
3. 反転が完了したら、古い畫像をクリーンアップします

UX を向上させるプログレッシブローディング

ユーザー エクスペリエンスを向上させるために、プログレッシブ ローディング効果を?qū)g裝しました。

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é)論

この実裝は、Svelte のリアクティブ機能と最新の CSS 変換を組み合わせて、動的で魅力的な UI コンポーネントを作成する能力を示しています。

以上がSvelte を使用した動的な畫像グリッドの構(gòu)築: フリップ カード トランジションの実裝の詳細內(nèi)容です。詳細については、PHP 中國語 Web サイトの他の関連記事を參照してください。