feat(fade): adding a fade out effect to hearts and stars

mateoguzmana · Aug 12, 2022 · 69874bc · 69874bc
1 parent 3e66575
commit 69874bc
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 4 deletions.
diff --git a/src/components/Heart.tsx b/src/components/Heart.tsx
@@ -1,20 +1,36 @@
-import React, { memo } from 'react';
-import { Group, Path } from '@shopify/react-native-skia';
+import React, { memo, useCallback, useEffect } from 'react';
+import { Group, Path, runSpring, useValue } from '@shopify/react-native-skia';
 import { palette } from '../constants/theming';
+import { screenHeight } from '../constants/dimensions';
 
 interface HeartProps {
   x: number;
   y: number;
 }
 
 function Heart({ x, y }: HeartProps) {
+  const opacity = useValue(1);
+
+  const changeOpacity = useCallback(
+    () =>
+      runSpring(opacity, 0, {
+        mass: screenHeight / 3,
+      }),
+    [opacity]
+  );
+
+  useEffect(() => {
+    changeOpacity();
+  }, [changeOpacity]);
+
   return (
     <Group transform={[{ translateY: y }]}>
       <Group transform={[{ translateX: x }]}>
         <Group transform={[{ scale: 0.05 }]}>
           <Path
             path="m263.42 235.15c-66.24 0-120 53.76-120 120 0 134.76 135.93 170.09 228.56 303.31 87.574-132.4 228.56-172.86 228.56-303.31 0-66.24-53.76-120-120-120-48.048 0-89.402 28.37-108.56 69.188-19.161-40.817-60.514-69.188-108.56-69.188z"
             color={palette.red}
+            opacity={opacity}
           />
         </Group>
       </Group>

diff --git a/src/components/Star.tsx b/src/components/Star.tsx
@@ -1,20 +1,36 @@
-import React, { memo } from 'react';
-import { Group, Path } from '@shopify/react-native-skia';
+import React, { memo, useCallback, useEffect } from 'react';
+import { Group, Path, runSpring, useValue } from '@shopify/react-native-skia';
 import { palette } from '../constants/theming';
+import { screenHeight } from '../constants/dimensions';
 
 interface StarProps {
   x: number;
   y: number;
 }
 
 function Star({ x, y }: StarProps) {
+  const opacity = useValue(1);
+
+  const changeOpacity = useCallback(
+    () =>
+      runSpring(opacity, 0, {
+        mass: screenHeight / 3,
+      }),
+    [opacity]
+  );
+
+  useEffect(() => {
+    changeOpacity();
+  }, [changeOpacity]);
+
   return (
     <Group transform={[{ translateY: y }]}>
       <Group transform={[{ translateX: x }]}>
         <Group transform={[{ scale: 0.1 }]}>
           <Path
             path="M 128 0 L 168 80 L 256 93 L 192 155 L 207 244 L 128 202 L 49 244 L 64 155 L 0 93 L 88 80 L 128 0 Z"
             color={palette.yellow}
+            opacity={opacity}
           />
         </Group>
       </Group>