[Flutter::Animation] Ticker 이해

Ticker란?

Ticker는. Ticker는 일정한 시간 간격으로 콜백을 호출하는 객체입니다. 이를 통해 애니메이션 프레임을 생성하고, 애니메이션의 상태를 업데이트할 수 있습니다. 공식 문서에 첫줄을 보면 애니메이션 프레임당 한 번 콜백한다는 사실을 알 수 있습니다.

Ticker의 역할

1. 애니메이션 프레임 생성:
   • Ticker는 지정된 간격으로 콜백을 호출하여 애니메이션 프레임을 생성합니다. 이를 통해 애니메이션이 부드럽게 실행됩니다.
2. 시간 기반 업데이트:
   • Ticker는 시간 기반으로 상태를 업데이트합니다. 예를 들어, 애니메이션의 진행 상황을 시간에 따라 계산하고, 화면을 다시 그리는 역할을 합니다.

Ticker 사용

플러터에서 Ticker를 직접 사용할 때는 보통 TickerProvider를 통해 Ticker를 생성합니다. 주로 SingleTickerProviderStateMixin이나 TickerProviderStateMixin을 사용하여 Ticker를 제공합니다.

Ticker class 혼자만으로 Ticker를 생성할 수 없다는 사실을 알 수 있습니다.

기본 사용 예제

import 'package:flutter/material.dart';
import 'package:flutter/scheduler.dart';

class TickerDemo extends StatefulWidget {
  @override
  _TickerDemoState createState() => _TickerDemoState();
}

class _TickerDemoState extends State<TickerDemo> with SingleTickerProviderStateMixin {
  Ticker? _ticker;
  int _counter = 0;

  @override
  void initState() {
    super.initState();
    _ticker = this.createTicker((Duration elapsed) {
      setState(() {
        _counter++;
        print('Elapsed time: ${elapsed.inMilliseconds} ms'); 
      });
    });
    _ticker?.start();
  }

  @override
  void dispose() {
    _ticker?.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Ticker Demo')),
      body: Center(
        child: Text('Tick count: $_counter'),
      ),
    );
  }
}

void main() => runApp(MaterialApp(home: TickerDemo()));

Ticker를 사용하여 _counter 변수를 매 틱마다 증가시킵니다. SingleTickerProviderStateMixin을 사용하여 Ticker를 생성하고 관리합니다. Ticker는 보통 화면의 새로 고침 주기(예: 60Hz에서 약 16.67ms)와 동기화되므로, elapsed 값은 일반적으로 약 16ms 간격으로 증가할 것입니다.
codewithandrea 강의 나 Flutter 공식 문서에서 확인하실 수 있습니다.

https://docs.flutter.dev/perf/best-practices#build-and-display-frames-in-16ms

결과

사진과 같이 16ms 마다 Tick이 올라가는 것을 확인할 수 있습니다. 실제 애니메이션에서도 1프레임 마다 업데이트를 해주면서 동적인 모습을 나타내줄 수 있는 것 입니다.

Ticker 관련 공식 문서

• Flutter 공식 문서 - Ticker
• Flutter 공식 문서 - SingleTickerProviderStateMixin