react实现圆盘或者方形周边贪吃蛇效果组件

1.需求

需要实现一个方形按钮的周边有像贪吃蛇一样动态的效果，怎么通过react实现呢？效果如下图：

.........

上面一共20多张图片，就像贪吃蛇一样，每隔100毫秒变一下，实现动态跑动的效果 

2.实现

把上面需要实现的功能写成一个组件，页面直接调用该组件即可，代码如下： 

要引入组件页面的代码： 

import Roll from "../../components/Roll";
 
const Index = () => {
 
 return (
        

            

                
中间文案或者图片
                
            
        
    ）
}
 
export default Index;

对上面代码的说明：

        注意main.roll类的position属性设置，一般都是relative，这样才能让贪吃蛇组件包围在mid_intro周边

 组件：

import style from "./style.less";
import React, { useEffect, useRef, useState } from "react";

 
const Roll = () => {
  //计数：一般是图片总数
  const [count, setCount] = useState(0);
  
  const timer = useRef(null);
  useEffect(() => {
    if (timer.current != null) {
      clearTimeout(timer.current);
      timer.current = null;
    }
    timer.current = setTimeout(() => {
      if (count == 20) {  //当计数等于最高图片时，从0图片开始
        setCount(0);
        return;
      }
      setCount(() => count + 1);
    }, 60);//每隔60毫秒执行一次
    return () => {
      clearTimeout(timer.current);
    };
  }, [count]);
  return React.useMemo(
    () => (
      

        //有多少张图片循环切换
        {[0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20].map((index) => {
          return (
            
          );
        })}
      
    ),
    [count]
  );
};
 
export default Roll;

上述代码实现效果实际上就是多张图片不停地切换，来达到需要的效果 

 css:

#根据自己需求调整属性
.img_roll {
  position: absolute;
  top: -2rem;
  left: -2.2022rem;
  width: 12.40667rem;
}