点击SVG切换两类函数循环的实现方案咨询

我来帮你搞定这个切换逻辑！核心思路其实很简单：我们只需要跟踪当前运行的动画组状态，再给SVG绑定点击事件，每次点击时先终止当前的循环，再切换到另一组动画启动就行。下面是具体的实现步骤和代码示例：

1. 准备状态跟踪和动画终止的基础变量 #

首先我们需要两个关键变量：一个记录当前是垂直还是水平循环，另一个保存当前动画的执行ID（用来终止循环）：

// 初始默认用垂直循环
let currentAnimationType = 'vertical';
// 保存当前动画的定时器/帧ID，用来停止动画
let activeAnimationId = null;

2. 封装每组动画的循环逻辑 #

假设你的Rightscale.verticalUp/verticalDown是交替执行的循环，我们把整个垂直循环封装成一个启动函数，水平循环同理。这样后续切换时直接调用启动函数就行：

// 启动垂直循环：交替执行verticalUp和verticalDown
function startVerticalCycle() {
  function runUp() {
    // 执行你的垂直向上动画逻辑
    Rightscale.verticalUp();
    // 一段时间后切换到向下动画，这里的1000是间隔毫秒数，根据你的需求调整
    activeAnimationId = setTimeout(runDown, 1000);
  }
  
  function runDown() {
    // 执行你的垂直向下动画逻辑
    Rightscale.verticalDown();
    // 切换回向上动画
    activeAnimationId = setTimeout(runUp, 1000);
  }
  
  // 启动第一个动画
  runUp();
}

// 启动水平循环：交替执行horizontalUp和horizontalDown
function startHorizontalCycle() {
  function runUp() {
    Rightscale.horizontalUp();
    activeAnimationId = setTimeout(runDown, 1000);
  }
  
  function runDown() {
    Rightscale.horizontalDown();
    activeAnimationId = setTimeout(runUp, 1000);
  }
  
  runUp();
}

3. 实现停止当前动画的函数 #

不管当前是垂直还是水平循环，我们需要一个通用的停止函数，根据你用的定时器类型（setTimeout/requestAnimationFrame）来终止：

function stopCurrentCycle() {
  if (activeAnimationId) {
    // 如果用的是requestAnimationFrame，就换成cancelAnimationFrame(activeAnimationId)
    clearTimeout(activeAnimationId);
    // 清空ID，避免重复停止
    activeAnimationId = null;
  }
}

4. 给SVG绑定点击切换事件 #

最后找到你的SVG元素，绑定点击事件，每次点击时停止当前循环，切换状态并启动新的循环：

// 替换成你的SVG选择器，比如document.getElementById('your-svg-id')
const svg = document.querySelector('svg');

svg.addEventListener('click', () => {
  // 先停止当前正在运行的动画
  stopCurrentCycle();
  
  // 根据当前状态切换到另一组动画
  if (currentAnimationType === 'vertical') {
    currentAnimationType = 'horizontal';
    startHorizontalCycle();
  } else {
    currentAnimationType = 'vertical';
    startVerticalCycle();
  }
});

5. 初始启动动画 #

页面加载完成后，启动默认的垂直循环：

window.addEventListener('load', () => {
  startVerticalCycle();
});

关键注意点 #

• 如果你的动画用的是requestAnimationFrame而不是setTimeout，只需要把setTimeout换成requestAnimationFrame，停止时用cancelAnimationFrame就行，逻辑完全一致。
• 确保你的Rightscale下的动画函数是同步执行的，或者如果是异步的，要调整循环的切换时机（比如在动画结束的回调里启动下一个动画）。

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