0

Flutter has tons of features related to Animations which are very useful. Currently I'm working in a project where I have to create complex animation.

There will be an envelop. On user interaction, it will be opened and a card will be shown with animation. But some parameters of the animation will be dynamic like BackgroundColor, CardText, CardImageUrl, EnvelopColor. Note that envelop can have shadow effect based on the color of it.

I can achieve this using Rive animations. But setting the dynamic parameters is the problem. I want to go through ideas to accomplish this. I'd be glad if you help me finding out some ways for this kind of complex animation.

Rafid Hossain
  • 41
  • 2
  • "On user interaction, it will be opened and a card will be shown with animation" - so if you want good, realistic effect most likely you need N frames stored as png / webp images drawn inside a custom `CustomPainter` class – pskink Jul 07 '23 at 03:40
  • @pskink can you elaborate 'N frames' – Rafid Hossain Jul 07 '23 at 03:58
  • envelope completely closed, envelope opens in 10%, envelope opens in 20%, etc until envelope completely opened - so you have N frames that form a smooth animation when drawn over some short time - you can see how to do that here: https://stackoverflow.com/questions/71332956/how-to-create-an-infinite-rain-of-icons-in-flutter#71347939 but in your case you should use `AnimationController` passed to `repaint: ...` parameter – pskink Jul 07 '23 at 04:42
  • Oh oh I got it. I meant by 'On User interaction' any kind of scroll or button click. Should have cleared it before, sorry. If the animation triggers on button click, I can control the animation using AnimaitonController. But my question is, as the animation is pretty complex, what possible simple approaches can be thought of to accomplish this. What about flame engine? – Rafid Hossain Jul 07 '23 at 05:16

0 Answers0