Repository: rive-app/rive-flutter

Issue #408: Performance issues when opacity of 0 applied to RiveAnimation.
Created: 2024-07-10T18:16:07Z
Description
A very strange and simple bug, but it's reproducible 100% of the time. When we wrap RiveAnimation with an Opacity of 0, it causes Flutter to render endlessly. Any opacity value above 0 works fine. We tried multiple animations, and it's reproducible with each one of them. We used a community animation for this bug report.
Steps To Reproduce
Steps to reproduce the behavior:

Flutter version: 3.23.0-0.1.pre (beta)
Rive version: 0.13.8
Paste the code and hot restart the app.
Observe "Performance" tab in Flutter Dev Tools.
When you make opacity as 1 and hot restart the app, performance ticks will stop.

The code:
class RiveBug extends StatelessWidget {
  const RiveBug({super.key});

  @override
  Widget build(BuildContext context) {
    return const SizedBox.square(
      dimension: 100,
      child: Opacity(
        opacity: 0,
        child: RiveAnimation.asset(
          'assets/mode_switch.riv',
        ),
      ),
    );
  }
}
Source .riv/.rev file
mode_switch.riv.zip
Expected behavior
Performance ticks should stop if animation is not animating.
Screenshots

  
    
    

    Screen.Recording.2024-07-10.at.10.59.34.AM.mov
    
  

  

  


Device & Versions

Device: iPhone 11 Pro Max (real device)
OS: iOS 17.5.1

Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel beta, 3.23.0-0.1.pre, on macOS 14.5 23F79 darwin-arm64, locale en-US)
[✓] Android toolchain - develop for Android devices (Android SDK version 33.0.0)
[✓] Xcode - develop for iOS and macOS (Xcode 15.4)
[✓] Chrome - develop for the web
[✓] Android Studio (version 2022.3)
[✓] VS Code (version 1.90.2)
[✓] Connected device (6 available)
[✓] Network resources

• No issues found!

Other notes
Discussion with Rive team.

Duplicate issue #409: Constant rebuilds when rives inside a ScrollView are out of view
Created: 2024-07-12T15:12:22Z
Description
When placing RiveAnimations in e.g. a ListView, the UI gets rebuild on every frame when no animation is running.
This happens when a Rive widget is outside the bounds of the ScrollView. If they ScrollView is only partially filled and no scrolling is possible, nothing rebuilds when no animations are playing.
As soon as any Rive widget is out of view, the widgets rebuild on every frame. This causes a constant major CPU load, especially on web in the context of a complex UI.
When scrolling to the other end of the list, it often stops the rebuilding. But this can be reversed by scrolling back a few times.
Steps To Reproduce
Steps to reproduce the behavior:

Check out this minimal example repo
Run the app and open the Flutter Performance tab
Use a low itemCount that doesn't fill the screen to see the expected behaviour
Use a higher itemCount to see constant rendering of new frames

Source .riv/.rev file
https://github.com/thomasostfeld/rive_rebuilds/blob/main/assets/rive/square.riv
Just a rotating square. The sample app specifies a non existent animation to prevent any playback and just have a static widget.
Expected behavior
The rive widgets only rebuild when an animation is playing.
Screenshots

  
    
    

    rive_rebuilds.mov
    
  

  

  


Device & Versions (please complete the following information)

Device: iOS Simulator, Google Chrome on macOS
OS: iOS 17.5, macOS 14.5 (Chrome 126.0.6478.127)
Flutter Version:

Flutter 3.22.2 • channel stable • https://github.com/flutter/flutter.git
Framework • revision 761747bfc5 (5 weeks ago) • 2024-06-05 22:15:13 +0200
Engine • revision edd8546116
Tools • Dart 3.4.3 • DevTools 2.34.3

Closing comment (2024-07-15T15:59:31Z): Thanks for the detailed report @thomasostfeld
The underlying cause seems to be the same as: #408
The issue is that we only advance Rive in the paint method, which is not called under this condition (or when a parent opacity is 0). But we do start the animation ticker as soon as the Render Object is created. So, the animation can never settle - and the animation settling is what will eventually pause the ticker.