Flutter[플러터] / TweenAnimationBuilder 를 사용하여 애니메이션 컨트롤러를 사용하지 않고 애니메이션 동작 넣기 (트윈애니메이션빌더, 대상 값) TweenAnimationBuilder (Flutter Widget of the Week)

TweenAnimationBuilder<T extends Object?> class

대상 값이 변경될 때마다 위젯 의 속성을 대상 값으로 애니메이션 화하는위젯 빌더입니다.

애니메이션 속성의 유형( Color , Rect , double 등)은 제공된 트윈 의 유형 (예: ColorTween , RectTween , Tween<double> 등)을 통해 정의됩니다.

트윈 은 애니메이션의 대상 값도 정의합니다. 위젯이 처음 빌드될 때 Tween.begin 에서 Tween.end 까지 애니메이션이 실행됩니다. 새 트윈 에 새 Tween.end 값 을 지정하면 언제든지 새 애니메이션을 실행할 수 있습니다. 새 애니메이션은 현재 애니메이션 값(이전 트윈이 완료된 경우 이전 트윈 의 Tween.end 일 수 있음 )에서 새 트윈 의 Tween.end 까지 실행됩니다.

https://youtu.be/l9uHB8VXZOg

공식 문서 코드

 

---

앱에서 간단한 애니메이션을 넣어야 할 때가 있다. 이럴 때에 애니메이션을 넣으려고 하면 간단한 동작이라도 애니메이션 컨트롤러를 선언해야 하는 등 번거로움이 많다.

이럴 때 아주 빠르고 간단하게 바로 애니메이션을 넣을 수 있도록 하는 위젯이 있는데 바로 TweenAnimationBuilder 위젯이다.

이 TweenAnimationBuilder 는  Tween 값이 변경될 때마다 애니메이션을 수행해 주게 된다. 주로 Container, Text, Color, Align 등 다양한 속성에 부드러운 변화를 줄 때 사용되곤 한다. 바로 알아보자.

하위 속성

속성명	타입	기본값	설명
tween	Tween<T>	–	애니메이션의 시작과 끝 값을 정의하는 Tween 객체
duration	Duration	–	애니메이션이 완료되는 데 걸리는 시간
curve	Curve	Curves.linear	애니메이션이 진행되는 속도 곡선을 정의함
builder	ValueWidgetBuilder<T>	–	애니메이션 값이 변경될 때마다 호출되는 빌드 함수
child	Widget?	null	애니메이션에 영향을 받지 않는 고정된 자식 위젯
onEnd	VoidCallback?	null	애니메이션이 완료된 후 실행되는 콜백 함수

일단 TweenAnimationBuilder 는 필수 값으로 tween, duration, builder 를 가지는데 duration 은 바로 쉽게 먹일 수 있다.

TweenAnimationBuilder(
  duration: Duration(seconds: 3),
)

위처럼 듀레이션을 먹였다면 builder 도 먹여줘야 한다.

builder: (context, value, child) {

빌더 함수를 적게 되면 context 와 value 그리고 child 인자값을 주게 되는데 여기서 context 는 모든 빌더 함수에 무조건 들어가는 일반적인 BuildContext 타입의 context 이다.

 

이제 중요한 것은 value 와 child 인데 value 먼저 설명하자면 현재 애니메이션의 진행 값이다.

밑에서 Tween 으로 시작과 끝을 지정해 줄 건데 vlaue 는 그 시간값에 따라 값이 변화한다. 즉 이 value 값을 기반으로 애니메이션을 구현하게 된다.

child 는 변경되지 않을 고정 위젯을 미리 분리해 놓는 역할을 하게 된다. 즉 최적화 용이다. 

builder: (context, value, child) {
  return Opacity(
    opacity: value,
    child: child,
  );
},

간단한 오파시티 위젯을 사용해 줬는데 이는 value 값에 따라서 나타나고 사라지는 위젯으로 만들기 쉽기 때문이다.

암튼 이제 tween 을 사용해줘야 한다.

tween: Tween<double>(
  begin: 0,
  end: 1
),

 

Tween 은 begin 과 end 를 필수 파라미터로 받는데, 현재 코드에서는 Opacity 를 사용하고 있으니 처음에 보이지 않을 때의 값은 0, 보일 때의 값은 1이 되겠다.

 

이 tween 파라미터에서는 Tween 을 사용하여 애니메이션을 구동할 값을 지정해줘야 한다. 여기서 주의해야 할 점은 Tween 의 유형은 builder 파라미터의 두 번째 인자값(value) 유형과 클래스 유형 파라미터와 일치해야 한다.

즉, 현재 이 코드에서 value 가 사용되는 곳은 Opacity,  즉 double 이 사용되고 있다는 말이다.

그래서 Tween<double> 로 선언하여 값을 맞춰준 게 되겠다.

TweenAnimationBuilder(
  tween: Tween<double>(
    begin: 0,
    end: 1
  ),
  duration: Duration(seconds: 3),
  builder: (context, value, child) {
    return Opacity(
      opacity: value,
      child: child,
    );
  },
  child: Text('Fade In Text'), // 이거
)

마지막으로 애니메이션을 적용시킬 위젯은 TweenAnimationBuilder 의 하위속성인 child 에 넣어주면 된다.

여기서 TweenAnimationBuilder 는 하위 속성으로 onEnd 를 주는데 이걸로 애니메이션 동작이 끝났을 때 콜백함수를 호출시켜 줄 수 있다. 나는 여기다가 value 값을 변수로 만들어 준 후 onEnd 에서 그 value 값을 0으로 만들어줬다. 이러면 한번 더 변형시켜서 나타났다가 다시 사라지는 애니메이션을 구현되게 된다.

double endValue = 1;

onEnd: () => setState(() {
  endValue = 0;
}),

 

(아래의 코드에서 value 의 변화는 이렇게 된다. 0 -> 1 -> 0)

 

굳이 Tween 을 쓰지 않더라도 상황에 맞게 써주면 된다. 밑의 코드에서는 색이 바뀌는 애니메이션이 들어가 있기에 ColorTween 을 사영해줬다. 이러면 굳이 Teewn<Color> 를 하지 않아도 되게 된다. 또한 바뀌지 않는 위젯이 없다면 그냥 TweenAnimationBuilder 의 child 는 굳이 사용하지 않아도 된다.

(아래의 코드에서 value 의 변화는 이렇게 된다. red -> orange -> yellow)

 

이렇게 TweenAnimationBuilder 에 대해서 알아보았다. 예제 영상에서 '굳이 컨트롤러를 사용하지 않더라도'라는 말을 하고 있는데 솔직히 나는 이 위젯을 사용하는 것이 더 '굳이' 인 것 같다. 물론 편한 건 맞지만 이거 작성할 시간에 애니메이션 컨트롤러 코드를 적었으면 시간이 남아돌지 않았을까... 싶긴 하다. 암튼 도움이 되었길 바라며 마치겠다.