From 994f08d22f316fd74e2becc3bd1a2ba5a08ad990 Mon Sep 17 00:00:00 2001 From: pipisebastian Date: Wed, 4 Dec 2024 23:03:52 +0900 Subject: [PATCH 1/3] =?UTF-8?q?feat:=20=EC=95=A0=EB=8B=88=EB=A9=94?= =?UTF-8?q?=EC=9D=B4=EC=85=98=20=EC=9D=B8=ED=84=B0=ED=8E=98=EC=9D=B4?= =?UTF-8?q?=EC=8A=A4=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit #282 --- @noctaCrdt/Interfaces.ts | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/@noctaCrdt/Interfaces.ts b/@noctaCrdt/Interfaces.ts index 8265958..46d5d2c 100644 --- a/@noctaCrdt/Interfaces.ts +++ b/@noctaCrdt/Interfaces.ts @@ -15,7 +15,15 @@ export type ElementType = | "blockquote" | "hr"; -export type AnimationType = "none" | "highlight" | "gradation"; +export type AnimationType = + | "none" + | "highlight" + | "rainbow" + | "fadeIn" + | "slideIn" + | "pulse" + | "gradation" + | "bounce"; export type TextStyleType = "bold" | "italic" | "underline" | "strikethrough"; From a8398f95cf412644da814dfcdadbf84976795302 Mon Sep 17 00:00:00 2001 From: pipisebastian Date: Wed, 4 Dec 2024 23:04:04 +0900 Subject: [PATCH 2/3] =?UTF-8?q?feat:=20=EC=95=A0=EB=8B=88=EB=A9=94?= =?UTF-8?q?=EC=9D=B4=EC=85=98=20option=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit #282 --- client/src/constants/option.ts | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/client/src/constants/option.ts b/client/src/constants/option.ts index 0cc4875..d9181d4 100644 --- a/client/src/constants/option.ts +++ b/client/src/constants/option.ts @@ -22,7 +22,12 @@ export const OPTION_CATEGORIES = { options: [ { id: "none", label: "없음" }, { id: "highlight", label: "하이라이트" }, + { id: "rainbow", label: "레인보우" }, { id: "gradation", label: "그라데이션" }, + { id: "fadeIn", label: "페이드 인" }, + { id: "slideIn", label: "슬라이드 인" }, + { id: "pulse", label: "펄스" }, + { id: "bounce", label: "바운스" }, ] as { id: AnimationType; label: string }[], }, DUPLICATE: { From 2c8974d1fbfd06ff2ddc96a6fecd6ab6c382fbff Mon Sep 17 00:00:00 2001 From: pipisebastian Date: Wed, 4 Dec 2024 23:04:17 +0900 Subject: [PATCH 3/3] =?UTF-8?q?feat:=20=EC=95=A0=EB=8B=88=EB=A9=94?= =?UTF-8?q?=EC=9D=B4=EC=85=98=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit #282 --- .../components/block/Block.animation.ts | 153 +++++++++++++++--- 1 file changed, 135 insertions(+), 18 deletions(-) diff --git a/client/src/features/editor/components/block/Block.animation.ts b/client/src/features/editor/components/block/Block.animation.ts index a02b8e6..ab80523 100644 --- a/client/src/features/editor/components/block/Block.animation.ts +++ b/client/src/features/editor/components/block/Block.animation.ts @@ -1,28 +1,40 @@ +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", @@ -30,17 +42,19 @@ const highlight = { }, }; -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;