Some Animations rendering as static, not playing about rive-flutter

[meek2100]

I'm seeing this as well, I was on rive: ^0.6.4 and just switched to rive: ^0.6.7, but no improvement.

[luigi-rosso]

Did they used to play previously? Could either of you post a sample file/source?

[meek2100]

@luigi-rosso,
Here is the Rive 2 file that we were using to test with for our flutter app splash screen.
rive_splashscreen_sample.zip

Here is the code that is calling it and I have splashScreenType set to "rive" and kAnimationName set to "fmksplash" in my config file. This code works great with a Rive 1 animation or a static image/gif, but I'm just staring at a white screen for an extended period of time if it is a Rive 2 animation.

`
@OverRide
Widget build(BuildContext context) {
String splashScreenType = kSplashScreenType;
dynamic splashScreenData = kSplashScreen;

/// showing this blank page will impact to the UX
// if (appConfig == null) {
//   return Center(child: Container(color: Theme.of(context).backgroundColor));
// }

if (appConfig != null && appConfig['SplashScreen'] != null) {
  splashScreenType = appConfig['SplashScreen']['type'];
  splashScreenData = appConfig['SplashScreen']['data'];
}

if (splashScreenType == 'rive') {
  const animationName = kAnimationName;
  return RiveSplashScreen(
    onSuccess: checkToShowNextScreen,
    asset: splashScreenData,
    animationName: animationName,
  );
}

if (splashScreenType == 'flare') {
  return SplashScreen.navigate(
    name: splashScreenData,
    startAnimation: 'fluxstore',
    backgroundColor: Colors.white,
    next: checkToShowNextScreen,
    until: () => Future.delayed(const Duration(seconds: 2)),
  );
}

if (splashScreenType == 'animated') {
  debugPrint('[FLARESCREEN] Animated');
  return AnimatedSplash(
    imagePath: splashScreenData,
    next: checkToShowNextScreen,
    duration: 2500,
    type: AnimatedSplashType.StaticDuration,
    isPushNext: true,
  );
}
if (splashScreenType == 'zoomIn') {
  return CustomSplash(
    imagePath: splashScreenData,
    backGroundColor: Colors.white,
    animationEffect: 'zoom-in',
    logoSize: 50,
    next: checkToShowNextScreen,
    duration: 2500,
  );
}
if (splashScreenType == 'static') {
  return StaticSplashScreen(
    imagePath: splashScreenData,
    onNextScreen: checkToShowNextScreen,
  );
}
return Container();

}
`

[luigi-rosso]

Hi @meek2100, thanks for the example. I loaded the file into our example player and it seems to play on mac, web, and iPhone. There is a condition where it'll sometimes stop on the wrong frame (it misses drawing the last frame). We're working on a fix for that but it should the animation is still technically being applied. I'll post here when that fix is live in case it's related. If a hot-restart helps, then this might be related.

In the meantime, can you provide the source for RiveSplashScreen? Even better, if you're able to, a complete full source repro would be really helpful!

[luigi-rosso]

Please try rive: ^0.6.8 to see if it helps with this issue. It fixes an issue where the last frame of a one-shot animation wasn't being drawn.

[meek2100]

Tried 0.6.8 with no change.

Here is the source for RiveSplashScreen:

`
class RiveSplashScreen extends StatefulWidget {
final Function onSuccess;
final String asset;
final Color color;
final String animationName;
const RiveSplashScreen({
Key key,
@required this.onSuccess,
@required this.asset,
@required this.animationName,
this.color,
}) : super(key: key);
@OverRide
_RiveSplashScreenState createState() => _RiveSplashScreenState();
}

class _RiveSplashScreenState extends State {
Artboard _riveArtboard;
RiveAnimationController _controller;
@OverRide
void initState() {
super.initState();

WidgetsBinding.instance.addPostFrameCallback((timeStamp) {
  rootBundle.load(widget.asset).then(
    (data) async {
      final file = RiveFile();

      if (file.import(data)) {
        final artboard = file.mainArtboard;
        artboard.addController(_controller = SimpleAnimation('fluxstore'));
        setState(() {
          _riveArtboard = artboard;
        });
        _controller.isActiveChanged.addListener(() {
          if (!_controller.isActive) {
            Future.delayed(const Duration(seconds: 1))
                .then((value) => widget.onSuccess());
          }
        });
      }
    },
  );
});

}

@OverRide
void dispose() {
_controller.dispose();
super.dispose();
}

@OverRide
Widget build(BuildContext context) {
return Container(
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height,
color: Colors.white,
child: Center(
child: _riveArtboard == null
? const SizedBox()
: Rive(artboard: _riveArtboard),
),
);
}
}
`

[ab-ashagrie]

I'm facing the same problem https://github.com/meek2100 is facing. Have you found a solution ?

[mjohnsullivan]

I exported your Rive file in v7 format, and tried it with the latest runtime 0.7.18:

class SplashAnimation extends StatelessWidget {
  const SplashAnimation({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Simple Animation'),
      ),
      body: const Center(
        child: RiveAnimation.asset(
          'assets/splash.riv',
          fit: BoxFit.cover,
        ),
      ),
    );
  }
}

Here's an example showing how to detect when the animation has completed playing:

import 'package:flutter/material.dart';
import 'package:rive/rive.dart';

class SplashAnimation extends StatefulWidget {
  const SplashAnimation({Key? key}) : super(key: key);

  @override
  _SplashAnimationState createState() => _SplashAnimationState();
}

class _SplashAnimationState extends State<SplashAnimation> {
  late RiveAnimationController _controller;

  @override
  void initState() {
    super.initState();

    _controller = SimpleAnimation('fmksplash');
    _controller.isActiveChanged.addListener(_activeChanged);
  }

  void _activeChanged() {
    if (!_controller.isActive) {
      print('Animation complete');
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Simple Animation'),
      ),
      body: Center(
        child: RiveAnimation.asset(
          'assets/splash.riv',
          fit: BoxFit.cover,
          controllers: [_controller],
        ),
      ),
    );
  }
}

Please feel free to reopen if there are more issues or questions.

[RohanUttamVeer]

it's not working in release mode