Interpolate path android performance stutters

[tharyckgusmao]

Hello friends, I was doing some tests of concepts with path interpolation, but I felt the need to share and maybe someone can give me a light...

I feel that the path interpolation on android has a slight stutter but with fps at 60, I can't understand why it seems to choke and doesn't have a good performance, on IOS no have problems.

This is my short code snippet:

I create some paths based on this method:

export function makeOverlayPath({
  sizeWidth = 0,
  sizeheight = 0,
  x = 0,
  y = 0,
  r = 0,
}): string {
  const { width: w, height: h } = Dimensions.get('window');
  const {
    topLeft = 0,
    topRight = 0,
    bottomRight = 0,
    bottomLeft = 0,
  } = typeof r === 'number'
    ? { topLeft: r, topRight: r, bottomRight: r, bottomLeft: r }
    : r;
  return {
    path: `M${w},${h}\
  H0\
  V0\
  H${w}\
  V${h}\
  Z\
  M${x + topLeft},${y}\
  a${topLeft},${topLeft},0,0,0-${topLeft},${topLeft}\
  V${sizeheight + y - bottomLeft}\
  a${bottomLeft},${bottomLeft},0,0,0,${bottomLeft},${bottomLeft}\
  H${sizeWidth + x - bottomRight}\
  a${bottomRight},${bottomRight},0,0,0,${bottomRight}-${bottomRight}\
  V${y + topRight}\
  a${topRight},${topRight},0,0,0-${topRight}-${topRight}\
  Z`,
  };
}

and I do the interpolation based on a button that changes the progress of the variable Skia:

export const Step = ({
  style,
  data,
  onNextStep,
}: {
  style: { opacity: any; position: any };
  data: Array<{
    x: number;
    y: number;
    width: number;
    height: number;
    path?: string;
    position: Position;
    step?: StepsEntity;
    action?: () => void;
  }>;
  onNextStep: () => void;
}) => {
  const progress = useValue(0);

  const updateValue = useCallback(() => {
    runTiming(progress, progress.current < 2 ? progress.current + 1 : 0, {
      duration: 500,
      easing: Easing.elastic(0.4),
    });

  }, []);
  const path = useComputedValue(
    () =>
      interpolatePaths(
        progress.current,
        [0, 1, 2],
        [data?.[0]?.path, data?.[1]?.path, data?.[2]?.path]
      ),
    [progress]
  );
  
  const click = useMemo(
    () => (
      <Text
        onPress={() => {
          updateValue();
        }}
      >
        Next
      </Text>
    ),
    []
  );
  return (
    <View style={{ ...style, width: '100%', height: '100%' }}>
      <Canvas style={{ flex: 1 }}>  
        <Path path={path} color="#00000070" />
      </Canvas>
      {click}
    </View>
  );
};

Follow the attached video, I did the same test on a release app and not so different I recorded it on my cell phone to try to show the gagging.

shuttering.mp4

Do you have any idea what I can do for android in particular? I test in Readmi note 8

Hugs

[wcandillon]

In your demo, I am not seeing where the path is being converted from SVG notation to SkPath?

[tharyckgusmao]

Hello, I convert using the Skia.Path.MakeFromSVGString(path) method, from a generated array, into useMemo like this:

const paths = useMemo(() => {

       return steps?.map(({ width, height, x, y }) => {
            let path = makeOverlayPath({
              sizeWidth: width + FACTOR_OFFSET,
              sizeheight: height + FACTOR_OFFSET,
              x: x - FACTOR_OFFSET / 2,
              y: y - FACTOR_OFFSET / 2 + (e?.offset ?? 0),
              r: 6,
            });
          return Skia.Path.MakeFromSVGString(path.path),
      });
 }, []);