带你解锁 React 原生实现头像滚动播放的秘密武器

2024-01-24 08:55:31

引人入胜的头像滚动播放效果

还记得在某些网站上看到过头像滚动播放的效果吗？头像一个接一个地出现，就像走马灯一样，令人印象深刻。今天，我们将学习如何使用 React 原生技术实现这个酷炫的效果。

React 原生实现头像滚动播放的秘诀

1. 构建头像组件

首先，我们创建一个名为 Avatar.js 的 React 组件，用于渲染单个头像。这个组件非常简单，只需要接受一个头像 URL 作为 props，然后使用 <img> 标签渲染即可。

import React from "react";

const Avatar = ({ url }) => {
  return <img src={url} alt="" />;
};

export default Avatar;

2. 创建滚动播放组件

接下来，我们创建一个名为 AvatarCarousel.js 的 React 组件，用于实现头像滚动播放的效果。这个组件需要接受一个头像数组作为 props，然后使用 useEffect 钩子在组件挂载后启动一个定时器，每隔一段时间滚动头像。

import React, { useEffect, useState } from "react";
import Avatar from "./Avatar";

const AvatarCarousel = ({ avatars }) => {
  const [currentIndex, setCurrentIndex] = useState(0);

  useEffect(() => {
    const interval = setInterval(() => {
      setCurrentIndex((currentIndex + 1) % avatars.length);
    }, 3000);

    return () => {
      clearInterval(interval);
    };
  }, [currentIndex, avatars]);

  return (
    <div className="avatar-carousel">
      {avatars.map((avatar, index) => (
        <Avatar
          key={index}
          url={avatar}
          style={{
            transform: `translateX(${currentIndex === index ? 0 : 100}%)`,
          }}
        />
      ))}
    </div>
  );
};

export default AvatarCarousel;

3. 在应用中使用滚动播放组件

最后，在我们的 React 应用中使用 AvatarCarousel 组件，并传入头像数组即可。

import React from "react";
import AvatarCarousel from "./AvatarCarousel";

const App = () => {
  const avatars = [
    "https://example.com/avatar1.png",
    "https://example.com/avatar2.png",
    "https://example.com/avatar3.png",
  ];

  return (
    <div>
      <AvatarCarousel avatars={avatars} />
    </div>
  );
};

export default App;