如何生成锚点绑定HTML元素的动态SVG路径并实现元素沿路径运动？

一、动态生成贴合图片的贝塞尔曲线 #

1. 安装依赖 #

首先安装svg-path-generator：

npm install svg-path-generator --save

2. 获取图片的锚点坐标 #

在页面加载和窗口 resize 时，实时获取每个图片容器的底部中心位置，作为曲线的关键锚点：

function getImageAnchors() {
  const imageWrappers = document.querySelectorAll('.block-item__image-wrapper');
  const anchors = [];
  
  imageWrappers.forEach(wrapper => {
    const rect = wrapper.getBoundingClientRect();
    // 计算图片底部中心的绝对文档坐标
    const anchor = {
      x: rect.left + rect.width / 2 + window.scrollX,
      y: rect.bottom + window.scrollY
    };
    anchors.push(anchor);
  });
  
  return anchors;
}

3. 生成带环的贝塞尔曲线 #

利用svg-path-generator将锚点连接成带向下弧度的曲线，每个图片下方的环用三次贝塞尔实现：

import { Path } from 'svg-path-generator';

function generatePath() {
  const anchors = getImageAnchors();
  if (anchors.length === 0) return '';
  
  const path = new Path();
  path.moveTo(anchors[0].x, anchors[0].y);
  
  anchors.forEach((anchor, index) => {
    if (index === 0) return;
    
    const prevAnchor = anchors[index - 1];
    // 控制环的深度，可根据需求调整
    const controlY = anchor.y + 80;
    path.cubicBezierTo(
      (prevAnchor.x + anchor.x) / 2, prevAnchor.y,
      (prevAnchor.x + anchor.x) / 2, controlY,
      anchor.x, anchor.y
    );
  });
  
  return path.toString();
}

// 更新SVG路径
function updatePath() {
  const pathElement = document.querySelector('.block__line-wrapper path');
  pathElement.setAttribute('d', generatePath());
  // 设置路径样式（可隐藏或自定义）
  pathElement.setAttribute('stroke', '#000');
  pathElement.setAttribute('fill', 'none');
  pathElement.setAttribute('stroke-width', '2');
}

// 页面加载和窗口resize时更新路径
window.addEventListener('load', updatePath);
window.addEventListener('resize', updatePath);

二、实现元素到达50vh时沿路径运动 #

1. 添加动态黄色方块容器 #

在现有HTML中添加方块容器：

<div class="block">
  <!-- 原有block-item内容 -->
  <div class="block__dynamic-items"></div>
  <div class="block__line-wrapper">
    <svg><path/></svg>
  </div>
</div>

添加对应的CSS：

.block__dynamic-items {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.dynamic-item {
  position: absolute;
  width: 40px;
  height: 40px;
  background: yellow;
  border-radius: 4px;
}

2. 滚动监听与动画触发 #

监听滚动事件，判断元素是否进入50vh区域，触发animejs路径动画：

import anime from 'animejs';

// 动态生成指定数量的黄色方块
function createDynamicItems(count) {
  const container = document.querySelector('.block__dynamic-items');
  container.innerHTML = '';
  
  const firstAnchor = getImageAnchors()[0];
  for (let i = 0; i < count; i++) {
    const item = document.createElement('div');
    item.className = 'dynamic-item';
    // 初始位置设为第一个图片下方
    item.style.left = `${firstAnchor.x - 20}px`;
    item.style.top = `${firstAnchor.y - 20}px`;
    container.appendChild(item);
  }
}

// 判断元素是否到达50vh触发区
function isElementInTriggerZone(element) {
  const rect = element.getBoundingClientRect();
  const triggerY = window.innerHeight * 0.5;
  return rect.top <= triggerY && rect.bottom >= triggerY;
}

// 滚动监听触发动画
let animatedItems = new Set();
window.addEventListener('scroll', () => {
  const items = document.querySelectorAll('.dynamic-item');
  const path = document.querySelector('.block__line-wrapper path').getAttribute('d');
  
  items.forEach(item => {
    if (isElementInTriggerZone(item) && !animatedItems.has(item)) {
      anime({
        targets: item,
        motionPath: {
          path: path,
          offsetX: -20, // 修正方块中心与路径对齐
          offsetY: -20
        },
        duration: 3000,
        easing: 'easeInOutQuad',
        complete: () => {
          animatedItems.add(item);
        }
      });
    }
  });
});

// 初始化生成3个黄色方块（数量可动态调整）
createDynamicItems(3);

三、关键注意事项 #

• 响应式适配：窗口resize时重新计算锚点和路径，确保曲线始终贴合图片位置
• 性能优化：滚动监听可添加节流函数，避免频繁计算；动画完成后标记元素，防止重复触发
• 路径调整：修改controlY值可调整环的深度，匹配设计草图的弧度需求

内容的提问来源于stack exchange，提问作者Marco