feat: wavy progress bar

lovegaoshi · Dec 12, 2023 · 3c4e072 · 3c4e072
1 parent 2244a00
commit 3c4e072
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 1 deletion.
diff --git a/src/components/player/controls/WavyAnimation.tsx b/src/components/player/controls/WavyAnimation.tsx
@@ -10,6 +10,8 @@ import {
   vec,
 } from '@shopify/react-native-skia';
 import { line, curveBasis } from 'd3';
+import { gaussian } from '@utils/Gaussian';
+
 const dimension = Dimensions.get('window');
 const width = dimension.width;
 const height = 30;
@@ -37,7 +39,8 @@ export default function WaveAnimation({
         const angle = (index / width) * (Math.PI * frequency) + phase;
         return [
           index,
-          amplitude.current * Math.sin(angle) + verticalOffset.current + 10,
+          (amplitude.current * Math.sin(angle) + verticalOffset.current + 10) *
+            gaussian(index / width),
         ];
       }
     );

diff --git a/src/utils/Gaussian.ts b/src/utils/Gaussian.ts
@@ -0,0 +1,3 @@
+// e^(-(x - 0.5)² / 2*5²)
+export const gaussian = (x: number, a = 1, b = 0.5, c = 5) =>
+  Math.pow(Math.E, (a * -Math.pow(x - b, 2)) / (2 * Math.pow(c, 2)));