创建引人入胜的用户界面通常需要在功能和视觉吸引力之间取得微妙的平衡。在本文中，我们将探索如何使用 svelte 构建动态图像网格组件，该组件不仅可以有效管理状态，而且可以在图像换入和换出时提供平滑、引人注目的过渡。
愿景
想象一个定期刷新自身的图像网格，各个卡片平滑地翻转以显示新图像。
这创建了一个引人入胜的显示，非常适合展示团队成员、产品目录或任何大于一次显示的图像集合。
这就是我必须为显示成员列表的图像网格小部件构建的内容。会员图像来自 api，并随着时间的推移而增长。
我决定用 svelte 构建这个，因为为什么不呢？！
更认真地说，我想要的东西将被编译为所需的必要代码量，并且在网站上占用的空间非常小。
基于此，我有两个选择：
使用 vanilla javascript 构建它 使用一个 javascript 库，它将生成一个非常小的包，特别是考虑到该项目也非常小。
此外，我发现 svelte 模型更简单、更直观，因此如果有选择，尤其是在像这样的小项目上，我将默认使用它。
正如您进一步看到的那样，与其他解决方案相比，svelte 使得处理许多小而复杂的状态变化变得非常简单（同样，个人品味）。
通常，把事情搞砸的方法会更少。
核心组件
我们的实现由两个主要的 svelte 组件组成：
app.svelte – 管理网格和协调图像交换的主要组件memberimagecard.svelte – 处理翻转动画和图像显示的单独卡片
状态管理：网格背后的大脑
我们小部件的核心在于它的状态管理。我们需要追踪几条信息：
let allimages: image[]; // all available imageslet imagestouse: image[] = []; // initial grid imageslet imagesinuse: image[] = []; // current grid statelet remainingimages: image[] = []; // pool of unused imageslet imagesswapmap = new map(); // tracks pending swaps
为什么要单独跟踪当前状态？
您可能想知道为什么我们将 imagesinuse 与 imagestouse 分开维护。这种分离有几个重要目的：
它为当前网格状态提供单一事实来源它有助于防止重复的图像出现在网格中它可以实现高效更新，无需完全网格重新渲染它在交换操作期间保持网格完整性
交换编排：详细观察
图像交换过程是一个精心策划的序列，可确保平滑过渡，同时保持网格完整性。让我们一步步分解 switchimages 函数：
const switchimages = () => { let newimagesswapmap = new map() let remainingimagestouse let newremainingimages: image[]
1. 从池中选择图像
首先，我们需要确定剩余池中的哪些图像将用于交换：
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 张图像，其中 n 是 number_of_images_to_switch
2. 选择网格位置
接下来，我们在网格中随机选择要交换图像的位置：
indexestoswap = array(number_of_images_to_switch) .fill(null) .map(() => math.floor(math.random() * number_of_images_to_use));
这会在我们的网格大小内创建一个随机索引数组。例如，如果 number_of_images_to_switch 为 1 并且 number_of_images_to_use 为 16，我们可能会得到 [7]，表示我们将交换网格中位置 7 的图像。
3. 防止重复
在执行任何交换之前，我们检查新图像是否已显示：
无涯·问知
无涯·问知，是一款基于星环大模型底座，结合个人知识库、企业知识库、法律法规、财经等多种知识源的企业级垂直领域问答产品
153 查看详情 
const imageisinuse = (image: image) => { const inuse = imagesinuse.find((img: image) => image.picture_url === img.picture_url); return inuse;};
此功能可防止同一图像在我们的网格中多次出现。
4. 互换操作
现在是核心交换逻辑：
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 }}
让我们分解一下每次交换中会发生什么：
我们得到随机选择的位置（索引）我们识别该位置的当前图像（imagetoswap）我们从池中获取新图像 (imagetoswapwith)如果新图像有效且尚未显示：我们将交换记录在imagesswapmap中我们更新imagesinuse中的网格状态我们在开始时将旧图像添加回池中
5. 确定状态
执行所有交换后，我们更新状态：
remainingimages = newremainingimages;imagesinuse = imagesinuse;
6. 触发动画
imagesswapmap是触发动画的关键。当它更新时，相关的 memberimagecard 组件会做出反应：
$: { if (imagesswapmap.has(index)) { frontimageloaded = false; backimageloaded = false; let currentface = faceondisplay; // load new image on the opposite face backimageurl = currentface === 'front' && imagesswapmap.get(index).picture_url; frontimageurl = currentface === 'back' && imagesswapmap.get(index).picture_url; // trigger the flip faceondisplay = faceondisplay === 'front' ? 'back' : 'front'; }}
memberimagecard 中的此反应语句：
检测其位置何时涉及交换在卡片的反面加载新图像通过改变faceondisplay触发翻转动画重置图像加载状态以实现平滑过渡
这个系统的美妙之处在于它保持流畅的用户体验，同时确保：
网格中不会出现重复的图像图像高效循环网格始终保持其结构动画顺利且可预测地发生失败的交换（由于重复）会得到妥善处理
翻转动画：使其平滑
每个 memberimagecard 组件使用 css 变换和过渡来管理自己的翻转动画。神奇的事情是通过状态跟踪和 css 的结合来实现的：
288289447217
.card { transform-style: preserve-3d; transition: all 0.6s ease-in-out;}.card[data-face='back'] { transform: rotatey(180deg);}
当图像需要交换时，我们：
在反面加载新图像触发翻转动画翻转完成后清理旧图像
渐进式加载以获得更好的用户体验
为了增强用户体验，我们实现了渐进式加载效果：
.image { filter: blur(20px); opacity: 0; transition: filter 0.3s ease-out, opacity 0.3s ease-out;}.front-loaded,.back-loaded { filter: blur(0px); opacity: 1;}
加载后图像开始模糊并平滑淡入，提供精美的外观和感觉。
安排舞蹈
定期图像交换是使用 svelte 的 onmount 生命周期函数安排的：
onMount(() => { const interval = setInterval(switchImages, 3000); return () => clearInterval(interval);});
结论
此实现展示了 svelte 反应功能与现代 css 转换相结合的强大功能，可创建动态、引人入胜的 ui 组件。
以上就是使用 Svelte 构建动态图像网格：实现翻转卡过渡的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1151835.html
微信扫一扫 
支付宝扫一扫 
