Animation lagging in Canvas

[tabupl]

Hey, I created a line chart with Skia, which holds 2 lines with gradient below them and ref lines.
The Group component holding these elements is animated inside of the canvas with PanGesture. The thing is, that it's lagging if I have more data points (1440 datapoints is the max I use at the moment).

So I tried to understand why it's lagging, but can't find the reason behind this. This is the part of the code responsible for animation:

  const chartX = useSharedValue(0);
  const chartTransform = useDerivedValue(() => [{ translateX: chartX.value }]);
  
  const handleGestureEvent = (e: PanGestureHandlerEventPayload) => {
	  const velocityChartXValue = chartX.value + e.velocityX * SWIPE_ANIMATION_VELOCITY_MULTIPLIER;
	  const chartXAfterAnimation = clamp(Math.round(velocityChartXValue), 0, canvasShift);
  
          chartX.value = withTiming(chartXAfterAnimation, {
	          duration: 1000,
	          easing: Easing.out(Easing.poly(4)),
          });
  };
  
  const onPanGesture = Gesture.Pan().onChange(handleGestureEvent)
  
  
  return <>
  ...
  <GestureDetector gesture={onPanGesture}>
      <Canvas
	      style={{
		      width: 2 * chartWidth,
		      height: chartHeight,
		      left: -canvasShift,
		      }}
      >
	      <Group transform={chartTransform}>
  ...
              </Group>
      </Canvas>
  </GestureDetector>
  </>

While checking this, I noticed a few things:

• With less data points there is no lag (or it's smaller)
• If I remove some components from the group, the lag also gets smaller.
• If I remove withTiming and just set chartX value directly with user swiping, there is also no lag.
• Nothing inside of Group rerenders during the animation (which meanst that the animation IS actually running on UI thread).
• Also the whole chart component doesn't rerender during the Pan swiping animation.
• If I redice withTiming duration, the lag gets smaller.

I'm trying to understand where does the lag come from or how I can get rid of it. Do you have any ideas? If everything runs on UI thread, it probably shouldn't happen, no matter how many data points I have or how many components are drawn inside of Group, since they are not rerendered or redrawn while swiping.

[MatiPl01]

I've been using Skia before and I also encountered lag when the number of items rendered within a single transformed Group was large. It seems that any transformation you make to the group of items results in calculating a transformation separately for each group child, thus it is very inefficient.

If you have many elements animated while you are panning the chart, you may also encounter fps drops as gestures are handled on the same thread as animations, thus handling a gesture has an impact on fps when you animate something at the same time.

I think, the only solution is to reduce the number of elements animated at the same time or transformed within a group at the same time.