React:音乐播放动效

QQ20221111-190840-HD.gif

思路：1.每一竖条为一个单位，内部创建n个div，每100ms改变部分div的透明度
2.每次随机一个值random，小于random的div透明度依次从0.1~1,大于random的透明度为1

import { useEffect, useState } from "react";
import { useSpring,animated } from "react-spring";
import styled from "styled-components";
import { autoWidthVW } from "../../common/Common";
import { ColumnFixedView, RowFixedView } from "../View";

const colors = [
  '#FF3399',
  '#009900',
  '#FF99FF',
  '#3300CC',
  '#990033',
  '#FFFF33',
  '#CC33FF',
  '#00CCFF',
  '#FF00FF',
  '#660099',
  '#666600',
  '#FFCC00',
]
export default function LineAnimal(){
  return <RowFixedView>
    {
      colors.map((item:string,index:number)=>{
        return <AnimalLine key={index} line={10} color={item}/>
      })
    }
  </RowFixedView>
}
function getRandom(line:number){
  return parseInt(Math.random()*(line - 1)+'') + 1
}
function AnimalLine({line,color}:{line:number,color:string}){
  const array = new Array(line).fill('');
  const [random,setRandow] = useState(1)
  useEffect(()=>{
    setInterval(() => {
      setRandow(getRandom(line))
    }, 150);
  },[])
  return <ColumnFixedView>
    {
      array.map((item:any,index:number)=>{
        const style = useSpring({
          from:{opacity:1},
          to:{opacity:0.1+((1 - 0.1) / random) * index},
          config: {
            duration: 150,
          },
        })
        return <Line color={color} style={index < random ? style : {}} key={index}/>
      })
    }
  </ColumnFixedView>
}
const Line = styled(animated.div)<{
  color:string
}>`
  width:20px;
  height:4px;
  border-radius: 2px;
  background-color: ${({color})=>color};
  margin:2px
`