Is there a way to animate sprites at a specific fps?

[itsyoboieltr]

Hello, I have a sequence of 8 sprites. I would like to show them one-by-one at 8 frames per second to show an animation. Is it possible to do this using Skia in a performant way? Are there any examples of this?

[wcandillon]

yes definitely. Did you look at the Atlas API? It's exactly what's it's for.

there is useClock hook you can use to know when to update the sprite rectangle:
https://shopify.github.io/react-native-skia/docs/shapes/atlas/
https://shopify.github.io/react-native-skia/docs/animations/hooks/#useclock

We also support gif or animated webp

[itsyoboieltr]

I saw the API but sadly the example did not help much, as it seems to be a completely different use case. It would be cool to have an example for something like this. I am currently having a hard time figuring it out how could I do this thing :D

[diegohmac]

me too, the exact same thing 🤔

[imVinayPandya]

I am also looking for example.

[imVinayPandya]

Hey @itsyoboieltr
Here please look into my example here, #2435.

I am having FPS issue but I am able to implement Sprite Animation using <Atlas />.

If you have already solved this issue, can you please also share your learning with us?

[itsyoboieltr]

I was not able to solve this issue. For my project, I decided to use react-three-fiber instead :)

[wcandillon]

This is an example how you can control animation speed with reanimated: https://github.com/Shopify/react-native-skia/blob/main/package/src/external/reanimated/useVideo.ts