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 auseDerivedValue
to compute the note Group's transform object.
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
.