Flutter의 애니메이션 컨트롤러(Animation Controller) 사용법

Flutter 애플리케이션에서 애니메이션은 사용자 경험을 향상시키는 중요한 요소입니다. Flutter의 애니메이션 프레임워크는 애니메이션을 쉽게 제어할 수 있도록 AnimationController를 제공합니다. 이번 글에서는 AnimationController를 사용하는 방법과 이를 구현하는 예제를 자세히 살펴보겠습니다.

1. AnimationController의 기본 개념

AnimationController는 애니메이션의 동작을 제어하는 클래스입니다. 애니메이션의 시작, 중지, 반복 등의 동작을 제어할 수 있으며, 애니메이션의 상태를 모니터링할 수 있습니다. AnimationController는 애니메이션의 시간, 속도, 반복 횟수 등을 설정할 수 있습니다.

2. AnimationController 생성

AnimationController는 SingleTickerProviderStateMixin 또는 TickerProviderStateMixin을 사용하는 StatefulWidget에서 생성할 수 있습니다. vsync 속성은 애니메이션의 효율성을 높이기 위해 필수적으로 설정해야 합니다.

import 'package:flutter/material.dart';

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

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

class AnimationControllerExample extends StatefulWidget {
  @override
  _AnimationControllerExampleState createState() => _AnimationControllerExampleState();
}

class _AnimationControllerExampleState extends State<AnimationControllerExample> with SingleTickerProviderStateMixin {
  late AnimationController _controller;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      duration: const Duration(seconds: 2),
      vsync: this,
    )..repeat(reverse: true);
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Animation Controller Example')),
      body: Center(
        child: AnimatedBuilder(
          animation: _controller,
          builder: (context, child) {
            return Transform.scale(
              scale: _controller.value,
              child: child,
            );
          },
          child: Container(
            width: 100,
            height: 100,
            color: Colors.blue,
          ),
        ),
      ),
    );
  }
}

 

위 코드는 AnimationController를 사용하여 2초 동안 크기가 변하는 애니메이션을 반복하는 예제입니다. AnimatedBuilder를 사용하여 애니메이션의 상태에 따라 위젯을 빌드합니다.

 

 

728x90

 

3. Tween 사용

Tween은 애니메이션의 시작과 끝 값을 정의하는 데 사용됩니다. AnimationController와 결합하여 애니메이션의 중간 값을 계산합니다.

import 'package:flutter/material.dart';

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

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

class TweenExample extends StatefulWidget {
  @override
  _TweenExampleState createState() => _TweenExampleState();
}

class _TweenExampleState extends State<TweenExample> with SingleTickerProviderStateMixin {
  late AnimationController _controller;
  late Animation<double> _animation;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      duration: const Duration(seconds: 2),
      vsync: this,
    )..repeat(reverse: true);

    _animation = Tween<double>(begin: 0, end: 300).animate(_controller);
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Tween Example')),
      body: Center(
        child: AnimatedBuilder(
          animation: _animation,
          builder: (context, child) {
            return Container(
              width: _animation.value,
              height: _animation.value,
              color: Colors.blue,
            );
          },
        ),
      ),
    );
  }
}

 

위 코드는 Tween을 사용하여 컨테이너의 크기가 변하는 애니메이션을 구현한 예제입니다. Tween은 시작 값과 끝 값을 정의하며, animate 메서드를 사용하여 AnimationController와 결합합니다.

4. CurvedAnimation 사용

CurvedAnimation은 애니메이션에 곡선 효과를 추가하는 데 사용됩니다. Flutter는 다양한 곡선 애니메이션을 제공하여 애니메이션의 자연스러운 움직임을 구현할 수 있습니다.

import 'package:flutter/material.dart';

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

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

class CurvedAnimationExample extends StatefulWidget {
  @override
  _CurvedAnimationExampleState createState() => _CurvedAnimationExampleState();
}

class _CurvedAnimationExampleState extends State<CurvedAnimationExample> with SingleTickerProviderStateMixin {
  late AnimationController _controller;
  late Animation<double> _animation;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      duration: const Duration(seconds: 2),
      vsync: this,
    )..repeat(reverse: true);

    _animation = CurvedAnimation(
      parent: _controller,
      curve: Curves.easeInOut,
    );
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Curved Animation Example')),
      body: Center(
        child: AnimatedBuilder(
          animation: _animation,
          builder: (context, child) {
            return Transform.scale(
              scale: _animation.value,
              child: child,
            );
          },
          child: Container(
            width: 100,
            height: 100,
            color: Colors.blue,
          ),
        ),
      ),
    );
  }
}

 

위 코드는 CurvedAnimation을 사용하여 곡선 효과를 추가한 애니메이션을 구현한 예제입니다. CurvedAnimation은 parent로 AnimationController를 받고, curve로 애니메이션의 곡선을 정의합니다.

 

 

반응형

 

5. AnimationStatusListener 사용

AnimationStatusListener를 사용하면 애니메이션의 상태 변화를 감지할 수 있습니다. 애니메이션이 시작, 정지, 완료, 반복 등의 상태로 변경될 때 호출됩니다.

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(
      duration: const Duration(seconds: 2),
      vsync: this,
    )..addStatusListener((status) {
        if (status == AnimationStatus.completed) {
          _controller.reverse();
        } else if (status == AnimationStatus.dismissed) {
          _controller.forward();
        }
      });
    _controller.forward();
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Animation Status Example')),
      body: Center(
        child: AnimatedBuilder(
          animation: _controller,
          builder: (context, child) {
            return Transform.scale(
              scale: _controller.value,
              child: child,
            );
          },
          child: Container(
            width: 100,
            height: 100,
            color: Colors.blue,
          ),
        ),
      ),
    );
  }
}

 

 

위 코드는 AnimationStatusListener를 사용하여 애니메이션의 상태 변화를 감지하는 예제입니다. 애니메이션이 완료되면 반대 방향으로 애니메이션을 다시 시작하고, 애니메이션이 종료되면 다시 시작합니다.

결론

Flutter에서 AnimationController를 사용하면 애니메이션을 쉽게 제어할 수 있습니다. AnimationController, Tween, CurvedAnimation, AnimationStatusListener를 사용하여 다양한 애니메이션을 구현하는 방법을 통해 애니메이션을 효과적으로 활용할 수 있습니다. 이번 글에서 소개한 방법들을 활용하여 Flutter 애플리케이션에서 애니메이션을 효율적으로 사용해보세요. 애니메이션을 통해 애플리케이션의 사용자 경험을 향상시키고, 더욱 매력적인 인터페이스를 제공할 수 있습니다.