带有用户进度指示器的颤动自定义AppBar显示屏

带有用户进度指示器的颤动自定义AppBar显示屏是一种常见的用户界面设计模式，用于向用户展示当前任务的进度，并通过颤动效果吸引用户的注意力。以下是关于这个问题的详细解答：

基础概念

AppBar: 在许多应用程序中，AppBar是一个位于屏幕顶部的导航栏，通常包含应用的标题、菜单按钮和其他导航元素。
用户进度指示器: 这是一种视觉元素，用于显示任务的完成进度，通常以进度条或旋转的加载指示器的形式出现。
颤动效果: 这是一种动画效果，通过轻微的震动或抖动来吸引用户的注意力，通常用于提示用户有新的通知或需要关注的事项。

类型与应用场景

类型

线性进度条: 显示任务的完成百分比。
圆形进度条: 通常用于表示加载或旋转的状态。
闪烁图标: 用于吸引注意力，通常与通知结合使用。

应用场景

文件上传: 显示上传进度。
数据加载: 在数据加载时显示加载动画。
表单提交: 提交表单时显示进度。
后台任务: 显示后台任务的执行进度。

示例代码（React + Material-UI）

以下是一个简单的示例，展示了如何在React应用中使用Material-UI创建一个带有颤动效果的自定义AppBar，并显示用户进度指示器。

import React, { useState } from 'react';
import { AppBar, Toolbar, Typography, CircularProgress, IconButton } from '@material-ui/core';
import { AlertCircle as AlertCircleIcon } from 'mdi-react';
import './App.css';

function App() {
  const [progress, setProgress] = useState(0);
  const [isShaking, setIsShaking] = useState(false);

  const startProgress = () => {
    let progress = 0;
    const interval = setInterval(() => {
      progress += 10;
      setProgress(progress);
      if (progress >= 100) {
        clearInterval(interval);
        setIsShaking(true);
        setTimeout(() => setIsShaking(false), 1000);
      }
    }, 500);
  };

  return (
    <div className="App">
      <AppBar position="static" className={`app-bar ${isShaking ? 'shaking' : ''}`}>
        <Toolbar>
          <IconButton edge="start" color="inherit" aria-label="menu">
            <AlertCircleIcon />
          </IconButton>
          <Typography variant="h6">My App</Typography>
          <div style={{ flexGrow: 1 }} />
          {progress < 100 && (
            <CircularProgress variant="determinate" value={progress} style={{ color: 'white' }} />
          )}
        </Toolbar>
      </AppBar>
      <button onClick={startProgress}>Start Progress</button>
    </div>
  );
}

export default App;

CSS样式

.app-bar {
  transition: transform 0.1s ease-in-out;
}

.app-bar.shaking {
  animation: shake 0.5s;
}

@keyframes shake {
  0% { transform: translate(1px, 1px) rotate(0deg); }
  10% { transform: translate(-1px, -2px) rotate(-1deg); }
  20% { transform: translate(-3px, 0px) rotate(1deg); }
  30% { transform: translate(3px, 2px) rotate(0deg); }
  40% { transform: translate(1px, -1px) rotate(1deg); }
  50% { transform: translate(-1px, 2px) rotate(-1deg); }
  60% { transform: translate(-3px, 1px) rotate(0deg); }
  70% { transform: translate(3px, 1px) rotate(-1deg); }
  80% { transform: translate(-1px, -1px) rotate(1deg); }
  90% { transform: translate(1px, 2px) rotate(0deg); }
  100% { transform: translate(1px, -2px) rotate(-1deg); }
}