[flutter] Tween을 이용한 다양한 형태의 애니메이션 구현하기

08 Dec 2023

flutter

Flutter는 애니메이션을 구현하는 데 뛰어난 기능을 제공합니다. 애니메이션의 시작과 끝 사이의 값을 보간하는 데 사용되는 Tween 클래스를 활용하여 각종 형태의 애니메이션을 만들 수 있습니다. 이번 블로그에서는 Tween을 이용하여 간단한 애니메이션을 구현하는 방법에 대해 알아보겠습니다.

1. Tween 클래스란?

Tween 클래스는 애니메이션의 시작값과 끝값 사이를 선형적으로 이동하는 값을 계산하는 기능을 제공합니다. 예를 들어, 텍스트의 크기를 Tween을 사용하여 부드럽게 증가시키거나 이동하는 애니메이션을 만들 수 있습니다.

2. Tween으로 애니메이션 구현하기

다음은 Tween을 이용하여 텍스트의 크기를 부드럽게 변화시키는 간단한 예제 코드입니다.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> with SingleTickerProviderStateMixin {
  AnimationController _controller;
  Animation<double> _animation;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      vsync: this,
      duration: Duration(seconds: 2),
    );
    _animation = Tween<double>(begin: 50, end: 200).animate(_controller)
      ..addStatusListener((status) {
        if (status == AnimationStatus.completed) {
          _controller.reverse();
        } else if (status == AnimationStatus.dismissed) {
          _controller.forward();
        }
      });
    _controller.forward();
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: AnimatedBuilder(
          animation: _animation,
          builder: (context, child) {
            return Container(
              width: _animation.value,
              height: _animation.value,
              color: Colors.blue,
              child: Center(
                child: Text('Hello, Flutter!', style: TextStyle(fontSize: 16),),
              ),
            );
          },
        ),
      ),
    );
  }
}

위 코드에서는 Tween을 사용하여 50에서 200 사이의 값으로 크기를 부드럽게 변화시키는 애니메이션을 구현했습니다.

위의 예제는 Tween을 이용하여 애니메이션을 구현하는 간단한 방법을 보여줍니다. AnimationController와 함께 사용하여 애니메이션의 진행 여부를 제어하고, AnimatedBuilder 위젯을 사용하여 애니메이션을 화면에 표시합니다.

Tween을 이용하여 다양한 형태의 애니메이션을 만들 수 있으며, 사용자 정의 애니메이션을 구현할 때 유용하게 활용될 수 있습니다.

이렇듯 Flutter에서의 Tween을 활용하여 간단하고 다양한 형태의 애니메이션을 구현할 수 있습니다. Tween을 잘 활용하여 애니메이션의 매끄러운 변화를 구현하는 것은 Flutter 앱을 보다 매력적으로 만들어줄 것입니다.

참고 자료:

Flutter 공식 문서: https://flutter.dev/docs
Flutter 애니메이션 공식 문서: https://flutter.dev/docs/development/ui/animations