animationController methods(forward, stop, reverse)

import 'dart:async';

import 'package:flutter/material.dart';

class ExplicitAnimationsScreen extends StatefulWidget {
  const ExplicitAnimationsScreen({super.key});

  @override
  State<ExplicitAnimationsScreen> createState() =>
      _ExplicitAnimationsScreenState();
}

class _ExplicitAnimationsScreenState extends State<ExplicitAnimationsScreen>
    with SingleTickerProviderStateMixin {
  late final AnimationController _animationController = AnimationController(
    vsync: this,
    duration: const Duration(seconds: 10),
  );

  void _play() {
    _animationController.forward();
  }

  void _pause() {
    _animationController.stop();
  }

  void _rewind() {
    _animationController.reverse();
  }

  @override
  void initState() {
    super.initState();
    Timer.periodic(const Duration(milliseconds: 500), (timer) {
      print(_animationController.value);
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Explicit Animations'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              "${_animationController.value}",
              style: const TextStyle(fontSize: 58),
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                ElevatedButton(
                  onPressed: _play,
                  child: const Text("Play"),
                ),
                ElevatedButton(
                  onPressed: _pause,
                  child: const Text("Pause"),
                ),
                ElevatedButton(
                  onPressed: _rewind,
                  child: const Text("Rewind"),
                )
              ],
            )
          ],
        ),
      ),
    );
  }
}

이 Flutter 코드는 ExplicitAnimationsScreen이라는 StatefulWidget을 사용하여 명시적 애니메이션을 구현한 예제입니다. 명시적 애니메이션은 개발자가 직접 AnimationController를 통해 애니메이션을 제어하며, 이를 통해 더 정교하고 세밀한 애니메이션 효과를 구현할 수 있습니다.

코드의 주요 부분:

1. ExplicitAnimationsScreen 클래스:

   • StatefulWidget을 상속받습니다. 이는 위젯의 상태가 사용자 상호 작용이나 내부 이벤트에 의해 변경될 수 있음을 의미합니다.
   • createState() 메서드를 통해 _ExplicitAnimationsScreenState 클래스의 인스턴스를 생성합니다.

2. _ExplicitAnimationsScreenState 클래스:

   • SingleTickerProviderStateMixin을 사용하여 애니메이션에 필요한 Ticker를 제공합니다.
   • AnimationController를 초기화하여 애니메이션의 진행을 제어합니다. 이 컨트롤러는 애니메이션의 지속 시간을 설정하고 애니메이션의 현재 진행 상태를 관리합니다.

3. AnimationController:

   • vsync 매개변수로 this를 사용하여 현재 클래스를 Ticker의 공급자로 설정합니다.
   • duration을 설정하여 애니메이션의 전체 길이를 10초로 정의합니다.

4. _play, _pause, _rewind 메서드:

   • _play()는 _animationController.forward()를 호출하여 애니메이션을 시작합니다.
   • _pause()는 _animationController.stop()을 호출하여 애니메이션을 멈춥니다.
   • _rewind()는 _animationController.reverse()를 호출하여 애니메이션을 역방향으로 재생합니다.

5. initState() 메서드와 Timer:

   • initState()에서 Timer.periodic을 사용하여 반복적으로 _animationController의 현재 값을 콘솔에 출력합니다. 이는 개발자가 애니메이션의 진행 상태를 추적할 수 있게 합니다.

6. build() 메서드:

   • Scaffold를 사용하여 기본 레이아웃을 구성합니다.
   • AppBar와 Center, Column 위젯을 사용하여 UI를 구성합니다.
   • Text 위젯을 통해 _animationController의 현재 값을 화면에 표시합니다.
   • ElevatedButton을 사용하여 사용자가 애니메이션을 제어할 수 있는 버튼을 제공합니다.

애니메이션 비즈니스 로직:

• 이 코드의 비즈니스 로직은 사용자 인터랙션에 의해 애니메이션을 제어하는 데 중점을 둡니다.
• 사용자는 'Play', 'Pause', 'Rewind' 버튼을 사용하여 애니메이션을 시작, 중지, 또는 역방향으로 재생할 수 있습니다.
• 애니메이션의 진행 상태는 _animationController.value를 통해 확인할 수 있으며, 이 값은 0에서 1 사이의 범위에서 변화합니다.
• Timer.periodic을 사용하는 것은 개발자가 애니메이션 컨트롤러의 상태를 실시간으로 모니터링할 수 있도록 합니다.