0

I'm trying to learn react-native-gesture-handler and react-native-reanimate. I like the idéa of using matrices for transformation, but I have a hard time understanding where to fit in physics functions, such as withDecay.

I want to use the new Gestures API (https://docs.swmansion.com/react-native-gesture-handler/docs/api/gestures/gesture) instead of the old gestureHandler API (https://docs.swmansion.com/react-native-gesture-handler/docs/gesture-handlers/api/common-gh)

Here is a nice example of using matrices for transformation and simply multiplying the change-matrice with the current matrice. https://github.com/wcandillon/can-it-be-done-in-react-native/blob/master/bonuses/sticker-app/src/GestureHandler.tsx

This concept works great, but I also want to have a decay effect after ending a pan, i.e. the translation should continue to glide a bit.

Here is my first attempt. It does not work, and might be a bit naive. But I think that the code shows what I want to do. I just don't know how to do it correctly. My attempt was to add the .onEnd event, compared to Williams Candillon's original code.

  const pan = Gesture.Pan()
    .onChange(e => {
      matrix.value = multiply4(
        Matrix4.translate(e.changeX, e.changeY, 0),
        matrix.value,
      );
    })
    .onEnd(({velocityX, velocityY}) => {
      matrix.value = multiply4(
        Matrix4.translate(
          withDecay({velocity: velocityX}),
          withDecay({velocity: velocityY}),
          0,
        ),
        matrix.value,
      );
    });
Michael
  • 1,764
  • 2
  • 20
  • 36

1 Answers1

0

the problem here is the withDecay returns an animation value (it auto update). So the idea would be to do trX.value = withDecay(), same of y and then use useDerivedValue to get the total Matrix4. I hope this helps.

wcandillon
  • 2,086
  • 19
  • 19