fix(🐛): Add Extrapolate option to interpolate Path (#364)

wcandillon · Oct 4, 2020 · 3accda7 · 3accda7
1 parent 1dce192
commit 3accda7
Showing 1 changed file with 26 additions and 12 deletions.
diff --git a/src/Paths.ts b/src/Paths.ts
@@ -1,4 +1,4 @@
-import { interpolate } from "react-native-reanimated";
+import Animated, { interpolate } from "react-native-reanimated";
 import parseSVG from "parse-svg-path";
 import absSVG from "abs-svg-path";
 import normalizeSVG from "normalize-svg-path";
@@ -126,7 +126,8 @@ export const parse = (d: string): Path => {
 export const interpolatePath = (
   value: number,
   inputRange: number[],
-  outputRange: Path[]
+  outputRange: Path[],
+  extrapolate = Animated.Extrapolate.CLAMP
 ) => {
   "worklet";
   const path = outputRange[0].map((segment, index) => {
@@ -146,12 +147,14 @@ export const interpolatePath = (
         x: interpolate(
           value,
           inputRange,
-          points.map((p) => p.x)
+          points.map((p) => p.x),
+          extrapolate
         ),
         y: interpolate(
           value,
           inputRange,
-          points.map((p) => p.y)
+          points.map((p) => p.y),
+          extrapolate
         ),
       } as Move;
     }
@@ -173,36 +176,42 @@ export const interpolatePath = (
           x: interpolate(
             value,
             inputRange,
-            curves.map((c) => c.to.x)
+            curves.map((c) => c.to.x),
+            extrapolate
           ),
           y: interpolate(
             value,
             inputRange,
-            curves.map((c) => c.to.y)
+            curves.map((c) => c.to.y),
+            extrapolate
           ),
         },
         c1: {
           x: interpolate(
             value,
             inputRange,
-            curves.map((c) => c.c1.x)
+            curves.map((c) => c.c1.x),
+            extrapolate
           ),
           y: interpolate(
             value,
             inputRange,
-            curves.map((c) => c.c1.y)
+            curves.map((c) => c.c1.y),
+            extrapolate
           ),
         },
         c2: {
           x: interpolate(
             value,
             inputRange,
-            curves.map((c) => c.c2.x)
+            curves.map((c) => c.c2.x),
+            extrapolate
           ),
           y: interpolate(
             value,
             inputRange,
-            curves.map((c) => c.c2.y)
+            curves.map((c) => c.c2.y),
+            extrapolate
           ),
         },
       } as Curve;
@@ -212,9 +221,14 @@ export const interpolatePath = (
   return serialize(path);
 };
 
-export const mixPath = (value: number, p1: Path, p2: Path) => {
+export const mixPath = (
+  value: number,
+  p1: Path,
+  p2: Path,
+  extrapolate = Animated.Extrapolate.CLAMP
+) => {
   "worklet";
-  return interpolatePath(value, [0, 1], [p1, p2]);
+  return interpolatePath(value, [0, 1], [p1, p2], extrapolate);
 };
 
 export const move = (x: number, y: number) => {