Disappearing animation pieces on conditional animation string switch

[NickalasB]

Flare Flutter version = flare_flutter 2.0.1

I'm running into an issue where conditionally swapping animation strings results in part of my second animation being removed. I have tested both animations individually and they both perform as expected and don't end on an empty frame. I have tested this out with a few animations and there is consistently strange behavior.

I'm not sure if this contributes but, due to the nature of my conditional, this widget gets rebuilt repeatedly.

Here's the code:

class _DialogLoadingAnimation extends StatelessWidget {
  const _DialogLoadingAnimation(this.allPhotosHaveCategories);

  final bool allPhotosHaveCategories;

  @override
  Widget build(BuildContext context) {
    const _loadingAnimation = '01_Photos Upload_v4';
    const _loadedAnimation = '02_Folder Closes';

    final _asset = AssetFlare(bundle: rootBundle, name: 'packages/syi_ui/flare/photo_organizer_files_v3.flr');

    return Center(
      child: Container(
        height: 132,
        child: FlareCacheBuilder(
          [_asset],
          builder: (BuildContext context, bool isWarm) => !isWarm
              ? Padding(
                  padding: const EdgeInsets.only(top: 5),
                  child: Icon(
                    FontIcons.openFolder,
                    color: UsvTheme.of(context).secondaryColor,
                    size: 42,
                  ),
                )
              : FlareActor.asset(
                  _asset,
                  animation: allPhotosHaveCategories ? _loadedAnimation : _loadingAnimation,
                ),
        ),
      ),
    );
  }
}

Here's an example of the undesirable behavior. The first animation loops and is an open folder with files flying into it. The second animation does not loop and is just folder closing. When it's complete- it should just persist on the screen.

To better illustrate that only parts of the animation are disappearing- here's the same result from the same code, but with the two animations in reverse order...

FlareActor.asset(
                  _asset,
                  animation: allPhotosHaveCategories ?  _loadingAnimation : _loadedAnimation,
                ),

as opposed to:

FlareActor.asset(
                  _asset,
                  animation: allPhotosHaveCategories ? _loadedAnimation : _loadingAnimation,
                ),

I appreciate any guidance.

[this-is-rafa]

Did you ever find a solution to this? I'm having the same problem.

I'm wondering if making the conditional fire a different FlareActor() every time might solve it.

[umberto-sonnino]

Would you mind sharing your Rive files on the website? When we encountered this in the past, generally the problem was that different animations need to reset the state of their nodes to the values they need. For example: if you set the opacity of one node to 0 in your animation, by playing a different one without resetting that same node's opacity to 1, will cause the node to be transparent.

[this-is-rafa]

This was exactly it. I set keyframes at the start of all the animations for all properties that were modified in the other animations, and it now works perfectly.

Thanks!

[NickalasB]

@umberto-sonnino Thank you for the reply. When you say, "Would you mind sharing your Rive files on the website?," can you explain more where I should do that? Thank you

[umberto-sonnino]

@NickalasB If they are public files, can you share the www.rive.app url so that I can take a look at that animation file?

Also, could you try adding an extra key to set opacity back to 1, at the beginning of each animation that need those elements to be visible?