React实现持续旋转的loading动画

此去正年少2024-08-01 8:18

实现一个图标的持续旋转效果，css就可以实现。

首先用keyframes定义一个旋转效果：

TypeScript 复制代码

import { keyframes } from '@mui/material';


const rotate = keyframes`
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
`;

这个效果就是旋转360度，接着我们把这个效果应用到具体的图标上，我们使用MUI的一个图标：

TypeScript 复制代码

import RefreshIcon from '@mui/icons-material/Refresh';

然后设置一个class样式：

TypeScript 复制代码

<RefreshIcon className="rotateIcon" fontSize="large" />

rotateIcon就是自定义的样式：

css 复制代码

'.rotateIcon': {
      animation: `${rotate} 0.8s linear infinite`,
 },

animation属性就是设置动画效果，具体参数里， 0.8s是旋转360度的时间，linear是指旋转过程是均匀的速度，infinite是永久，也就是持续不停的旋转。