svelte 构建动态图像网格组件，该组件不仅可以有效管理状态，而且可以在图像换入和换出时提供平滑、引人注目的过渡。
愿景
想象一个定期刷新自身的图像网格，各个卡片平滑地翻转以显示新图像。
这创建了一个引人入胜的显示，非常适合展示团队成员、产品目录或任何大于一次显示的图像集合。
这就是我必须为显示成员列表的图像网格小部件构建的内容。会员图像来自 api，并随着时间的推移而增长。
我决定用 svelte 构建这个，因为为什么不呢？！
更认真地说，我想要的东西将被编译为所需的必要代码量，并且在网站上占用的空间非常小。
基于此，我有两个选择：
使用 vanilla javascript 构建它
使用一个 javascript 库，它将生成一个非常小的包，特别是考虑到该项目也非常小。
此外，我发现 svelte 模型更简单、更直观，因此如果有选择，尤其是在像这样的小项目上，我将默认使用它。
正如您进一步看到的那样，与其他解决方案相比，svelte 使得处理许多小而复杂的状态变化变得非常简单（同样，个人品味）。
通常，把事情搞砸的方法会更少。
核心组件
我们的实现由两个主要的 svelte 组件组成：
app.svelte - 管理网格和协调图像交换的主要组件
memberimagecard.svelte - 处理翻转动画和图像显示的单独卡片
状态管理：网格背后的大脑
我们小部件的核心在于它的状态管理。我们需要追踪几条信息：
为什么要单独跟踪当前状态？
您可能想知道为什么我们将 imagesinuse 与 imagestouse 分开维护。这种分离有几个重要目的：
它为当前网格状态提供单一事实来源
它有助于防止重复的图像出现在网格中
它可以实现高效更新，无需完全网格重新渲染
它在交换操作期间保持网格完整性
交换编排：详细观察
图像交换过程是一个精心策划的序列，可确保平滑过渡，同时保持网格完整性。让我们一步步分解 switchimages 函数：
- 从池中选择图像
首先，我们需要确定剩余池中的哪些图像将用于交换：
此代码处理两种情况：
如果剩余图像不足，我们会使用所有图像
否则，我们从池中获取最后 n 张图像，其中 n 是 number_of_images_to_switch
选择网格位置
接下来，我们在网格中随机选择要交换图像的位置：
这会在我们的网格大小内创建一个随机索引数组。例如，如果 number_of_images_to_switch 为 1 并且 number_of_images_to_use 为 16，我们可能会得到 [7]，表示我们将交换网格中位置 7 的图像。防止重复
在执行任何交换之前，我们检查新图像是否已显示：
此功能可防止同一图像在我们的网格中多次出现。互换操作
现在是核心交换逻辑：
让我们分解一下每次交换中会发生什么：
我们得到随机选择的位置（索引）
我们识别该位置的当前图像（imagetoswap）
我们从池中获取新图像 (imagetoswapwith)
如果新图像有效且尚未显示：
我们将交换记录在imagesswapmap中
我们更新imagesinuse中的网格状态
我们在开始时将旧图像添加回池中
- 确定状态
执行所有交换后，我们更新状态：
- 触发动画
imagesswapmap是触发动画的关键。当它更新时，相关的 memberimagecard 组件会做出反应：
memberimagecard 中的此反应语句：
检测其位置何时涉及交换
在卡片的反面加载新图像
通过改变faceondisplay触发翻转动画
重置图像加载状态以实现平滑过渡
这个系统的美妙之处在于它保持流畅的用户体验，同时确保：
网格中不会出现重复的图像
图像高效循环
网格始终保持其结构
动画顺利且可预测地发生
失败的交换（由于重复）会得到妥善处理
