Stutter/Stuck animation on first use
Opened this issue · 9 comments
Description
The first time I use a Rive file and the app is run, the animation seems to stutter and is not smooth. However, upon subsequent runs of the app and renders of the view, the animation works smoothly. This behavior is consistent with every animation, including the sample file "rive_animation_logo.riv".
Here is a basic code snippet that represents my usage:
struct ContentView: View {
var riveAnimation = RiveViewModel(fileName: "rive_animation_logo")
var body: some View {
VStack {
riveAnimation.view().aspectRatio(contentMode: .fit)
}
.padding()
}
}
I used the file "rive_animation_logo.riv" directly from your examples.
I'm using the runtime-exported .riv file from your examples named "rive_animation_logo.riv". If you need, I can attach it here, but it is directly from your example content.
I can also privately share the .riv/.rev file with you at hello@rive.app.
I expected the animation to run smoothly from the very first run of the app and not just on subsequent runs.
I do not have a screenshot to share right now, but the stuttering is noticeable when the app is first run.
Device: [This issue has been noticed on every device, but is especially pronounced on older devices.]
iOS version: [This occurs on all iOS versions.]
This stuttering effect on the first run could hinder the user experience, especially if it's an introduction or onboarding animation. The smooth performance on subsequent runs is great, but the first impression is vital.
Is there a way to preload the animation to ensure it runs smoothly from the very first time?
In regards, Matan
Hi @shambibambi,
This is an unfortunate side effect of using Skia as our renderer on iOS. You're noticing an improvement on subsequent runs as Skia takes some initial time to warm up shaders on first run.
Our long term plan is to replace Skia with our custom rendering engine that is optimised for vector graphics, and we're working hard to get this released on all of our runtimes.
You can read up more on our renderer here: https://rive.app/renderer
The renderer is currently experimental in our Android runtime: https://github.com/rive-app/rive-android#experimental-features
@HayesGordon Any ETA on when the new renderer will be available for Apple platforms?
Wondering if that's inherent to Skia or we could not mitigate the issue somehow.
I don't know how they achieve it but it looks like https://github.com/Shopify/react-native-skia doesn't have any issue regarding the first render/animation on iOS.
Eventually I guess we could create a "ghost" animation running when the app starts, but would it be possible that the Rive library exposes a function that we can call? Something like Rive.warmUp() to "warm" Skia?
@shambibambi @PierreCapo, I'm facing the same issue and can't find any good solution. Adding Rive.warmUp() or Rive.init() sounds like a good idea. Did you end up making a "ghost" animation to solve your problem or did you find another solution? Would really appreciate your advice.
Hey all, the Rive Renderer is available for iOS. More instructions on enabling it here: https://help.rive.app/runtimes/renderer#rive-renderer
Right now, it is opt-in and needs to be enabled; it will be the default in the future. It'll be great if you can confirm if the problem is still there when switching to this renderer.
@OlegBezr @HayesGordon indeed I have been using on iOS only the Rive renderer for months and the problem is indeed solved: the first animation is smooth 👍 Good job!
@HayesGordon, @PierreCapo, thank you for the advice! With Rive renderer our animations load quickly on the first run. But it also causes some rendering problems. All transparent colors in our animations are rendered as dark gray - I've attached an example. Is there a known fix for this issue?
Hey @OlegBezr, thanks for reporting. I'll pass this information on to the rendering team and get back to you. If you have an example .rev/.riv file to share with us that would be helpful.
@HayesGordon, sorry for the big delay on my side. I'm attaching example .rev and .riv files in a zip archive and a video demonstration for 5.10.0 rive-ios release.
RiveRenderer_transparency_bug.zip
Also I made a repo with a minimal reproducible example for your convenience:
https://github.com/OlegBezr/RiveTransparentBug
Hope to hear back from you soon!
Skia
RPReplay_Final1712170003.MP4
RiveRenderer