feat: ✨ 修改启动页动画效果

anyone-yuren · Dec 22, 2023 · 4ed0a1a · 4ed0a1a
1 parent 0035bb0
commit 4ed0a1a
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 11 deletions.
diff --git a/apps/admin/src/App.tsx b/apps/admin/src/App.tsx
@@ -19,7 +19,7 @@ function App() {
     const asyncOperation = async () => {
       // 模拟异步操作
       await new Promise((resolve) => {
-        setTimeout(resolve, 2000);
+        setTimeout(resolve, 3000);
       });
       // 完成异步操作后，切换到主应用
       setLoading(false);

diff --git a/apps/admin/src/components/LoadingPage/style.ts b/apps/admin/src/components/LoadingPage/style.ts
@@ -12,33 +12,34 @@ const useStyles = createStyles(({ token }) => ({
       color: token.colorPrimary,
       left: '50%',
       marginLeft: '-16px',
-      animation: 'loading3 2s linear forwards',
+      animation: 'loading3 3s linear forwards',
+      transformOrigin: 'center center',
     },
     '@keyframes loading3': {
       '50%': {
-        transform: 'scale(0.8)',
+        transform: 'perspective(100px) rotateY(360deg) scale(0.8)',
         opacity: 0.6,
       },
     },
     '.loading-side': {
       width: '80px',
       height: '80px',
       border: `2px solid ${token.colorPrimaryBorder}`,
-      animation: 'loading 2s linear forwards',
+      animation: 'loading 3s linear forwards',
     },
     '@keyframes loading': {
       '25%': {
-        transform: 'rotate(120deg)',
+        transform: 'rotate(180deg)',
       },
       '50%': {
         opacity: 0.5,
         borderRadius: '50%',
-        transform: 'scale(0.85) rotate(360deg)',
+        transform: 'scale(0.85)',
       },
       '100%': {
         transform: 'scale(1.15)',
         opacity: 1,
-        borderRadius: '40%',
+        borderRadius: '30%',
         borderColor: token.colorPrimaryBorderHover,
       },
     },
@@ -49,24 +50,24 @@ const useStyles = createStyles(({ token }) => ({
       left: '50%',
       marginLeft: '-38px',
       border: `4px solid ${token.colorPrimaryBorderHover}`,
-      animation: 'loading1 2s linear forwards',
+      animation: 'loading1 3s linear forwards',
     },
     '@keyframes loading1': {
       '0%': {
         transform: 'rotate(45deg)',
       },
       '25%': {
-        transform: 'rotate(180deg) ',
+        transform: 'rotate(270deg) ',
       },
       '50%': {
         opacity: 0.5,
         borderRadius: '50%',
-        transform: 'rotate(380deg) scale(1.4)',
+        transform: 'scale(1.4)',
       },
       '100%': {
         transform: 'scale(0.98)',
         opacity: 1,
-        borderRadius: '40%',
+        borderRadius: '30%',
         borderColor: token.colorPrimaryBorder,
       },
     },