Transform withTiming from Reanimated 3

[andrei-zgirvaci]

Hi everyone,

I am trying to make the transform scale value animate withTiming from Reanimated 3, but it doesn't seem to work, but, I found a way to make it work with useTiming from Skia instead.

However, the animations don't look smooth even if the FPS is 60 on both the JS and UI threads. It definitely looked smoother when doing this purely with Reanimated 3 and just Animated Views.

I am sure I am doing something wrong, but not sure what... I would really appreciate it if someone could point me in the right direction!

P.S. Could it be because I am rendering multiple child in the Group component?

export default function Home() {
  const scale = useDerivedValue(() => {
    const scale = interpolate(
      value,
      [0, 100],
      [1, 2],
      {
        extrapolateRight: 'clamp',
      },
    );

    return scale;
  });

  const transformScale = useTiming(scale.value, {
    duration: 500,
    easing: Easing.inOut(Easing.quad),
  });

  const transform = useComputedValue(
    () => [{ scale: transformScale.current }],
    [transformScale],
  );

  return (
    <Canvas>
      <Group
        origin={{
          x: canvasSize.width / 2,
          y: canvasSize.height / 2,
        }}
        transform={transform}
      >
        <Circle
          cx={canvasSize.width / 2}
          cy={canvasSize.height / 2}
          r={MIN_INDICATOR_SIZE}
        />

        <Circle
          cx={canvasSize.width / 2}
          cy={canvasSize.height / 2}
          r={MIN_INDICATOR_SIZE * 0.85}
        />

        <Circle
          cx={canvasSize.width / 2}
          cy={canvasSize.height / 2}
          r={MIN_INDICATOR_SIZE * 0.65}
        />

        <Circle
          cx={canvasSize.width / 2}
          cy={canvasSize.height / 2}
          r={MIN_INDICATOR_SIZE * 0.45}
        />
      </Group>
    </Canvas>
  );

[wcandillon]

There is a known issue where the transform props in Skia is not animatable by Reanimated 3. As a workaround, until we fix the issue, we found that animating on the matrix property instead works as expected.

…

On Fri, Sep 8, 2023 at 10:16 AM Andrei Zgîrvaci ***@***.***> wrote: Hi everyone, I am trying to make the transform scale value animate withTiming from Reanimated 3, but it doesn't seem to work, but, I found a way to make it work with useTiming from Skia instead. However, the animations don't look smooth even if the FPS is 60 on both the JS and UI threads. It definitely looked smoother when doing this purely with Reanimated 3 and just Animated Views. I am sure I am doing something wrong, but not sure what... I would really appreciate it if someone could point me in the right direction! P.S. Could it be because I am rendering multiple child in the Group component? export default function Home() { const scale = useDerivedValue(() => { const scale = interpolate( value, [0, 100], [1, 2], { extrapolateRight: 'clamp', }, ); return scale; }); const transformScale = useTiming(scale.value, { duration: 500, easing: Easing.inOut(Easing.quad), }); const transform = useComputedValue( () => [{ scale: transformScale.current }], [transformScale], ); return ( <Canvas> <Group origin={{ x: canvasSize.width / 2, y: canvasSize.height / 2, }} transform={transform} > <Circle cx={canvasSize.width / 2} cy={canvasSize.height / 2} r={MIN_INDICATOR_SIZE} /> <Circle cx={canvasSize.width / 2} cy={canvasSize.height / 2} r={MIN_INDICATOR_SIZE * 0.85} /> <Circle cx={canvasSize.width / 2} cy={canvasSize.height / 2} r={MIN_INDICATOR_SIZE * 0.65} /> <Circle cx={canvasSize.width / 2} cy={canvasSize.height / 2} r={MIN_INDICATOR_SIZE * 0.45} /> </Group> </Canvas> ); — Reply to this email directly, view it on GitHub <#1825>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AACKXVRU5E6AWE5DXZBPMW3XZLH5ZANCNFSM6AAAAAA4QAOZLE> . You are receiving this because you are subscribed to this thread.Message ID: ***@***.***>

[laurens-lamberts]

Hi @wcandillon,

I faced the same issue, where I tried a reanimated shared value to transform a Group object in Skia. This had no effect. I tried a few different options, like using useComputedValue, useDerivedValue and useSharedValueEffect, but none worked. Then I found this thread.

Following your comment here, I tried a matrix like in the instagram stickers example of yours. I copied the GestureHandler and MatrixHelpers components from your example, and made a const matrix = useSharedValue(Skia.Matrix());, but as soon as I connect the (SharedValue<SkMatrix>) matrix to the Skia Group, I get the following error;

I'm using expo while trying this.

Do you have an idea how to fix this, or do you suggest waiting for the fix on applying sharevalue transforms?
No urgent issue from my side, just a hobby project :)

Thanks!

[laurens-lamberts]

Just for fun, this is what I'm making (inspired by the DARK MATTER museum in Berlin)

Simulator.Screen.Recording.-.iPhone.14.Pro.-.2023-09-16.at.12.39.15.mp4

I simulated a 3d space using calculations, and now I'm trying to make the viewing-angles interactive using a pan gesturehandler.

[wcandillon]

great to hear from you @laurens-lamberts :))

