AnimationStatus

AnimationStatus는 애니메이션의 상태를 나타내는 열거형(enum)입니다. Flutter의 애니메이션 시스템에서는 AnimationController의 상태 변화를 추적할 때 AnimationStatus를 사용합니다. AnimationStatus에는 다음과 같은 네 가지 종류가 있습니다:

1. dismissed

• 애니메이션이 시작 지점에 있고, 아직 실행되지 않은 상태를 나타냅니다. 예를 들어, 애니메이션의 값이 시작 값과 같고 애니메이션이 아직 시작되지 않았을 때 이 상태가 됩니다.

2. forward

• 애니메이션이 진행 중이고, 시작 지점에서 종료 지점으로 이동 중임을 나타냅니다. AnimationController.forward() 메서드를 호출하면 AnimationController의 상태가 이 상태로 변경됩니다.

3. reverse

• 애니메이션이 역방향으로 진행 중임을 나타냅니다. 즉, 종료 지점에서 시작 지점으로 되돌아가고 있음을 의미합니다. AnimationController.reverse() 메서드를 호출하면 애니메이션 컨트롤러의 상태가 이 상태로 변경됩니다.

4. completed

• 애니메이션이 종료 지점에 도달했음을 나타냅니다. 애니메이션의 값이 종료 값에 도달했고, 더 이상 진행하지 않을 때 이 상태가 됩니다.

AnimationController의 status 리스너를 사용하여 애니메이션의 상태 변화를 감지하고, 각 상태에 따라 다른 작업을 수행할 수 있습니다. 예를 들어, 애니메이션이 완료(completed) 상태에 도달했을 때 사용자에게 피드백을 제공하거나, 다른 애니메이션을 시작하는 등의 작업을 할 수 있습니다.

animationController.addStatusListener((status) {
  if (status == AnimationStatus.completed) {
    // 애니메이션이 완료되었을 때의 작업
  } else if (status == AnimationStatus.dismissed) {
    // 애니메이션이 시작 지점으로 돌아왔을 때의 작업
  }
});

이처럼 AnimationStatus를 활용하면 애니메이션의 생명주기를 더 세밀하게 제어할 수 있으며, 사용자 경험을 풍부하게 만드는 데 도움이 됩니다.

아래는 AnimationController를 사용하여 AnimationStatus의 네 가지 상태 (dismissed, forward, reverse, completed) 각각에 대응하는 동작을 수행하는 Flutter 예시 코드입니다. 이 예제에서는 간단한 애니메이션을 생성하고, 버튼을 통해 애니메이션을 제어하며, 애니메이션 상태에 따라 다른 메시지를 콘솔에 출력합니다.

import 'package:flutter/material.dart';

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

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

class AnimationStatusExample extends StatefulWidget {
  @override
  _AnimationStatusExampleState createState() => _AnimationStatusExampleState();
}

class _AnimationStatusExampleState extends State<AnimationStatusExample> with SingleTickerProviderStateMixin {
  late AnimationController _controller;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      vsync: this,
      duration: const Duration(seconds: 3),
    )..addStatusListener((status) {
        if (status == AnimationStatus.dismissed) {
          print('AnimationStatus: dismissed');
        } else if (status == AnimationStatus.forward) {
          print('AnimationStatus: forward');
        } else if (status == AnimationStatus.reverse) {
          print('AnimationStatus: reverse');
        } else if (status == AnimationStatus.completed) {
          print('AnimationStatus: completed');
        }
      });
  }

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

  void _playForward() {
    _controller.forward();
  }

  void _playReverse() {
    _controller.reverse();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Animation Status Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            ElevatedButton(
              onPressed: _playForward,
              child: Text('Play Forward'),
            ),
            ElevatedButton(
              onPressed: () {
                if (_controller.isCompleted) {
                  _controller.reverse();
                } else if (_controller.isDismissed) {
                  _controller.forward();
                }
              },
              child: Text('Toggle Animation'),
            ),
            ElevatedButton(
              onPressed: _playReverse,
              child: Text('Play Reverse'),
            ),
          ],
        ),
      ),
    );
  }
}

이 코드에서는:

• AnimationController는 애니메이션의 지속시간을 3초로 설정하고, addStatusListener를 사용하여 애니메이션 상태 변화를 감지합니다.
• 상태 변화 감지 시, 콘솔에 해당 AnimationStatus를 출력합니다.
• "Play Forward" 버튼은 애니메이션을 전방으로 재생합니다 (forward).
• "Toggle Animation" 버튼은 애니메이션 상태에 따라 전방 또는 역방으로 재생을 토글합니다.
• "Play Reverse" 버튼은 애니메이션을 역방으로 재생합니다 (reverse).

addStatusListener를 통해 애니메이션의 각 상태(dismissed, forward, reverse, completed)에 대한 반응을 확인할 수 있으며, 이를 통해 애니메이션의 제어 및 상태에 따른 UI 업데이트 등 다양한 작업을 수행할 수 있습니다.