'Flutter Custompaint animations

I would like to do some animations with Custompaint, but I'm kinda lost, I don't know what approach to take, which types of animation, etc.

User case:

Currently, I have the view1: the red circle goes around the big circle. When I click on a blue circle, I want to fade all the canva except this circle, then move it to the center by an animation.

After, view2 is happening: Some circles move from the center to a position and links are drawn.

I can select some circles, this is my view3.

Should I have several Custompainter class, for each view ? How to move an object ? I am doing it for the red circle thanks to the code below, but I know there are other approches to do it for the blue circles. I need the processes to do, because I don't know where to start. Thank you

enter image description here

 @override
  void initState(){
    super.initState();
    Timer.periodic(const Duration(milliseconds: 50), (timer) {
      angle += pi/180;
      if (mounted) {
        setState(() {
        });
      }
    });
  }


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source