The first error is due to reanimated 3.5, switching to 3.4 while we fix the issue should fix it :)

Speaking of simulated 3d space, I've lately hit an issue with the lack of support for Matrix 4, have you experienced this limitation as well?)

[laurens-lamberts]

Hi @wcandillon, likewise! :) Really appreciate all the work you do, and we are using Skia in our client app wherever we see fit. Recently we used Skia to make animated markers on top of a maps library. This performed way better than reanimated react-native views.

Thanks for the tip. Reanimated 3.4 fixed the issue. (interestingly I was on 3.3 before, which had the issue as well...)

Here you can see the result;

Simulator.Screen.Recording.-.iPhone.14.Pro.-.2023-09-19.at.09.26.24.mp4

Regarding your question on matrices, unfortunately I've just started learning about using matrices. For the example in the video I only change the x- and y offset of the horizontal lines with two viewingAngle variables coupled to the pan gesture handler. For this little experiment I did not see the need for a Matrix 4.

The pan gesturehandler is defined as follows;

const viewingAngleVertical = useSharedValue(VIEWING_ANGLE_VERTICAL);
const viewingAngleHorizontal = useSharedValue(VIEWING_ANGLE_HORIZONTAL);

const pan = Gesture.Pan().onChange((e) => {
    viewingAngleHorizontal.value += e.changeX / 10;
    viewingAngleVertical.value += e.changeY / 10;
  });

The matrix itself is created as follows (and is not modified by my gesturehandler);

const matrix = useSharedValue(Skia.Matrix());

Then I use the following code to transform the matrix from within the component that forms the horizontal line;

  const matrixOffset = useDerivedValue(
    () =>
      translate(
        matrix.value,
        Math.tan((viewingAngleHorizontal.value * Math.PI) / 180) * xStart +
          radius,
        Math.tan((viewingAngleVertical.value * Math.PI) / 180) * yStart
      ),
    [xStart, viewingAngleHorizontal, matrix]

Then I apply the matrix to a Skia group as follows;

<Group matrix={matrixOffset}>

@andrei-zgirvaci, this might come in handy for you too as a workaround. Please note that the transform prop will be ignored as soon as a matrix is coupled. If you wish to test my code as a reference, feel free to do so; https://github.com/laurens-lamberts/react-native-skia-example

[andrei-zgirvaci]

Thank you @laurens-lamberts, I will have a look at it! 🙏

[laurens-lamberts]

Thank you @laurens-lamberts, I will have a look at it! 🙏

Oh, please note this is the translate function I used (gratefully copied from an example from William);

export const translate = (matrix: SkMatrix, x: number, y: number) => {
  "worklet";
  const m = Skia.Matrix();
  m.translate(x, y);
  m.concat(matrix);
  return m;
};

Good luck @andrei-zgirvaci!

[wcandillon]

The Reanimated 3 integration has been fixed in 3.5.3 and above.