Rotate the animation component around the circle, take it and use it directly

design sketch

Simple renderings ：

Development renderings ：

Logic ：

Change a state variable by timing , Make each Item The class name of has changed , Then the rest is to write css The animation .

Dependent libraries used ：

classNames： A library that flexibly controls class names

Code

TSX：

/* * @Author: atwLee * @Date: 2022-06-14 11:03:41 * @LastEditors: atwLee * @LastEditTime: 2022-06-14 16:15:36 * @FilePath: \big-screen-lib\packages\big-screen\src\aroundCircleLoop\index.tsx * @Description:  Round robin assembly  */

/** * @param * AroundCircleWrapper: * 1、interval： Rotation interval  * 2、blockW：item wide  * 3、blockH：item high  * 4、dataLength： Data set length  * 5、openLoop： Whether to rotate  * 6、position： Switch to relative positioning , After switching to relative positioning, set the outer width and height （ The default is absolute positioning , Wide and high 100%） * 6.1、wrapperWidth： The outer layer is wide  * 6.2、wrapperHeight： Outer layer height  * 6.3、show： Whether it is relative positioning  * * AroundCircleItem： * num： The subscript of the current data item （ Default filling index that will do ） * @returns * * @note * 1、 The minimum data is 8 individual  * 2、AroundCircleWrapper Default absolute positioning , The relative positioning needs to be opened manually  */
import React, {
     useEffect, useRef, useState, useContext, useMemo } from "react";
import styles from "./index.less";
import classNames from "classnames";

const LoopParamContext = React.createContext({
    });
export const AroundCircleWrapper: React.FC<{
    
  /** * @description  Rotation interval . Required  */
  interval: number;
  /** * @description item wide . Required  */
  blockW: string;
  /** * @description item high . Required  */
  blockH: string;
  /** * @description  Data set length , Fill in -- data .length-- that will do . Required . At least 8 individual  */
  dataLength: number;
  /** * @description  Whether to turn on the rotation , Required  */
  openLoop: boolean;
  /** * @description show:false  For absolute positioning , Width and height are defaulted 100%. * true For relative positioning , Relative positioning requires defining width and height （wrapperWidth,wrapperHeight） */
  position: {
    
    show: boolean;
    wrapperWidth: string;
    wrapperHeight: string;
  };
}> = (props: any) => {
    
  const {
     interval, blockW, blockH, dataLength, openLoop, position } = props;
  let [animateNum, setAnimateNum] = useState(0);
  let timer = useRef<any>();
  useEffect(() => {
    
    openLoop && startLoop(); //  Turn on block rotation 
    return () => {
    
      clearInterval(timer.current);
      setAnimateNum(0);
    };
  }, []);

  function startLoop() {
    
    timer.current = setInterval(() => {
    
      setAnimateNum(animateNum++);
    }, interval);
  }
  const contextValue = useMemo(
    () => ({
     animateNum, blockW, blockH, dataLength }),
    [animateNum]
  );
  return (
    <LoopParamContext.Provider value={
    contextValue}>
      <div
        className={
    styles.dimensionLayer}
        style={
    
          position.show
            ? {
    
                position: "relative",
                width: `${
      position.wrapperWidth}px`,
                height: `${
      position.wrapperHeight}px`,
              }
            : {
    }
        }
      >
        <div className={
    styles.dimensionWrapper}>{
    props.children}</div>
      </div>
    </LoopParamContext.Provider>
  );
};

export const AroundCircleItem: React.FC<{
    
  /** * @description  control item Index of the rotation , Just pass the array subscript  */
  num: number;
}> = (props: any) => {
    
  const {
     num } = props;
  const {
     animateNum, blockW, blockH, dataLength }: any =
    useContext(LoopParamContext);
  //  Determine what else is not displayed on the screen item
  function isDimensionOther(
    animateNum: number, index: number, dataLength: number
  ): boolean {
    
    if (
      (animateNum + index) % dataLength !== 0 &&
      (animateNum + index) % dataLength !== 1 &&
      (animateNum + index) % dataLength !== 2 &&
      (animateNum + index) % dataLength !== 3 &&
      (animateNum + index) % dataLength !== 4 &&
      (animateNum + index) % dataLength !== dataLength - 1 &&
      (animateNum + index) % dataLength !== dataLength - 2 &&
      (animateNum + index) % dataLength !== dataLength - 3
    )
      return true;
    else return false;
  }
  return (
    <div
      className={
    classNames(
        styles["dimensionItem"],
        {
     [styles[`dimensionItem0`]]: (animateNum + num) % dataLength === 0 },
        {
     [styles[`dimensionItem1`]]: (animateNum + num) % dataLength === 1 },
        {
     [styles[`dimensionItem2`]]: (animateNum + num) % dataLength === 2 },
        {
     [styles[`dimensionItem3`]]: (animateNum + num) % dataLength === 3 },
        {
     [styles[`dimensionItem4`]]: (animateNum + num) % dataLength === 4 },
        {
    
          [styles[`dimensionItemL1`]]:
            (animateNum + num) % dataLength === dataLength - 1,
        },
        {
    
          [styles[`dimensionItemL2`]]:
            (animateNum + num) % dataLength === dataLength - 2,
        },
        {
    
          [styles[`dimensionItemL3`]]:
            (animateNum + num) % dataLength === dataLength - 3,
        },
        {
    
          [styles[`dimensionItemOther`]]: isDimensionOther(
            animateNum,
            num,
            dataLength
          ),
        }
      )}
      style={
    {
    
        width: `${
      blockW}px`,
        height: `${
      blockH}px`,
        left: `calc(50% - ${
      blockW / 2}px)`,
      }}
    >
      {
    props.children}
    </div>
  );
};

