[flash chat] animation

Hero Animation

Hero Animation은 화면이 넘겨질 때 애니메이션을 적용시킬 수 있는 방법이다. 사용법은 간단한다.

 

Container(
     height: 200.0,
     child: Image.asset('images/logo.png'),
),

위의 Container를 아래와 같이 변경하면 된다. 

 Hero(
     tag: 'logo',
     child: Container(
             height: 200.0,
             child: Image.asset('images/logo.png'),
      ),
 ),

 

여기서 tag는 애니메이션을 적용한 요소를 선택해주는 것이다. 

 

Custom Animation 

Hero Animation은 화면의 회전할 때만 애니메이션이 시작하는 것을 알 수 있다. 

 

 

flutter에서는 애니메이션을 만들어 주기 위해 위의 3가지 요소들이 사용된다. 

 

Ticker

Ticker는 어떤 시간별로 애니메이션이 작동할때 시간을 결정해주는 역할을 한다. 즉 설정한 시간별로 trigger 역할을 한다. 

 

Animation Controller

Animation Controller는 애니메이션이 앞으로 진행할지 멈출지, 뒤로 진행할지 선택하는 기능을 제공한다. 

 

Animation Value

Animation Value의 경우에는 Animation의 값을 의미한다. 즉 값에 따라서 어떤 활동을 보여주는지 변화하는 값을 의미하는데 일반적으로는 0 ~ 1의 값으로 사용하지만 개발자가 다른 값을 원할 경우 바꿀 수 있다. 

 

 

Animation 사용방법

class _WelcomeScreenState extends State<WelcomeScreen>
    with SingleTickerProviderStateMixin {
  AnimationController animationController;

  @override
  void initState() {
    super.initState();
    animationController =
        AnimationController(duration: Duration(seconds: 1), vsync: this);
  }

 

보시는 것과 같이 이전글에서 배웠던 [Flutter] - [Dart] Mxins을 이용해서 with으로 SingleTickerProviderStateMixin을 이용하면 된다. 

우선 기본적으로 제공하는 AnimationController 객체를 만들어준다. 

 

해당 객체를 만들어 줄 때 몇초 간격으로 value를 변경해주는 Duration, 어떤 state 값을 변경해줄지 연결해주는 프로퍼티이다. 여기서는 this를 넣어주었는데 SingleTickerProviderStateMixin을 제공해주는 현재 클래스의 state값을 연결해주겠다는 의미이다. 

animationController.forward();
animationController.repeat();
animationController.reverse();

 

animationController에서 제공하는 여러 개의 함수를 사용하여 어떤 방식으로 애니메이션을 작동하게 할지 선택할 수 있다. 

 

Listner를 달아서 value가 어떻게 활동하는지 알 수 있다. 

animationController.addListener(() {
      print(animationController.value);
    });

 

 

여기서 주의해아 할 점이 build에서 까지 animationController.value의 값이 변하려면 addListener에 setState를 사용해서 값을 변화시켜줘야 한다. 

 animationController.addListener(() {
      setState(() {});
      print(animationController.value);
    });

백 그라운드에 원하는 색 변화 애니메이션 값을 넣어주면 

backgroundColor: Colors.white.withOpacity(animationController.value),

 

기본적으로 애니메이션 밸류는 0 ~ 1까지의 값을 갖고 있다. 하지만 이값도 조절할 수 있는데 AnimationController의 upperBound와 lowerBound property에 원하는 값을 넣어서 변화를 줄 수 있다. 

 

animationController =
        AnimationController(duration: Duration(seconds: 1), vsync: this, upperBound: 100.0);

 

추가로 이미지의 사이즈를 변화시켜 보겠다. 

 

animation Value 변화폭 조절하기

 

api.flutter.dev/flutter/animation/Curves-class.html

Curves class - animation library - Dart API

animation Value의 변화폭을 원하는데로 조절하기 앞서 flutter에서 많이 사용되는 방법들을 제공해주고 있다. 

 

하나의 예를 들면 animation Value가 위와 같은 그래프와 같은 속도로 값이 변한 다는 것을 애니메이션으로 보여주고 있는 것이다. 

 

코드 상에서도 사용법은 크게 어렵지 않다. 

animation =
        CurvedAnimation(parent: animationController, curve: Curves.decelerate);

 

위의 코드와 같이 parent에 Controller를 등록하여 사용하면 되고 curve에는 어떤 Curve를 사용할지 선택해주면 된다. 

 

하지만 주의할 점이 있는데 이전에 값을 100까지 upperbound 해주었다. Curves를 지정해서 사용할 경우 0 ~ 1까지의 제한을 두어야한다. 

 

애니메이션 상태 확인해보기

 animationController.addStatusListener((status) {
      print(status);
    });

addStatusListener라는 함수를 통해 status를 확인할 수 있고 forward를 통해 0에서 1 까지 갔을 때는 

 

ㅊ

AnimationStatus.completed가 나온다. 반대로 값이 줄어들게 되면 어떻게 될까?

 

AnimationStatus,dismissed가 나온다. 

 

 

추가

추가로 색의 변화도 두색을 사이에 두고 변화하는 애니메이션을 만들 수 있다. 

 

animation = ColorTween(begin: Colors.red, end: Colors.cyan)
        .animate(animationController);

이 값을 animation.value를 통해 변화를 나타낼 수 있으며 아래와 같이 변화하는 것을 볼 수 있다.