3

I’ve been developing an iOS app using Swift 4 but recently (today) decided to switch to Flutter/dart after hearing about its capabilities.

In my iOS app, I have a moving background of waves (actual waves when you think of an ocean). The width of the the wave .png is 1606 units and I animated it in a way where it will translate from right to left 265 units in 1 second, then it repeats itself. This way, the waves are moving continuously when in reality, it’s only a fraction of the entire png repeating itself.

I needed this same background to apply to all ViewControllers (screens) in the app and I did this by sending the last known x value right before the transition through a segue (transition between viewcontrollers, I believe it’s a “route” for dart?) and used this value as the initial position of the waves in the next ViewController. When I swipe up or down, to move to different view controllers, the waves would also move accordingly.

For some reason, the animations were a bit choppy but I’d say 80% of the time, it was perfectly smooth. I need it to be 100% for when I release my app tho.

How would I go about accomplishing this type of animation in Dart?

For animations, Flare seems very promising and I’m kind of steering towards using that to accomplish my goal but I’d like to hear any advice on how I should approach this.

TNasty
  • 105
  • 7
  • https://medium.com/@nhancv/flutter-wave-clipper-animation-dc2017ddfcf3 – ibhavikmakwana Jun 07 '19 at 05:31
  • It would be helpful for the community if you could provide a graphic demonstration of [what your expected output should look like](https://stackoverflow.com/help/how-to-ask) and let us check [what you have tried so far](https://stackoverflow.com/help/minimal-reproducible-example). – MαπμQμαπkγVπ.0 Aug 26 '21 at 01:13

1 Answers1

0

The animation performance depends on how it's implemented. Without a minimal repro, it'll be challenging to figure out the issue. Though other options that you may consider to animate the background is by using AnimatedPositioned widget. Using this should help manipulate the position of widgets displayed on screen.

Another one is by using Adobe After Effects animations and rendering it with lottie plugin on your app.

Omatt
  • 8,564
  • 2
  • 42
  • 144