如何实现Item Decoration内引导页的Gooey分页指示器动画？

嘿，这个带Gooey融合效果的分页指示器确实很有质感！我之前做引导页的时候刚好实现过类似效果，给你一步步拆解下实现思路和具体代码：

Gooey效果的核心是利用CSS滤镜配合SVG的模糊与颜色矩阵来模拟液体融合的视觉效果，而分页时的形态变化则是通过一个跟随滑块的动态尺寸调整来实现：

• 未切换时：滑块和当前激活的圆点重合，呈现圆形状态
• 切换过程中：滑块从当前圆点向目标圆点移动，同时宽度逐渐拉长，和两个圆点产生Gooey融合，形成圆角矩形
• 切换完成后：滑块宽度收缩回圆点大小，重新和目标圆点重合

HTML结构 #

<div class="page-indicator-container">
  <!-- 指示器圆点 -->
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
  <!-- 跟随滑块 -->
  <div class="slider"></div>
</div>

<!-- Gooey滤镜定义 -->
<svg style="display: none;">
  <defs>
    <filter id="goo">
      <feGaussianBlur in="SourceGraphic" stdDeviation="6" result="blur" />
      <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 20 -8" result="goo" />
      <feBlend in="SourceGraphic" in2="goo" />
    </filter>
  </defs>
</svg>

CSS样式 #

.page-indicator-container {
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: center;
  /* 应用Gooey滤镜 */
  filter: url(#goo);
  position: relative;
}

.dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #4CAF50;
  /* 固定圆点，不参与过渡 */
  flex-shrink: 0;
}

.slider {
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #4CAF50;
  /* 平滑过渡位置和尺寸 */
  transition: left 0.3s ease, width 0.3s ease;
  left: 0;
}

JavaScript逻辑（以点击切换为例） #

const container = document.querySelector('.page-indicator-container');
const dots = document.querySelectorAll('.dot');
const slider = document.querySelector('.slider');
let activeIndex = 0;

// 计算每个圆点的位置
const dotPositions = Array.from(dots).map(dot => dot.offsetLeft);

dots.forEach((dot, index) => {
  dot.addEventListener('click', () => {
    if (index === activeIndex) return;
    
    // 切换过程中：拉长滑块宽度，移动到目标位置
    const distance = Math.abs(dotPositions[index] - dotPositions[activeIndex]);
    slider.style.width = `${12 + distance}px`;
    slider.style.left = `${dotPositions[activeIndex]}px`;
    
    // 等待过渡完成后，收缩滑块回圆点大小
    setTimeout(() => {
      slider.style.width = '12px';
      slider.style.left = `${dotPositions[index]}px`;
      activeIndex = index;
    }, 300);
  });
});

• Gooey滤镜参数：feGaussianBlur的stdDeviation控制模糊程度，数值越大融合感越强；feColorMatrix的最后两个值（20和-8）用来调整模糊后的颜色对比度，让融合边缘更清晰
• 过渡时机：通过setTimeout配合过渡时长（0.3s），确保滑块先拉长移动完成融合效果，再收缩回圆形
• 自适应位置：如果你的引导页是滑动切换，只需要把点击事件换成滑动监听，计算对应的activeIndex即可适配

这样就能实现你想要的“滑动时融合成圆角矩形，到位后恢复圆形”的效果啦！

内容的提问来源于stack exchange，提问作者Archie G. Quiñones