[flutter] TweenSequence를 이용한 일련의 애니메이션 구현하기

08 Dec 2023

flutter

애니메이션은 사용자 경험을 향상시키는 중요한 부분입니다. Flutter에서는 TweenSequence를 사용하여 일련의 애니메이션을 만들고 관리할 수 있습니다. 이 글에서는 TweenSequence를 이용하여 간단한 애니메이션 시퀀스를 구현하는 방법을 안내하겠습니다.

1. Tween과 TweenSequence란?

Tween은 애니메이션의 시작과 끝을 정의하는 클래스입니다. 예를 들어, 크기가 점차 커지는 애니메이션을 만들려면 SizeTween을 사용할 수 있습니다.

TweenSequence는 Tween을 시간에 따라 순차적으로 연결하여 일련의 애니메이션을 만드는 클래스입니다. 여러 개의 Tween을 정의하고 지정된 시간 간격에 따라 순차적으로 재생됩니다.

2. 코드 예제

아래는 TweenSequence를 사용하여 일련의 애니메이션을 구현하는 간단한 예제 코드입니다.

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> with TickerProviderStateMixin {
  AnimationController _controller;
  Animation<Offset> _animation;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      vsync: this,
      duration: Duration(seconds: 3), // 전체 시퀀스 애니메이션의 지속 시간
    );

    // 시작과 끝 값을 정의하는 Tween 객체의 시퀀스를 생성합니다.
    _animation = TweenSequence([
      TweenSequenceItem(
        tween: Tween(begin: Offset(0, 0), end: Offset(0.25, 0.25)),
        weight: 0.5, // 첫 번째 애니메이션의 지속 시간 비율
      ),
      TweenSequenceItem(
        tween: Tween(begin: Offset(0.25, 0.25), end: Offset(0.5, 0.5)),
        weight: 0.5, // 두 번째 애니메이션의 지속 시간 비율
      ),
    ]).animate(_controller);

    _controller.forward();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('TweenSequence 예제'),
        ),
        body: Center(
          child: SlideTransition(
            position: _animation,
            child: Container(
              width: 100,
              height: 100,
              color: Colors.blue,
            ),
          ),
        ),
      ),
    );
  }

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

위의 예제에서는 TweenSequence를 사용하여 Container가 화면의 가운데에서 우상단으로 이동하는 애니메이션 시퀀스를 만들었습니다.

3. 마무리

TweenSequence를 이용하면 여러 개의 Tween을 연속적으로 재생하는 일련의 애니메이션을 쉽게 구현할 수 있습니다. 이를 통해 앱의 사용자 경험을 향상시키고 시각적 효과를 추가할 수 있습니다.

더 자세한 내용은 Flutter 공식 문서를 참고하시기 바랍니다.