애니메이션 만들기

(35) 📱 Playing with Animations • Flutter Tutorial ♡ - YouTube

 

플러터로 애니메이션 기능 구현하기 

 

1. 애니메이션을 컨트롤 할 컨트롤러, 그리고 얼마큼 움직일지 그 값을 담는변수 선언하기 

 

 late AnimationController _controller;
  late Animation<double> _rotationAnimation;
  late Animation<double> _radiusAnimation;

 

2. 움직임 관련 함수 만들기 

 

@override
  void initState() {
    //3개의 컨트롤러가 필요하다 1. 움직임, 2. 얼마큼 움직이는지 3. 동그라미

    _controller = AnimationController(vsync: this,duration: Duration(seconds: 2),)..forward();

 _rotationAnimation =Tween(begin: 0.0,end: 1.0).animate(CurvedAnimation(parent: _controller, curve: Curves.easeInOut));

 _radiusAnimation=Tween(begin: 450.0, end: 10.0).animate(CurvedAnimation(parent: _controller, curve: Curves.easeInOut));


 //컨트롤러의 움직임을 실시간으로 보이게 하는 함수
   _controller.addListener(() {
     setState(() {

     });
   });

   //컨트롤러를 통한 움직임이 끝나면 다시 처음으로 돌아가게 하는 함수
  _controller.addStatusListener((status) {
    if(status==AnimationStatus.completed){
      _controller.reverse();
    } else if(status==AnimationStatus.dismissed){
      _controller.forward();

    }
  });


    super.initState();
  }

 

 

3. 움직임을 표현 해줄 그림체 만들기 

Transform 위젯을 사용해서 angle값도 조절 가능 

박스의 그림자 효과도 넣으면 더 역동적인 애니메이션 구현 가능!