kimchouard / PianoRoll-Game-Example-RN-Skia

Example of a Piano-roll animation for a music game, made with RN Skia.

Example highlighting animation performance issue with RN Skia

I'm building a music learning game, and I've simplified the use case for the sake of this investigation: a group of notes represented by blue dots need to scroll horizontally and reach the yellow line at a very precise time. The animation needs to be very smooth so it doesn't confuse the player.

• Initially, I build this using basic shapes (<Circle />, <RoundedRect />, ...), but it was very laggy, especially on the Web.

Try it for yourself here: keen-brioche-53e8c7.netlify.app (click the Render with Shapes button).

• After some experimentation, I realized that building it using only Paths would make the animation much smoother (even with CPU throttling).
• What confused me, is that in iOS, the animation's performance was pretty much the same with both approach... 🤔

Note: I'm using a simple Reanimation with a useSharedValue with a useDerivedValue to compute the note Group's transform object.

Build

It's a basic Expo Router app. So run yarn install and either build it for mobile npx expo run:ios or web npx expo start --web.