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

ビジョン

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

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

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

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

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

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

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

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

コアコンポーネント

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

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

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

ウィジェットの中心はその狀態(tài)管理にあります。いくつかの情報(bào)を追跡する必要があります:

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)を個(gè)別に追跡する理由

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

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

スワップの振り付け: 詳細(xì)な外観

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

1. プールから畫(huà)像を選択する

まず、殘りのプールからどの畫(huà)像を交換に使用するかを決定する必要があります。

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

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

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

2. グリッド位置の選択

次に、畫(huà)像を交換するグリッド內(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 の場(chǎng)合、[7] が得られ、グリッドの 7 番目の位置で畫(huà)像を交換することを示します。

3. 重複の防止

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

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

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

4. スワップ操作

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

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

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

1. ランダムに選択された位置 (インデックス) を取得します
2. その位置で現(xiàn)在の畫(huà)像を識(shí)別します (imageToSwap)
3. プールから新しいイメージを取得します (imageToSwapWith)
4. 新しい畫(huà)像が有効でまだ表示されていない場(chǎng)合:
   • 畫(huà)像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è)の面に新しい畫(huà)像をロードします
3. faceOnDisplay を変更することで反転アニメーションをトリガーします
4. スムーズな遷移のために畫(huà)像の読み込み狀態(tài)をリセットします

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

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

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

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

畫(huà)像を交換する必要がある場(chǎng)合、次のことを行います:

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

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

畫(huà)像は読み込まれるとぼやけ始め、スムーズにフェードインし、洗練された外観と感觸を提供します。

ダンスのスケジュールを立てる

定期的なイメージのスワップは、Svelte の onMount ライフサイクル関數(shù)を使用してスケジュールされます。

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

結(jié)論

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

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