feat: add customizable preset types

hetae · Dec 8, 2023 · be1d5cd · be1d5cd
1 parent 86a5346
commit be1d5cd
Show file tree

Hide file tree

Showing 4 changed files with 90 additions and 6 deletions.
diff --git a/src/app/preset/presets/block-presets.ts b/src/app/preset/presets/block-presets.ts
@@ -21,4 +21,17 @@ export const blockPreset = [
       opacity: 1,
     },
   },
+  {
+    name: "bounce",
+    description: "bounce like button",
+    from: {
+      scale: 0.8,
+    },
+    to: {
+      scale: 1,
+    },
+    rest: {
+      ease: "bounce",
+    },
+  },
 ] as const;
diff --git a/src/app/preset/presets/blocks-presets.ts b/src/app/preset/presets/blocks-presets.ts
@@ -12,4 +12,35 @@ export const blocksPreset = [
       stagger: 0.1,
     },
   },
+  {
+    name: "move from x",
+    description: "a zoom entry block",
+    from: {
+      x: 0,
+    },
+    to: {
+      x: 300,
+    },
+    rest: {
+      ease: "back",
+      stagger: 0.1,
+    },
+  },
+  {
+    name: "move from x",
+    description: "a zoom entry block",
+    width: 100,
+    height: 30,
+    from: {
+      x: 0,
+      opacity: 0,
+    },
+    to: {
+      x: 300,
+      opacity: 1,
+    },
+    rest: {
+      stagger: 0.1,
+    },
+  },
 ] as const;
diff --git a/src/components/preset-page/MotionBlock.tsx b/src/components/preset-page/MotionBlock.tsx
@@ -70,21 +70,58 @@ function MotionBlock({
     };
   }, [isHover, motion, type]);
 
+  const CustomBlock = () => {
+    if (type === "text") {
+      return <Text ref={textRef}>{motion.description}</Text>;
+    } else if (type === "block") {
+      if (motion.width && motion.height) {
+        return (
+          <Block
+            ref={blockRef}
+            style={{
+              width: motion.width,
+              height: motion.height,
+            }}
+          />
+        );
+      }
+      return <Block ref={blockRef} />;
+    } else if (type === "blocks") {
+      if (motion.width && motion.height) {
+        return (
+          <TinyBlock
+            style={{
+              width: motion.width,
+              height: motion.height,
+            }}
+          />
+        );
+      }
+      return <TinyBlock />;
+    }
+    return <></>;
+  };
+
   return (
     <Container
       onMouseEnter={() => setIsHover(true)}
       onMouseLeave={() => setIsHover(false)}
       onClick={onClick}
       isClicked={isClicked}
     >
-      {type === "text" && <Text ref={textRef}>{motion.description}</Text>}
-      {type === "block" && <Block ref={blockRef} />}
+      {(type === "text" || type === "block") && <CustomBlock />}
       {type === "blocks" && (
         <Blocks ref={blocksRef}>
-          <TinyBlock />
-          <TinyBlock />
-          <TinyBlock />
-          <TinyBlock />
+          {motion.count !== undefined ? (
+            [...Array(motion.count)].map((_, i) => <CustomBlock key={i} />)
+          ) : (
+            <>
+              <CustomBlock />
+              <CustomBlock />
+              <CustomBlock />
+              <CustomBlock />
+            </>
+          )}
         </Blocks>
       )}
     </Container>

diff --git a/src/types/presetTypes.ts b/src/types/presetTypes.ts
@@ -5,4 +5,7 @@ export interface PresetType {
   from?: any;
   to?: any;
   rest?: any;
+  width?: number;
+  height?: number;
+  count?: number;
 }