[flutter] 플러터(Flutter)에서 애니메이션을 구현하는 방법은 무엇인가요?

04 Dec 2023

flutter

플러터(Flutter)에서는 애니메이션을 구현하는 다양한 방법을 제공합니다. 애니메이션은 UI 요소를 부드럽게 움직이거나 변화시키는 효과를 줄 수 있어 애플리케이션에 생동감을 더해줍니다. 이번 포스트에서는 플러터에서 애니메이션을 구현하는 방법에 대해 알아보겠습니다.

1. AnimationController 사용하기

애니메이션을 구현하는 가장 기본적인 방법은 AnimationController를 사용하는 것입니다. AnimationController는 애니메이션의 지속 시간과 관련된 속성을 관리하며, 애니메이션의 시작, 정지, 반복 등을 제어할 수 있습니다.

다음은 AnimationController를 사용하여 애니메이션을 구현하는 예시 코드입니다.

import 'package:flutter/material.dart';

class MyAnimationWidget extends StatefulWidget {
  @override
  _MyAnimationWidgetState createState() => _MyAnimationWidgetState();
}

class _MyAnimationWidgetState extends State<MyAnimationWidget>
    with SingleTickerProviderStateMixin {
  late AnimationController _animationController;
  late Animation<double> _animation;

  @override
  void initState() {
    super.initState();
    _animationController = AnimationController(
      vsync: this,
      duration: Duration(seconds: 1),
    );
    _animation = Tween<double>(begin: 0, end: 1).animate(_animationController);
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Animation Example'),
      ),
      body: Center(
        child: ScaleTransition(
          scale: _animation,
          child: FlutterLogo(size: 200),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          if (_animationController.isCompleted) {
            _animationController.reverse();
          } else {
            _animationController.forward();
          }
        },
        child: Icon(Icons.play_arrow),
      ),
    );
  }
}

위의 예시 코드에서는 AnimationController와 Animation을 사용하여 FlutterLogo 위젯을 부드럽게 확대/축소하는 애니메이션을 구현하였습니다.

2. Tween 애니메이션 사용하기

Tween은 애니메이션의 시작과 끝 사이에서 값을 보간(interpolate)하는데 사용됩니다. Tween을 사용하면 애니메이션의 시작과 끝 값을 지정하고, 그 사이에서 원하는 형식으로 값을 보간할 수 있습니다. 예를 들어, 크기나 색상과 같은 속성을 보간할 수 있습니다.

다음은 Tween을 사용하여 애니메이션을 구현하는 예시 코드입니다.

import 'package:flutter/material.dart';

class MyAnimationWidget extends StatefulWidget {
  @override
  _MyAnimationWidgetState createState() => _MyAnimationWidgetState();
}

class _MyAnimationWidgetState extends State<MyAnimationWidget>
    with SingleTickerProviderStateMixin {
  late AnimationController _animationController;
  late Animation<double> _animation;

  @override
  void initState() {
    super.initState();
    _animationController = AnimationController(
      vsync: this,
      duration: Duration(seconds: 1),
    );
    _animation = Tween<double>(begin: 0, end: 1).animate(_animationController);
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Animation Example'),
      ),
      body: Center(
        child: AnimatedBuilder(
          animation: _animation,
          builder: (BuildContext context, Widget? child) {
            return Transform.scale(
              scale: _animation.value,
              child: FlutterLogo(size: 200),
            );
          },
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          if (_animationController.isCompleted) {
            _animationController.reverse();
          } else {
            _animationController.forward();
          }
        },
        child: Icon(Icons.play_arrow),
      ),
    );
  }
}

위의 예시 코드에서는 Tween을 사용하여 FlutterLogo 위젯의 크기를 보간하는 애니메이션을 구현하였습니다.

3. AnimationBuilder 사용하기

AnimatedBuilder는 위젯 트리에서 애니메이션을 구축하는 데 사용되는 위젯입니다. AnimatedBuilder는 AnimationController 또는 Animation의 값에 따라 위젯을 다시 빌드하도록 합니다. 이를 통해 애니메이션 중간 과정에서 위젯의 렌더링을 최적화할 수 있습니다.

다음은 AnimatedBuilder를 사용하여 애니메이션을 구현하는 예시 코드입니다.

import 'package:flutter/material.dart';

class MyAnimationWidget extends StatefulWidget {
  @override
  _MyAnimationWidgetState createState() => _MyAnimationWidgetState();
}

class _MyAnimationWidgetState extends State<MyAnimationWidget>
    with SingleTickerProviderStateMixin {
  late AnimationController _animationController;
  late Animation<double> _animation;

  @override
  void initState() {
    super.initState();
    _animationController = AnimationController(
      vsync: this,
      duration: Duration(seconds: 1),
    );
    _animation = Tween<double>(begin: 0, end: 1).animate(_animationController);
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Animation Example'),
      ),
      body: Center(
        child: AnimatedBuilder(
          animation: _animation,
          builder: (BuildContext context, Widget? child) {
            return Transform.scale(
              scale: _animation.value,
              child: FlutterLogo(size: 200),
            );
          },
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          if (_animationController.isCompleted) {
            _animationController.reverse();
          } else {
            _animationController.forward();
          }
        },
        child: Icon(Icons.play_arrow),
      ),
    );
  }
}

위의 예시 코드에서는 AnimatedBuilder를 사용하여 FlutterLogo 위젯의 크기를 애니메이션화하는 코드를 구현하였습니다.

결론

이번 포스트에서는 플러터(Flutter)에서 애니메이션을 구현하는 방법에 대해 알아보았습니다. AnimationController, Tween, AnimatedBuilder 등을 활용하여 다양한 애니메이션 효과를 구현할 수 있습니다. 애니메이션을 적절히 활용하여 사용자 경험을 향상시키는 동적이고 매력적인 애플리케이션을 개발해보세요!

참고자료: