How to animate a groups transform for rotation

[dpyeates]

Hi Folks,

I have a second hand/pointer that rotates on every second tick.
I would really like to animate the pointer between ticks.
In the example below, props.rotation gets updated with the seconds.

How would I animate the groups rotation so that it smoothly animates between updates?

function ChronometerPointer(props: Props) {

  const path = useMemo(() => {
    const p = Skia.Path.Make();
    p.moveTo(centre, 75);
    p.lineTo(centre + 6 , 100);
    p.lineTo(centre, 97);
    p.lineTo(centre - 6, 100);
    p.close();
    return p;
  }, []);
  
  return (
    <Group
      origin={{x: centre, y: centre - 11}}
      transform={[{rotate: props.rotation * (360 / 60) * D2R}]}>
      <Path path={path} color="lightgreen" />
    </Group>
  );
}

[wcandillon]

have a look at this example: https://github.com/Shopify/react-native-skia/blob/main/example/src/Examples/Breathe/Breathe.tsx
We have a useClock() hook you can use instead of useLoop() that will update on every frame.

see: https://shopify.github.io/react-native-skia/docs/animations/values