SVG 幻灯片效果

SVG (Scalable Vector Graphics) 是一种用于描述二维矢量图形的 XML 格式标记语言，利用它可以轻松绘制出丰富多彩的图形，并且适应性强，可以随着放大或者缩小而保持清晰度。在前端页面开发中，SVG 能够帮助我们轻松实现各种炫酷的动态效果，比如今天要介绍的 SVG 幻灯片效果，它可以让我们的页面制作更加生动，增强用户体验。

SVG 幻灯片效果的原理

SVG 幻灯片效果的实现原理主要是通过 SVG 的动画特性来操纵幻灯片元素的位置、旋转、缩放等属性，借助 JavaScript 判断当前状态来实现幻灯片的自动播放和用户手动滑动控制。

实现步骤

步骤1：HTML 结构和 CSS 样式

首先，我们需要设置一个 HTML 滑块容器，将幻灯片的图片等元素放在容器内。然后我们需要设置 CSS 样式来初始化幻灯片元素的状态，比如图片的位置、大小等。

<div class="slider-container">
  <div class="slider-wrapper">
    <img src="./slide-1.png" alt="slider-1" class="slider-item">
    <img src="./slide-2.png" alt="slider-2" class="slider-item">
    <img src="./slide-3.png" alt="slider-3" class="slider-item">
  </div>
</div>

.slider-container {
  width: 100%;
  height: 100vh;
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
}
.slider-wrapper {
  display: flex;
  width: 300%;
  height: 100%;
}
.slider-item {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

步骤2：SVG 动画

我们使用 SVG 来实现幻灯片元素的动画效果，其中 SVG 动画的关键在于定义好从动画效果开始到结束的关键帧（即 SVG 的 path 路径），然后通过设置相应的动画属性来控制动画的运动轨迹和时长。

<svg class="slider-nav-icon">
  <path d="M0,0 L40,40 L80,0" />
</svg>

.slider-nav-icon {
  width: 40px;
  height: 40px;
  position: absolute;
  bottom: 50px;
  left: 50%;
  transform: translateX(-50%);
  cursor: pointer;
}
.slider-nav-icon path {
  stroke: #fff;
  stroke-width: 2;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 0 80;
  transition: all ease-in-out 0.3s;
}

.slider-nav-icon.active path {
  stroke-dasharray: 40 80;
}

步骤3：JavaScript 控制

最后，我们需要编写 JavaScript 来控制幻灯片的自动播放和用户手动滑动控制。我们可以通过定义一个变量来保存当前幻灯片的位置，然后根据用户点击的方向来设置下一个幻灯片的位置，第一张和最后一张幻灯片在特殊情况下需要特殊处理。

const SLIDER_ITEM_COUNT = 3;
const DURATION = 300; // ms
const DELAY = 1500; // ms

const sliderContainer = document.querySelector(".slider-container");
const sliderNavIcon = document.querySelector(".slider-nav-icon");

let currentSlideIndex = 0;
let isSliding = false;

function slide(direction) {
  if (isSliding) {
    return;
  }
  isSliding = true;

  const offset = -(currentSlideIndex + direction) * (100 / SLIDER_ITEM_COUNT) + "%";

  document.querySelector(".slider-wrapper").style.transform =
    "translate3d(" + offset + ", 0, 0)";

  setTimeout(function () {
    currentSlideIndex += direction;
    if (currentSlideIndex < 0) {
      currentSlideIndex = SLIDER_ITEM_COUNT - 1;
    } else if (currentSlideIndex >= SLIDER_ITEM_COUNT) {
      currentSlideIndex = 0;
    }
    isSliding = false;
  }, DURATION);
}

sliderNavIcon.addEventListener("click", function () {
  slide(1);
});

// slide interval
const slideInterval = setInterval(function () {
  slide(1);
}, DELAY);

效果演示

总结

通过这个简单的实例，我们可以掌握 SVG 幻灯片效果的基本原理和实现步骤，同时也可以发现 SVG 的强大优势和应用场景，未来 SVG 肯定会在前端开发当中占据更重要的角色，我们需要加强对它的学习和应用。