perf: reduce the calculation of animation values

#46
dohooo · Dec 7, 2021 · de32274 · de32274
1 parent 137cb90
commit de32274
Show file tree

Hide file tree

Showing 5 changed files with 95 additions and 16 deletions.
diff --git a/src/Carousel.tsx b/src/Carousel.tsx
@@ -21,6 +21,7 @@ import { useCarouselController } from './hooks/useCarouselController';
 import { useAutoPlay } from './hooks/useAutoPlay';
 import { useIndexController } from './hooks/useIndexController';
 import { usePropsErrorBoundary } from './hooks/usePropsErrorBoundary';
+import { useVisibleRanges } from './hooks/useVisibleRanges';
 
 const defaultSpringConfig: Animated.WithSpringConfig = {
     damping: 100,
@@ -379,6 +380,12 @@ function Carousel<T extends unknown = any>(
         [getCurrentIndex, goToIndex, next, prev]
     );
 
+    const visibleRanges = useVisibleRanges({
+        total: data.length,
+        viewSize: width,
+        translation: handlerOffsetX,
+    });
+
     const renderLayout = React.useCallback(
         (item: T, i: number) => {
             switch (mode) {
@@ -393,6 +400,7 @@ function Carousel<T extends unknown = any>(
                             index={i}
                             key={i}
                             loop={loop}
+                            visibleRanges={visibleRanges}
                         >
                             {renderItem(item, i)}
                         </ParallaxLayout>
@@ -407,6 +415,7 @@ function Carousel<T extends unknown = any>(
                             index={i}
                             key={i}
                             loop={loop}
+                            visibleRanges={visibleRanges}
                         >
                             {renderItem(item, i)}
                         </CarouselItem>
@@ -423,6 +432,7 @@ function Carousel<T extends unknown = any>(
             parallaxScrollingScale,
             width,
             renderItem,
+            visibleRanges,
         ]
     );
 

diff --git a/src/CarouselItem.tsx b/src/CarouselItem.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 import { FlexStyle, View } from 'react-native';
 import Animated, { useAnimatedStyle } from 'react-native-reanimated';
 import { useOffsetX } from './hooks/useOffsetX';
+import type { IVisibleRanges } from './hooks/useVisibleRanges';
 
 export const CarouselItem: React.FC<{
     loop?: boolean;
@@ -10,6 +11,7 @@ export const CarouselItem: React.FC<{
     width: number;
     data: unknown[];
     height?: FlexStyle['height'];
+    visibleRanges: IVisibleRanges;
 }> = (props) => {
     const {
         handlerOffsetX,
@@ -19,15 +21,19 @@ export const CarouselItem: React.FC<{
         height = '100%',
         loop,
         data,
+        visibleRanges,
     } = props;
 
-    const x = useOffsetX({
-        handlerOffsetX,
-        index,
-        width,
-        data,
-        loop,
-    });
+    const x = useOffsetX(
+        {
+            handlerOffsetX,
+            index,
+            width,
+            data,
+            loop,
+        },
+        visibleRanges
+    );
 
     const offsetXStyle = useAnimatedStyle(() => {
         return {

diff --git a/src/hooks/useOffsetX.ts b/src/hooks/useOffsetX.ts
@@ -3,6 +3,7 @@ import Animated, {
     interpolate,
     useDerivedValue,
 } from 'react-native-reanimated';
+import type { IVisibleRanges } from './useVisibleRanges';
 
 interface IOpts {
     index: number;
@@ -14,7 +15,7 @@ interface IOpts {
     loop?: boolean;
 }
 
-export const useOffsetX = (opts: IOpts) => {
+export const useOffsetX = (opts: IOpts, visibleRanges: IVisibleRanges) => {
     const {
         handlerOffsetX,
         index,
@@ -30,6 +31,15 @@ export const useOffsetX = (opts: IOpts) => {
     const HALF_WIDTH = 0.5 * width;
 
     const x = useDerivedValue(() => {
+        function inRange(i: number, range: number[]) {
+            return i >= range[0] && i <= range[1];
+        }
+        if (
+            !inRange(index, visibleRanges.value.negativeRange) &&
+            !inRange(index, visibleRanges.value.positiveRange)
+        ) {
+            return Number.MAX_SAFE_INTEGER;
+        }
         if (loop) {
             const positiveCount =
                 type === 'positive' ? viewCount : VALID_LENGTH - viewCount;
@@ -71,7 +81,7 @@ export const useOffsetX = (opts: IOpts) => {
         }
 
         return handlerOffsetX.value + width * index;
-    }, [loop, data, viewCount, type]);
+    }, [loop, data, viewCount, type, visibleRanges]);
 
     return x;
 };
diff --git a/src/hooks/useVisibleRanges.tsx b/src/hooks/useVisibleRanges.tsx
@@ -0,0 +1,47 @@
+import type Animated from 'react-native-reanimated';
+import { useDerivedValue } from 'react-native-reanimated';
+
+export type IVisibleRanges = Animated.SharedValue<{
+    negativeRange: number[];
+    positiveRange: number[];
+}>;
+
+export function useVisibleRanges(options: {
+    total: number;
+    viewSize: number;
+    positiveCount?: number;
+    negativeCount?: number;
+    translation: Animated.SharedValue<number>;
+}): IVisibleRanges {
+    const {
+        total,
+        viewSize,
+        positiveCount = 1,
+        negativeCount = 1,
+        translation,
+    } = options;
+
+    const ranges = useDerivedValue(() => {
+        let curIndex = Math.round(-translation.value / viewSize);
+        curIndex = curIndex < 0 ? (curIndex % total) + total : curIndex;
+        const negativeRange = [
+            (curIndex - negativeCount + total) % total,
+            (curIndex - 1 + total) % total,
+        ];
+        const positiveRange = [
+            (curIndex + total) % total,
+            (curIndex + positiveCount + total) % total,
+        ];
+        if (negativeRange[0] < total && negativeRange[0] > negativeRange[1]) {
+            negativeRange[1] = total - 1;
+            positiveRange[0] = 0;
+        }
+        if (positiveRange[0] > positiveRange[1]) {
+            negativeRange[1] = total - 1;
+            positiveRange[0] = 0;
+        }
+        return { negativeRange, positiveRange };
+    }, [positiveCount, positiveCount, total, translation]);
+
+    return ranges;
+}
diff --git a/src/layouts/ParallaxLayout.tsx b/src/layouts/ParallaxLayout.tsx
@@ -7,6 +7,7 @@ import Animated, {
     useAnimatedStyle,
 } from 'react-native-reanimated';
 import { useOffsetX } from '../hooks/useOffsetX';
+import type { IVisibleRanges } from '../hooks/useVisibleRanges';
 
 export const ParallaxLayout: React.FC<{
     loop?: boolean;
@@ -16,6 +17,7 @@ export const ParallaxLayout: React.FC<{
     index: number;
     width: number;
     data: unknown[];
+    visibleRanges: IVisibleRanges;
 }> = (props) => {
     const {
         handlerOffsetX,
@@ -26,15 +28,19 @@ export const ParallaxLayout: React.FC<{
         loop,
         data,
         children,
+        visibleRanges,
     } = props;
 
-    const x = useOffsetX({
-        handlerOffsetX,
-        index,
-        width,
-        data,
-        loop,
-    });
+    const x = useOffsetX(
+        {
+            handlerOffsetX,
+            index,
+            width,
+            data,
+            loop,
+        },
+        visibleRanges
+    );
 
     const offsetXStyle = useAnimatedStyle(() => {
         const baseTranslateX = x.value - index * width;