I have created a Flare Animation for these waves I want to implement in my flutter app – see here:
https://rive.app/a/Tyrone/files/flare/wavey/preview
I've imported the file successfully into my app and it displays on my virtual device how I like it. Here is how a basic idea of my apps layout:
Screen 0 - Initial screen
Screen 1 - Enter Phone Number
Screen 2 - Enter Username
Screen 3 - Main app page
I want the animation of the waves to pick off where it left off on the initial screen. On top of that, I'm trying to get the waves to rise up each time as it progresses through the app screens.
The problem is, my attempts created very sloppy transitions.
I've set the position of the waves on the initial page near the bottom of the screen and then near the middle for the 'enter phone number screen'.
I tried using Hero with the tag as my Flare asset name assets/waves.flr however there are two problems with this:
- The stock flutter navigation animation takes place which makes the whole process look inconsistent (how do you disable this?)
- The animation of the waves on the 'enter phone number screen' does not start where the 'Initial Screen' waves left off. This was expected as I have a feeling I need to access the keyframe data of my Flare file but how do you do this?
Once this is solved, then I just need to figure out how to increase the waves heigh across the screens. I don't think this will be too hard but we'll see after I solve the first two problems
Expanded(
child: Hero(
tag: 'assets/wavey.flr',
child: Stack(
children: <Widget>[
Animations.waves, // static FlareActor variable from my Animations.dart file
// Other irrelevant code...
I would like to see a smooth transition between screens where the waves travel horizontally and vertically perfectly using Flare or if anyone has other suggestions, I'm open to them.
Right now I am seeing sloppy animation transitions.
