Can you animate matrix with spring?

[alarm109]

I'm doing a zoom function. But I want to scale up the image, for this reason I want to reset the scale value to 1 when the scale is lower than 1.

Example code:

I'm using code from Stickers

  const zoomGesture = Gesture.Pinch()
    .onBegin(e => {
      origin.value = Skia.Point(e.focalX, e.focalY);
      offset.value = matrix.value;
    })
    .onChange(e => {
      matrix.value = scale(offset.value, e.scale, origin.value);
    })
    .onEnd(() => {
      // Check if scale is lower than 1
      if (matrix.value.get()[0] < 1) {
        // I want to add here Spring animation
        matrix.value = scale(offset.value, 1, origin.value);
      }
    });

Problem

Currently when I set scale value to 1, it transforms it without any animation. I would like to add spring animation. Is it possible to achieve it?

[wcandillon]

That's a great question and one that comes up a lot. We don't offer such utility function at the moment. You would have to build it yourself currently. Here's a very rough example:

function lerpArray(a: number[], b: number[], t: number): number[] {
   "worklet";
    if (a.length !== b.length) {
        throw new Error('Arrays must have the same length');
    }

    let result: number[] = [];
    for (let i = 0; i < a.length; i++) {
        result[i] = (1 - t) * a[i] + t * b[i];
    }

    return result;
}