如何调整Material UI <Skeleton>组件动画的时长以加快动画速度？

当然可以调整动画时长来加快的播放速度！不管是默认的pulse还是wavy动画，都能通过修改animationDuration属性实现，我给你整理了几种常用的实现方式：

1. 全局修改（通过自定义主题） #

如果想让所有Skeleton组件都使用更快的动画，推荐用MUI的主题定制功能，一次修改全局生效：

import { createTheme, ThemeProvider } from '@mui/material/styles';
import Skeleton from '@mui/material/Skeleton';

// 创建自定义主题，覆盖Skeleton的动画时长
const customTheme = createTheme({
  components: {
    MuiSkeleton: {
      styleOverrides: {
        root: {
          // 默认时长是1.5s，数值越小速度越快
          animationDuration: '0.8s',
        },
      },
    },
  },
});

function YourApp() {
  return (
    <ThemeProvider theme={customTheme}>
      <Skeleton variant="rectangular" width={210} height={118} animation="pulse" />
      <Skeleton variant="text" animation="wave" />
    </ThemeProvider>
  );
}

2. 局部修改（内联sx样式） #

如果只需要调整单个Skeleton的动画速度，直接用sx属性覆盖最方便：

<Skeleton 
  variant="circular" 
  width={40} 
  height={40} 
  animation="pulse"
  sx={{ animationDuration: '0.6s' }} // 这里自定义时长
/>

3. CSS类名自定义 #

要是项目里用了单独的CSS文件，也可以写个自定义类来覆盖：

/* 你的CSS文件 */
.fast-skeleton-animation {
  animation-duration: 0.7s !important;
}

然后在组件里引入这个类：

<Skeleton 
  variant="rectangular" 
  width={300} 
  height={200} 
  className="fast-skeleton-animation"
/>

小提示 #

不管是pulse（脉冲）还是wavy（波浪）动画，修改animationDuration都能生效，数值越小，动画播放速度越快。你可以根据视觉效果调整到合适的时长，比如0.5s-1s之间的数值通常会比默认的1.5s明显快很多。

内容的提问来源于stack exchange，提问作者weno