Less：

// 0
@dimensionItem0Transform: translate(0, 0) scale(1);
// 1&l1
@dimensionItem1-l1scale: scale(0.88);
@dimensionItem1TranslateXY: translate(110%, -16%);
@dimensionItemL1TranslateXY: translate(-110%, -16%);
// 2&l2
@dimensionItem2-l2scale: scale(0.76);
@dimensionItem2TranslateXY: translate(140%, -110%);
@dimensionItemL2TranslateXY: translate(-140%, -110%);
// 3&l3
@dimensionItem3-l3scale: scale(0.64);
@dimensionItem3TranslateXY: translate(110%, -190%);
@dimensionItemL3TranslateXY: translate(-110%, -190%);
// 4&l4
@dimensionItem4TranslateXY: translate(80%, -230%) scale(0);
@dimensionItemL4TranslateXY: translate(-80%, -230%) scale(0);

.dimensionLayer {
    
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  .dimensionWrapper {
    
    position: relative;
    width: 100%;
    height: 100%;
    contain: strict;
    .dimensionItem {
    
      position: absolute;
      bottom: 0;
      font-size: 62px;
      background-size: 100% 100%;
      background-repeat: no-repeat;
      cursor: default;
    }
    .dimensionItem0 {
    
      animation: myAnimation15-0 2s linear forwards;
      @keyframes myAnimation15-0 {
    
        from {
    
          transform: @dimensionItemL1TranslateXY @dimensionItem1-l1scale;
        }
        to {
    
          transform: @dimensionItem0Transform;
        }
      }
    }
    .dimensionItem1 {
    
      animation: myAnimation0-1 2s linear forwards;
      @keyframes myAnimation0-1 {
    
        from {
    
          transform: @dimensionItem0Transform;
        }
        to {
    
          transform: @dimensionItem1TranslateXY @dimensionItem1-l1scale;
        }
      }
    }
    .dimensionItemL1 {
    
      animation: myAnimation14-15 2s linear forwards;
      @keyframes myAnimation14-15 {
    
        from {
    
          transform: @dimensionItemL2TranslateXY @dimensionItem2-l2scale;
        }
        to {
    
          transform: @dimensionItemL1TranslateXY @dimensionItem1-l1scale;
        }
      }
    }
    .dimensionItem2 {
    
      animation: myAnimation1-2 2s linear forwards;
      @keyframes myAnimation1-2 {
    
        from {
    
          transform: @dimensionItem1TranslateXY @dimensionItem1-l1scale;
        }
        to {
    
          transform: @dimensionItem2TranslateXY @dimensionItem2-l2scale;
        }
      }
    }
    .dimensionItemL2 {
    
      animation: myAnimation13-14 2s linear forwards;
      @keyframes myAnimation13-14 {
    
        from {
    
          transform: @dimensionItemL3TranslateXY @dimensionItem3-l3scale;
        }
        to {
    
          transform: @dimensionItemL2TranslateXY @dimensionItem2-l2scale;
        }
      }
    }
    .dimensionItem3 {
    
      animation: myAnimation2-3 2s linear forwards;
      @keyframes myAnimation2-3 {
    
        from {
    
          transform: @dimensionItem2TranslateXY @dimensionItem2-l2scale;
        }
        to {
    
          transform: @dimensionItem3TranslateXY @dimensionItem3-l3scale;
        }
      }
    }
    .dimensionItemL3 {
    
      animation: myAnimation12-13 2s linear forwards;
      @keyframes myAnimation12-13 {
    
        from {
    
          transform: @dimensionItemL4TranslateXY;
          opacity: 0;
        }
        to {
    
          transform: @dimensionItemL3TranslateXY @dimensionItem3-l3scale;
          opacity: 1;
        }
      }
    }
    .dimensionItem4 {
    
      animation: myAnimation3-4 2s linear forwards;
      @keyframes myAnimation3-4 {
    
        from {
    
          transform: @dimensionItem3TranslateXY @dimensionItem3-l3scale;
          opacity: 1;
        }
        to {
    
          transform: @dimensionItem4TranslateXY;
          opacity: 0;
        }
      }
    }
    .dimensionItemOther {
    
      opacity: 0;
    }
  }
}

//example .name {
    
  padding-top: 3%;
  text-align: center;
  color: white;
  font-size: 0.9em;
  width: fit-content;
  margin: auto;
  display: flex;
  align-items: center;
  .arrowLeft {
    
    width: 80px;
    transform: rotate(180deg);
    margin-right: 26px;
  }
  .arrowRight {
    
    width: 80px;
    margin-left: 26px;
  }
}
.value {
    
  font-size: 2em;
  text-align: center;
  font-family: DiGiFaceWide;
  color: white;
  font-weight: normal;
  margin-top: 10px;
  span {
    
    font-size: 0.8em;
  }
}
.unit {
    
  text-align: center;
  color: white;
  // font-weight: bold;
  font-size: 1em;
  margin-top: 2%;
  font-family: PingFang SC-Bold, PingFang SC;
}

usage

See above for parameters

//  introduce 
import {
     AroundCircleWrapper, AroundCircleItem } from './components/AroundCircleLoop';

<AroundCircleWrapper
          blockW="750"
          blockH="480"
          dataLength={
    dataArr.length}
          interval={
    10000}
          openLoop={
    true}
          position={
    {
    
            show: false,
          }}
        >
          {
    dataArr.map((item, index) => {
    
            return (
              <AroundCircleItem key={
    index} num={
    index}>
                <p>{
    item.name}</p>
              </AroundCircleItem>
            );
          })}
        </AroundCircleWrapper>