[Flutter::Animation] Tween 예제를 쓰면서 이해해보자

Tween 클래스는 시작값과 끝값 사이의 선형 보간을 수행합니다. Tween 객체를 애니메이션과 함께 사용하려면 Tween 객체의 animate 메서드를 호출하고, 수정할 애니메이션 객체를 전달합니다. Tween 객체는 chain 메서드를 사용해 체이닝할 수 있으며, 이는 애니메이션 객체를 여러 Tween 객체로 구성하는 것과 다릅니다. 체이닝을 사용하면 단일 애니메이션 객체가 여러 Tween 객체에 의해 구성될 수 있습니다.

 

Tween은 "in-between"의 줄임말로, 애니메이션의 중간 상태를 계산하는 데 사용됩니다. 기본적으로 Tween 애니메이션은 AnimationController와 함께 사용됩니다.

Tween 애니메이션의 기본 구조

1. AnimationController:
   • 애니메이션의 실행 시간과 상태를 제어하는 역할을 합니다.
   • vsync 속성을 필요로 하며, 애니메이션의 프레임 속도를 동기화하는 데 사용됩니다.
2. Tween:
   • 애니메이션의 시작과 끝 값을 정의합니다.
   • Tween<double> 뿐만 아니라 ColorTween, SizeTween 등 다양한 Tween이 존재합니다.
3. Animation:
   • Tween과 AnimationController를 결합하여 애니메이션의 중간 값을 생성합니다.
   • 쉽게 설명하면 기본적으로 애니메이션을 저장해주는 객체입니다. 이 객체에 Tween이라는 애니메이션 요소를 저장하는 것입니다.

예제 코드

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Repeating Tween Animation Example'),
        ),
        body: Center(
          child: RepeatingTweenAnimationDemo(),
        ),
      ),
    );
  }
}

class RepeatingTweenAnimationDemo extends StatefulWidget {
  @override
  _RepeatingTweenAnimationDemoState createState() => _RepeatingTweenAnimationDemoState();
}

class _RepeatingTweenAnimationDemoState extends State<RepeatingTweenAnimationDemo> with SingleTickerProviderStateMixin {
  late AnimationController _controller;
  late Animation<double> _animation;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      duration: const Duration(seconds: 2),
      vsync: this,
    )..repeat(reverse: true); // 반복 재생, reverse는 끝에서 시작 값으로 돌아가는 것을 의미

    _animation = Tween<double>(begin: 50.0, end: 200.0).animate(_controller)
      ..addListener(() {
        setState(() {});
      });
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      width: _animation.value,
      height: _animation.value,
      color: Colors.blue,
    );
  }
}

설명

1. AnimationController 초기화: SingleTickerProviderStateMixin을 사용하여 vsync를 설정하고, 애니메이션의 지속 시간을 2초로 설정합니다.
2. Tween 생성 및 Animation 연결: Tween<double>(begin: 50.0, end: 200.0)을 사용하여 시작과 끝 값을 지정합니다. 이 Tween을 animate 메서드와 함께 사용하여 애니메이션을 생성합니다.
3. addListener: 애니메이션의 값이 변경될 때마다 setState를 호출하여 위젯을 다시 빌드합니다.
4. 애니메이션 시작: forward 메서드를 호출하여 애니메이션을 시작합니다.
5. 빌드 메서드: 애니메이션 값(_animation.value)에 따라 크기가 변하는 컨테이너를 렌더링합니다.

추가 정보

1. Tween의 제네릭

   _animation = Tween<Offset>(
   begin: const Offset(100.0, 50.0),
   end: const Offset(200.0, 300.0),
   ).animate(_controller);

   위의 코드처럼 제네릭은 begin, end의 프로퍼티의 형식으로 들어가게 됩니다.
   
   
2. SingleTickerProviderStateMixin
   SingleTickerProviderStateMixin은 플러터 애니메이션에서 중요한 역할을 하는 믹스인입니다. 이 믹스인은 단일 Ticker를 제공하며, 이를 통해 애니메이션 프레임마다 콜백을 호출할 수 있습니다. Ticker는 활성화된 동안 애니메이션 프레임마다 콜백을 호출하는 객체입니다.
   SingleTickerProviderStateMixin 공식 문서 나중에 기회가 된다면 초보자가 알아 듣기 더 쉽게 설명하는 게 좋겠네요. 저도 애니메이션을 더 부르덥게 만들어주고 애니메이션 위젯 사용 시 필요한 믹스인이라는 거 외에 아직 잘 이해되지 않았어요.

결과