Animation

https://api.flutter.dev/flutter/animation/animation-library.html

화면에 애니메이션 효과를 넣기 위해서는 애니메이션 라이브러리에서 제공하는 여러 클래스를 이용해야 한다.
플러터에서 애니메이션 효과는 시간에 따른 값의 변화로 나타낸다.

애니메이션 3요소

• ticker
  시간의 구분을 제공한다. 초당 60번의 틱이 일어나고, 1초 동안 60번 값의 변화가 일어난다.
• AnimationController
  애니메이션 지시자의 일종인 클래스다. 재생(forward), 중지(stop), loop, 지속시간(duration) 등을 지원한다.
• 값(value)
  값으로 인해 실제로 애니메이션 효과가 수행된다. 기본값은 0에서1로 진행한다. 값을 통해 크기, 색상, 투명도 등을 변경한다.

Animation 클래스

추상(abstract)클래스이며 애니메이션의 현재값을 표현하는 클래스이다. enum타입의 애니메이션의 진행방향(forward ,reverse)이나 상태(completed, dismissed)를 가진다.

주요 메소드

• addListener()
  매순간의 값변화를 알려주는 리스너를 호출한다.
• addStatusListener()
  매순간의 상태값 변화를 알려주는 리스너를 호출한다.

AnimationController 클래스

Animation 클래스의 구현자(implementer)이다. 기본값으로 0~1을 가진다.

주요 속성

• duration
  애니메이션의 지속시간을 설정한다.
• lowerBound
  값의 하한가 지정
• upperBound
  값의 상한가 지정

주요 메소드

• forward()
  애니메이션을 앞으로 재생한다.
• reverse()
  애니메이션 역재생(값이 거꾸로 변함)

CurvedAnimation 클래스

Animation 클래스의 구현자이다. 값이 선형적 변화가 아닌 커브 형태로 변하게 만든다.

required 속성

• parent
  Curve효과를 적용할 애니메이션 대상을 지정한다.
• curve
  커브지정

예시

class _AnimationControllerPageState extends State<AnimationControllerPage> with SingleTickerProviderStateMixin { 
  Animation<double> _animation;
  AnimationController _controller;
  
  @override void initState() {
    super.initState(); 
    _controller = AnimationController(
      vsync: this,  // ticker
      duration: const Duration(seconds: 2),  // 지속시간 2초
    );  // AnimationController 생성
    _animation = CurvedAnimation(
      parent: _controller,
      curve: Curves.easeIn, 
    );  // 생성한 AnimationController에 Curve효과 적용 
    _animation.addListener(() { 
      setState(() { 
      });  // 상태저장 메소드로 인해 값 변경에 따라 UI 업데이트
    }); // 값의 변화를 알려주는 리스너추가
  } 
  @override 
  void dispose() {
    _controller.dispose(); 
    super.dispose();
  }  // 화면이 사라지면 애니메이션 작동안함

_animation.value(값) 변화

• _controller.forward()
  2초간 0~1으로 증가

• _controller.reverse()
  2초간 1~0으로 감소

• _controller.stop()
  값변화 중지