ReactJS+TailwindCSS实现Logo滚动数组及卡顿问题解决

问题描述 #

我见过不少用于展示客户或作品集的滚动Logo效果，但一直不知道该搜什么关键词，只能靠审查元素扒HTML/CSS代码。自己实现的Logo滚动组件能运行，但每次循环图片数组时总会卡顿，以下是我的代码：

React组件代码 #

const clients = [
    {
        name: 'google',
        logo: Google,
    },
    {
        name: 'asus',
        logo: Asus
    },
    {
        name: 'byu',
        logo: Byu,
    },
    {
        name: 'kominfo',
        logo: Kominfo
    },
    {
        name: 'Telkom',
        logo: Telkom,
    },
    {
        name: 'Bank Indonesia',
        logo: Bi,
    },
    // Add more clients as needed
];

<div className='overflow-hidden py-8'>
    <div className='flex animate-left'>
        <div className="flex w-max gap-8 mr-4">
            {clients.map((client, index) => (
                <a key={index} href="#" className="flex justify-center items-center shadow-md rounded-xl p-6 w-[10rem] ">
                    <Image src={client.logo} alt={client.name} width={100} height={100} className="w-full h-full object-contain" />
                </a>
            ))}
        </div>
        <div className="flex w-max gap-8 ">
            {clients.map((client, index) => (
                <a key={index} href="#" className="flex justify-center items-center shadow-md rounded-xl p-6 w-[10rem] ">
                    <Image src={client.logo} alt={client.name} width={100} height={100} className="w-full h-full object-contain" />
                </a>
            ))}
        </div>
    </div>
</div>

Tailwind配置代码 #

extend: {
    animation: {
        'left': 'bannermoveleft 20s linear infinite',
    },
    keyframes: {
        bannermoveleft: {
            '0%': { transform: 'translateX(0)' },
            '100%': { transform: 'translateX(-50%)' },
        }
    },
}

卡顿解决方法 #

1. 启用硬件加速 #

浏览器默认可能不会用GPU渲染动画，导致卡顿。给动画元素添加硬件加速属性：

• 修改Tailwind keyframes，加入translateZ(0)触发GPU加速：

keyframes: {
    bannermoveleft: {
        '0%': { transform: 'translateX(0) translateZ(0)' },
        '100%': { transform: 'translateX(-50%) translateZ(0)' },
    }
}

• 或者给动画容器添加will-change-transform类，告诉浏览器提前优化：

<div className='flex animate-left will-change-transform'>

2. 优化DOM与React渲染 #

• 不要用index作为key：改用client.name（确保唯一），避免React复用DOM元素时出现错误重绘：

{clients.map(client => (
    <a key={client.name} href="#" className="flex justify-center items-center shadow-md rounded-xl p-6 w-[10rem] ">
        <Image src={client.logo} alt={client.name} width={100} height={100} className="w-full h-full object-contain" />
    </a>
))}

• 抽离重复组件：把单个Logo渲染逻辑抽成独立组件，减少重复代码，提升渲染效率：

const ClientLogo = ({ client }) => (
    <a href="#" className="flex justify-center items-center shadow-md rounded-xl p-6 w-[10rem]">
        <Image src={client.logo} alt={client.name} width={100} height={100} className="w-full h-full object-contain" />
    </a>
);

// 渲染时调用
<div className="flex w-max gap-8 mr-4">
    {clients.map(client => <ClientLogo key={client.name} client={client} />)}
</div>

3. 动画参数调优 #

• 调整动画时长：20秒过长可能导致帧率波动，改成15-18秒试试，保持linear缓动（匀速滚动不会有卡顿感）：

animation: {
    'left': 'bannermoveleft 16s linear infinite',
},

• 预加载图片：确保所有Logo图片尺寸正确，Next.js的Image组件已做优化，本地图片可提前导入避免加载时重排。

效果关键词参考 #

这类效果叫做无限滚动Logo墙或CSS Marquee滚动效果，搜索这两个关键词能找到更多成熟实现方案。

内容的提问来源于stack exchange，提问作者Zulzidan.com