使用 Svelte 构建动态图像网格：实现翻转卡过渡

php中文网 2024-11-25 11:37:37

创建引人入胜的用户界面通常需要在功能和视觉吸引力之间取得微妙的平衡。在本文中，我们将探索如何使用 svelte 构建动态图像网格组件，该组件不仅可以有效管理状态，而且可以在图像换入和换出时提供平滑、引人注目的过渡。

愿景

想象一个定期刷新自身的图像网格，各个卡片平滑地翻转以显示新图像。

这创建了一个引人入胜的显示，非常适合展示团队成员、产品目录或任何大于一次显示的图像集合。

这就是我必须为显示成员列表的图像网格小部件构建的内容。会员图像来自 api，并随着时间的推移而增长。

我决定用 svelte 构建这个，因为为什么不呢？！

更认真地说，我想要的东西将被编译为所需的必要代码量，并且在网站上占用的空间非常小。
基于此，我有两个选择：

使用 vanilla javascript 构建它
使用一个 javascript 库，它将生成一个非常小的包，特别是考虑到该项目也非常小。

此外，我发现 svelte 模型更简单、更直观，因此如果有选择，尤其是在像这样的小项目上，我将默认使用它。

正如您进一步看到的那样，与其他解决方案相比，svelte 使得处理许多小而复杂的状态变化变得非常简单（同样，个人品味）。
通常，把事情搞砸的方法会更少。

核心组件

我们的实现由两个主要的 svelte 组件组成：

app.svelte - 管理网格和协调图像交换的主要组件
memberimagecard.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

为什么要单独跟踪当前状态？

您可能想知道为什么我们将 imagesinuse 与 imagestouse 分开维护。这种分离有几个重要目的：

它为当前网格状态提供单一事实来源
它有助于防止重复的图像出现在网格中
它可以实现高效更新，无需完全网格重新渲染
它在交换操作期间保持网格完整性

交换编排：详细观察

图像交换过程是一个精心策划的序列，可确保平滑过渡，同时保持网格完整性。让我们一步步分解 switchimages 函数：

const switchimages = () => {
  let newimagesswapmap = new map<number, image>()
  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. 防止重复

在执行任何交换之前，我们检查新图像是否已显示：

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 构建动态图像网格：实现翻转卡过渡的详细内容，更多请关注php中文网其它相关文章！

本文地址： http://www.ipsmc.com/web/19322.html