Flutter - AnimationController

애니메이션을 위한 컨트롤러입니다.

 

다음과 같은 작업을 수행합니다.

• 애니메이션을 멈추거나, 진행, 되감기를 합니다.
• 애니메이션이 특정 값을 가지게 합니다.
• 애니메이션 값의 최소, 최대 값을 정의 할 수 있습니다.
• 물리적인 시뮬레이션을 사용하여 fling 애니메이션을 만들 수 있습니다.

기본적으로, AnimationController 는 주어진 시간동안 0.0 ~ 1.0 사이의 값을 선형적으로 생산합니다. Animation controller는 당신의 앱이 새로운 프레임을 생성 할 준비가 될 때 마다 새로운 값을 생성합니다. (보통 이 rate는 60 per second입니다. 60 FPS)

 

Ticker providers

AnimationController 는 생성자로 vsync를 전달받는 TickerProvider가 필요합니다.

TickerProvider 인터페이스는 Ticker 객체를 위한 factory를 가지고 있습니다.

38 line에 factory가 있다.

 Ticker 는 SchedulerBinding와 함께 스스로를 어떻게 작동시키고, 모든 프레임에 콜백을 발생시키는지 아는 객체 입니다.  AnimationController 클래스는 Ticker를 사용하여 애니메이션이 진행되는 동안 자신이 제어하는 애니메이션을 다음 단계로 나아가게 합니다. 

 

AnimationController이 State로 부터 생성되면, 그 State는 TickerProvider를 구현하기 위해 TickerProviderStateMixin와 SingleTickerProviderStateMixin 클래스를 사용할 수 있습니다. TickerProviderStateMixin 클래스는 항상 이런 목적으로 사용됩니다. SingleTickerProviderStateMixin는 오직 하나의 Ticker가 필요한 클래스에 조금 더 효과적입니다. (e.g. 클래스가 전체 생명주기 동안 오직 하나의 AnimationController를 생성 할 때.)

 

위젯 테스트 프레임워크인 WidgetTester 객체는 테스트의 컨텍스트에서 ticker provider로 사용 될 수 있습니다. 다른 컨텍스트에서, 더 높은 단계에서 TickerProvider를 넘겨주거나 (TickerProviderStateMixin을 믹스인하는 State로부터 간접적으로), 커스텀 TickerProvider 클래스를 만들어야 합니다.

 

생명주기

AnimationController는 더 이상 필요하지 않을 때 disposed 되어야 합니다. 그래야만 누수의 가능성을 줄일 수 있습니다. StatefulWidget 과 함께 사용 될 때, AnimationController는 State.initState 메소드 안에 생성하는 것이 일반적이고 State.dispose 메소드로 처리합니다.

Futures를 AnimationController와 사용하기

애니메이션을 시작하는 메소드들은 애니메이션이 성공적으로 완료되었을 때, 완료되는 TickerFuture 객체를 반환합니다. 그리고 절대 error를 throw하지 않습니다. 만약 애니메이션이 취소되면 future는 절대 완료되지 않습니다. 또한 이 객체는 애니메이션이 성공적으로 완료되었을 때 완료되는 future를 반환하는 TickerFuture.orCancel 프로퍼티를 가집니다. 그리고 애니메이션이 중단되면 에러와 함께 완료됩니다. 

 

이런건 다음과 같은 fadeOutAndUpdateState 메소드를 만들기 위해 사용됩니다.

 

여기 stateful 위젯인 Foo가 있습니다. 이 위젯의 State는 컨트롤러를 State.initState 메소드 안에 생성하고 State.dispose 메소드 안에서 처리하면서 필수적인 TickerProvider를 구현하기 위해 SingleTickerProviderStateMixin를 사용합니다. 컨트롤러의 지속 가긴은 Foo 위젯에 있는 프로퍼티로 설정됩니다. 그 값이 바뀌면 컨트롤러를 업데이트하기 위해 State.didUpdateWidget 메소드가 사용됩니다.

class Foo extends StatefulWidget {
  const Foo({ Key? key, required this.duration }) : super(key: key);

  final Duration duration;

  @override
  State<Foo> createState() => _FooState();
}

class _FooState extends State<Foo> with SingleTickerProviderStateMixin {
  late AnimationController _controller;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      vsync: this, // the SingleTickerProviderStateMixin
      duration: widget.duration,
    );
  }

  @override
  void didUpdateWidget(Foo oldWidget) {
    super.didUpdateWidget(oldWidget);
    _controller.duration = widget.duration;
  }

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

  @override
  Widget build(BuildContext context) {
    return Container(); // ...
  }
}

다음 메소드는 Future 객체를 기다리기 위해 Dart의 비동기 문법을 사용한 두개의 애니메이션 컨트롤러를 사용합니다.

Future<void> fadeOutAndUpdateState() async {
  try {
    await fadeAnimationController.forward().orCancel;
    await sizeAnimationController.forward().orCancel;
    setState(() {
      dismissed = true;
    });
  } on TickerCanceled {
    // the animation got canceled, probably because we were disposed
  }
}

위 코드에는 하나의 가정이 있습니다. 애니메이션의 컨트롤러가 State 서브 클래스의 State.dispose 메소드에서 처리된다는 것 입니다. 컨트롤러를 처리한 이후에, 애니메이션을 취소합니다.(TickerCanceled exception을 발생시키면서), 여기에 있는 코드는  State.mounted이 true인지 확인하는 것을 각 단계에서 건너 뛸 수 있습니다. (다시 말하지만, 컨트롤러가 State.initState에서 생성되고, State.dispose에서 처리된다는 것을 가정합니다.) 

 

See also:

• Tween, the base class for converting an AnimationController to a range of values of other types.

 

상속구조

• Object
• Listenable
• Animation<double>
• AnimationController

믹스인 된 타입들

• AnimationEagerListenerMixin
• AnimationLocalListenersMixin
• AnimationLocalStatusListenersMixin

생성자

AnimationController({

double? value, 

Duration? duration, 

Duration? reverseDuration, 

String? debugLabel, 

double lowerBound = 0.0, 

double upperBound = 1.0, 

AnimationBehavior animationBehavior = AnimationBehavior.normal, # AccessibilityFeatures.disableAnimations이 true 일 때 컨트롤러의 작동 방식

required TickerProvider vsync # 스크린을 track하며, 스크린이 디스플레이 되지 않을 때 애니메이션을 렌더하지 않게 해줍니다.

})