如何结合块跟随光标移动动画与Sprite更新动画并实现容器外停止？

先明确现有代码的核心问题：

• 初始直接启动Sprite动画，未关联块的移动状态
• 光标移出容器时仅重置mouseX，未停止块的移动循环和Sprite动画
• 缺少块是否处于移动状态的判断逻辑，无法动态启停Sprite动画

以下是修改后的完整代码及说明：

块跟随光标移动动画（修改版） #

let block = $(".block"), container = $(".container");
let mouseX = 0, limitX = container.width() - block.width();
let blockX = 0;
let loop = null; // 初始化移动循环变量

// 当光标在容器上时
container.on('mousemove', function(e) {
    mouseX = Math.min(e.pageX - container.offset().left, limitX);
    if(mouseX > limitX) { mouseX = limitX; }
    
    // 如果移动循环未启动，启动它
    if (!loop) {
        startAnimation(); // 启动Sprite动画
        loop = setInterval(function(){
            let newBlockX = blockX + ((mouseX - blockX) / 20); // 修正原代码笔误：peopleX改为blockX
            
            // 控制方向类
            if(blockX < newBlockX || blockX == 0){ 
                block.removeClass('forward'); 
            } else { 
                block.addClass('forward'); 
            }
            
            // 判断块是否已停止移动
            if (Math.abs(newBlockX - mouseX) < 0.1) {
                newBlockX = mouseX;
                clearInterval(loop);
                loop = null;
                stopAnimation(); // 停止Sprite动画
            }
            
            blockX = newBlockX;
            block.css({left: blockX + 'px'}); // 补充单位px，避免样式解析异常
        }, 10);
    }
});

container.on('mouseleave', function(e) {
    mouseX = 0;
    // 停止块的移动循环
    if (loop) {
        clearInterval(loop);
        loop = null;
    }
    stopAnimation(); // 强制停止Sprite动画
});

Sprite更新动画代码（微调优化） #

let animationInterval;

function stopAnimation() {
    clearInterval(animationInterval);
    animationInterval = null;
}

function startAnimation() {
    if (animationInterval) return; // 避免重复启动动画
    let widthOfSpriteSheet = 140;
    let widthOfEachSprite = 35;

    const speed = 120;
    let position = widthOfEachSprite;
    const diff = widthOfEachSprite;
    animationInterval = setInterval(() => {
        $(".people, .preloader-image").css({backgroundPosition: `0px -${position}px`});
        if (position < widthOfSpriteSheet) {
            position = position + diff;
        } else {
            position = widthOfEachSprite;
        }
    }, speed);
}

关键修改说明： #

1. 移动循环启停控制：

   • 将loop初始化为null，仅在光标移动且循环未运行时启动，避免无意义的初始循环
   • 光标移出容器时直接清除循环并置空，彻底停止块的移动

2. Sprite动画关联逻辑：

   • 移除初始的startAnimation()调用，仅在块开始移动时启动Sprite动画
   • 当块移动到目标位置（与mouseX差值小于0.1）时，自动停止Sprite动画
   • 光标移出容器时强制停止Sprite动画，确保状态同步

3. 原代码笔误修复：

   • 修正了peopleX的笔误（应为blockX）
   • 为left属性补充px单位，避免样式解析问题

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