feat: Motion/Transition 컴포넌트에서 scale 애니메이션을 사용 가능하게 한다. (#923)

* refactor: remove unused transform system prop * feat: add motion scale prop
pedaling · Jan 3, 2024 · 29a820e · 29a820e · vercel · Jan 3, 2024
1 parent 274ff21
commit 29a820e
Show file tree

Hide file tree

Showing 6 changed files with 6 additions and 22 deletions.
diff --git a/packages/vibrant-motion/src/lib/Motion/Motion.native.tsx b/packages/vibrant-motion/src/lib/Motion/Motion.native.tsx
@@ -5,7 +5,6 @@ import { Animated } from 'react-native';
 import { useInterpolation } from '@vibrant-ui/core';
 import { useSafeDeps } from '@vibrant-ui/utils';
 import { NATIVE_SUPPORT_ANIMATION_PROPERTIES, easings } from '../constants';
-import { transformMotionProps } from '../props/transform';
 import { handleTransformStyle } from '../utils/handleTransformStyle';
 import { withMotionVariation } from './MotionProps';
 
@@ -23,7 +22,7 @@ export const Motion = withMotionVariation(
     style = {},
     ...restProps
   }) => {
-    const { interpolation } = useInterpolation(transformMotionProps);
+    const { interpolation } = useInterpolation();
     const onEndRef = useSafeDeps(onEnd);
 
     const useNativeDriver = useRef(true);

diff --git a/packages/vibrant-motion/src/lib/Transition/Transition.native.tsx b/packages/vibrant-motion/src/lib/Transition/Transition.native.tsx
@@ -5,13 +5,12 @@ import { Animated } from 'react-native';
 import { useInterpolation } from '@vibrant-ui/core';
 import { useSafeDeps } from '@vibrant-ui/utils';
 import { NATIVE_SUPPORT_ANIMATION_PROPERTIES, easings } from '../constants';
-import { transformMotionProps } from '../props/transform';
 import { handleTransformStyle } from '../utils/handleTransformStyle';
 import { withTransitionVariation } from './TransitionProp';
 
 export const Transition = withTransitionVariation(
   ({ innerRef, children, style = {}, animation, duration = 500, easing = 'easeOutQuad', onEnd, ...restProps }) => {
-    const { interpolation } = useInterpolation(transformMotionProps);
+    const { interpolation } = useInterpolation();
     const reverse = useRef(false);
     const isFirstRender = useRef(true);
     const onEndRef = useSafeDeps(onEnd);

diff --git a/packages/vibrant-motion/src/lib/props/transform/index.ts b/packages/vibrant-motion/src/lib/props/transform/index.ts
@@ -1,2 +1 @@
-export { transformMotionProps } from './transform';
 export type { TransformMotionProps } from './type';
diff --git a/packages/vibrant-motion/src/lib/props/transform/transform.ts b/packages/vibrant-motion/src/lib/props/transform/transform.ts
diff --git a/packages/vibrant-motion/src/lib/props/transform/type.ts b/packages/vibrant-motion/src/lib/props/transform/type.ts
@@ -4,4 +4,5 @@ export type TransformMotionProps = {
   x?: ResponsiveValue<number | `${number}%`>;
   y?: ResponsiveValue<number | `${number}%`>;
   rotate?: ResponsiveValue<string>;
+  scale?: ResponsiveValue<number>;
 };
diff --git a/packages/vibrant-motion/src/lib/utils/handleTransformStyle.ts b/packages/vibrant-motion/src/lib/utils/handleTransformStyle.ts
@@ -1,15 +1,16 @@
 import { isDefined } from '@vibrant-ui/utils';
 
 export const handleTransformStyle = (style: Record<string, any>) => {
-  const { x, y, rotate, ...restStyle } = style;
+  const { x, y, rotate, scale, ...restStyle } = style;
 
-  if (isDefined(x) || isDefined(y) || isDefined(rotate)) {
+  if (isDefined(x) || isDefined(y) || isDefined(rotate) || isDefined(scale)) {
     return {
       ...restStyle,
       transform: {
         ...(isDefined(x) ? { translateX: x } : {}),
         ...(isDefined(y) ? { translateY: y } : {}),
         ...(isDefined(rotate) ? { rotate } : {}),
+        ...(isDefined(scale) ? { scale } : {}),
       },
     };
   }
Original file line number	Diff line number	Diff line change
		@@ -1,2 +1 @@
		export { transformMotionProps } from './transform';
		export type { TransformMotionProps } from './type';