Chain animation after a runTiming

[KrisLau]

So I got my element to move with withTiming and when it reaches the destination I want it to spin. I can see an AnimationCallback but after clicking through the source files I couldn't seem to figure out how to use it.

My code right now:

const changeRunnerPosition = (cx, cy, newX, newY) => {
    const duration = 400;
    runTiming(cx, newX, {duration});
    runTiming(cy, newY, {duration});
};

Pseudocode for what I want to achieve:

const changeRunnerPosition = (cx, cy, newX, newY) => {
    const duration = 400;
    runTiming(cx, newX, {duration}, {
        onEnd: () => {
            //I would assume something like runInterpolate or sth to get it to spin?
        }
    )});
   ...
};

[wcandillon]

This is a great question.
Run timing as a completion callback:

react-native-skia/package/src/animation/timing/runTiming.ts

Line 27 in 94204d6

callback?: AnimationCallback

If you want to build more complex animations, we currently recommend to use Reanimated (UI-thread-level Reanimated integration will be available in the next release if everything goes to plan). If you are looking for more information on this topic, please refer to this thread: #805

[wcandillon]

In the two example the pivot points are different (one is 150 the other is 175) so it makes sense that they would yield a different result?

[KrisLau]

@wcandillon Both of the examples have the same starting pivot point at 175 though? The only difference is that in the skia-spin-drag snack the pivot point / center is dynamic or at least that's what I've been trying to achieve with the useComputedValue. In both examples I'm basically trying to set the pivot point to the center of the box (where the Circle is).

They both work correctly when you initially load it up. My problem is that Group origin in the skia-spin-drag snack seems to be memoizing the values i give it so when i drag the square anywhere away from it's original origin.

[wcandillon]

Could you provide me with the smallest reproducible example and maybe file an issue if you believe that this is a bug?

[KrisLau]

@wcandillon Sure will do! The repro for that would be the skia-spin-drag snack. So when you load the snack the first time, don't drag the box anywhere and just press the "Spin" button. That is the expected outcome. Then, drag the box somewhere else (make sure it is not in the original position) and press "Spin". This is the part where I think you can see the bug. The box will rotate around the original location instead of the updated new location.

[KrisLau]

Filed an issue!

• Group origin prop not updating  #1415