How to use withDecay in the matrix version of GestureHandler in sticker-app

[msageryd]

I'm trying to figure out how to use withDecay efter translating the picture element in sticker-app. Skia, reanimated and gesture-handler are really cool, but I feel like a newbie trying to grasp it.

This is my, clearly wrong attempt:

  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,
      );
    });

[wcandillon]

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.

[msageryd]

Thanks, that make sense. I'll try it.