基于jQuery实现形状线性移动时的无缝循环显示效果

需求说明 #

需实现形状从右向左的线性移动效果，当任意形状开始从左侧消失时，立即从右侧重新出现，无需等待其他形状完成消失。例如square1、circle1、star1依次左移，square1刚开始从左侧消失就立刻从右侧重现，要求使用jQuery实现。

实现代码 #

// 全局变量：控制动画暂停状态（如鼠标悬停时）
let isHovering = false;
let autoScrollInterval;
// 可调整的滚动速度系数，数值越大移动越快
const autoScrollSpeed = 5;

function startAutoScroll() {
    const $track = $('.track');
    const $shapes = $('.shapes');
    const containerWidth = $('.track-container').width();
    const shapeWidth = $shapes.first().outerWidth(true); // 包含margin的单个形状总宽度

    // 每帧滚动的像素距离
    const scrollSpeed = 1;

    // 轨道滚动逻辑（不需要轨道滚动可直接删除此段）
    autoScrollInterval = setInterval(function() {
        if (!isHovering) {
            let currentLeft = parseInt($track.css('left'), 10) || 0;
            let newLeft = currentLeft - scrollSpeed;
            const trackWidth = $track.width();
            
            // 轨道完全移出视野后复位，实现循环
            if (Math.abs(newLeft) >= trackWidth) {
                newLeft = 0;
            }
            $track.css('left', `${newLeft}px`);
        }
    }, 100 / autoScrollSpeed);

    // 形状无缝循环动画核心逻辑
    function animateShapes() {
        const totalShapesWidth = $shapes.length * shapeWidth;

        // 初始化形状位置：从容器右侧外依次排列
        $shapes.each(function(index) {
            $(this).css('left', containerWidth + index * shapeWidth + 'px');
        });

        // 通过jQuery动画对象实现平滑线性移动
        $({ offset: containerWidth }).animate(
            { offset: -totalShapesWidth },
            {
                duration: 10000 / autoScrollSpeed, // 总时长随速度系数动态调整
                easing: 'linear', // 线性动画保证匀速移动
                step: function(now) {
                    if (isHovering) return; // 悬停时暂停动画步骤
                    
                    $shapes.each(function(index) {
                        let offset = now + index * shapeWidth;
                        // 单个形状完全移出左侧时，立刻重置到右侧末尾
                        if (offset <= -shapeWidth) {
                            offset += totalShapesWidth;
                        }
                        $(this).css('left', offset + 'px');
                    });
                },
                complete: function() {
                    // 动画结束后立即重启，实现无限循环
                    animateShapes();
                }
            }
        );
    }

    animateShapes(); // 启动形状动画
}

// 页面加载完成后启动动画
$(document).ready(function() {
    startAutoScroll();
    
    // 可选：鼠标悬停时暂停动画，提升交互体验
    $('.track-container').hover(function() {
        isHovering = true;
    }, function() {
        isHovering = false;
    });
});

关键逻辑说明 #

• 无缝循环核心：在step回调中实时计算每个形状的偏移量，当单个形状完全移出左侧容器时，直接将其偏移量加上所有形状的总宽度，让它立刻出现在右侧末尾，实现单个形状独立循环，无需等待其他形状完成移动。
• 线性匀速移动：使用easing: 'linear'确保动画全程匀速，符合需求的线性移动效果。
• 速度控制：通过autoScrollSpeed系数统一调整动画速度，数值越大移动速度越快。
• 悬停暂停：添加了可选的悬停暂停逻辑，优化用户交互体验。

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