feat: 애니메이션 추가

#282
boostcampwm-2024 · Dec 4, 2024 · 2c8974d · 2c8974d
1 parent a8398f9
commit 2c8974d
Showing 1 changed file with 135 additions and 18 deletions.
diff --git a/client/src/features/editor/components/block/Block.animation.ts b/client/src/features/editor/components/block/Block.animation.ts
@@ -1,46 +1,60 @@
+const defaultState = {
+  background: "transparent",
+  opacity: 1,
+  x: 0,
+  y: 0,
+  scale: 1,
+  backgroundSize: "100% 100%",
+  backgroundPosition: "0 0",
+};
+
 const none = {
   initial: {
-    background: "transparent",
+    ...defaultState,
   },
   animate: {
-    background: "transparent",
+    ...defaultState,
   },
 };
 
 const highlight = {
   initial: {
-    background: `linear-gradient(to right, 
-          #BFBFFF70 0%, 
-          #BFBFFF70 0%, 
-          transparent 0%, 
-          transparent 100%
-        )`,
+    ...defaultState,
+    background: `linear-gradient(to right,
+      #BFBFFF70 0%,
+      #BFBFFF70 0%,
+      transparent 0%,
+      transparent 100%
+    )`,
   },
   animate: {
-    background: `linear-gradient(to right, 
-          #BFBFFF70 0%, 
-          #BFBFFF70 100%, 
-          transparent 100%, 
-          transparent 100%
-        )`,
+    ...defaultState,
+    background: `linear-gradient(to right,
+      #BFBFFF70 0%,
+      #BFBFFF70 100%,
+      transparent 100%,
+      transparent 100%
+    )`,
     transition: {
       duration: 1,
       ease: "linear",
     },
   },
 };
 
-const gradation = {
+const rainbow = {
   initial: {
+    ...defaultState,
     background: `linear-gradient(to right,
-      #BFBFFF 0%,    
-      #B0E2FF 50%,   
-      #FFE4E1 100%   
+      #BFBFFF 0%,
+      #B0E2FF 50%,
+      #FFE4E1 100%
     )`,
     backgroundSize: "300% 100%",
     backgroundPosition: "100% 0",
   },
   animate: {
+    ...defaultState,
     background: [
       `linear-gradient(to right,
         #BFBFFF 0%,
@@ -63,6 +77,7 @@ const gradation = {
         #FFE4E1 100%
       )`,
     ],
+    backgroundSize: "300% 100%",
     transition: {
       duration: 3,
       ease: "linear",
@@ -72,8 +87,110 @@ const gradation = {
   },
 };
 
+const fadeIn = {
+  initial: {
+    ...defaultState,
+    opacity: 0,
+  },
+  animate: {
+    ...defaultState,
+    opacity: 1,
+    transition: {
+      duration: 1,
+      ease: "easeOut",
+    },
+  },
+};
+
+const slideIn = {
+  initial: {
+    ...defaultState,
+    x: -20,
+    opacity: 0,
+  },
+  animate: {
+    ...defaultState,
+    x: 0,
+    opacity: 1,
+    transition: {
+      duration: 0.5,
+      ease: "easeOut",
+    },
+  },
+};
+
+const pulse = {
+  initial: {
+    ...defaultState,
+    scale: 1,
+  },
+  animate: {
+    ...defaultState,
+    scale: [1, 1.02, 1],
+    transition: {
+      duration: 1.5,
+      ease: "easeInOut",
+      repeat: Infinity,
+    },
+  },
+};
+
+const gradation = {
+  initial: {
+    ...defaultState,
+    background: `linear-gradient(
+      90deg,
+      rgba(255,255,255,0) 0%,
+      #BFBFFF80 70%,
+      rgba(255,255,255,0) 100%
+    )`,
+    backgroundSize: "200% 100%",
+    backgroundPosition: "100% 0",
+  },
+  animate: {
+    ...defaultState,
+    background: `linear-gradient(
+      90deg,
+      rgba(255,255,255,0) 0%,
+      #BFBFFF80 70%,
+      rgba(255,255,255,0) 100%
+    )`,
+    backgroundSize: "200% 100%",
+    backgroundPosition: ["100% 0", "-100% 0"],
+    transition: {
+      duration: 2,
+      ease: "linear",
+      repeat: Infinity,
+    },
+  },
+};
+
+const bounce = {
+  initial: {
+    ...defaultState,
+    y: 0,
+  },
+  animate: {
+    ...defaultState,
+    y: [-2, 2, -2],
+    transition: {
+      duration: 1,
+      ease: "easeInOut",
+      repeat: Infinity,
+    },
+  },
+};
+
 export const blockAnimation = {
   none,
   highlight,
+  rainbow,
+  fadeIn,
+  slideIn,
+  pulse,
   gradation,
+  bounce,
 };
+
+// types.ts
+export type AnimationType = keyof typeof blockAnimation;