[flutter] 플러터에서의 애니메이션 라이브러리 소개

30 Nov 2023

flutter

안녕하세요! 이번 포스트에서는 플러터에서 사용할 수 있는 애니메이션 라이브러리에 대해 소개하려고 합니다.

플러터는 구글에서 개발한 크로스 플랫폼 모바일 애플리케이션 개발 프레임워크로서, 다양한 애니메이션 효과를 구현하는 것이 가능합니다. 애니메이션은 사용자 경험을 향상시키고 앱의 시각적인 효과를 더욱 흥미롭게 만들어 줄 수 있습니다.

1. Flutter Animation 애니메이션 라이브러리

Flutter Animation은 플러터에서 기본적으로 제공하는 애니메이션 라이브러리입니다. 이 라이브러리를 사용하면 앱 내에서 다양한 애니메이션 효과를 구현할 수 있습니다. Flutter Animation은 간단하고 직관적인 API를 제공하고 있어서 초보자도 쉽게 사용할 수 있습니다.

import 'package:flutter/animation.dart';

class MyAnimation extends StatefulWidget {
  @override
  _MyAnimationState createState() => _MyAnimationState();
}

class _MyAnimationState extends State<MyAnimation>
    with SingleTickerProviderStateMixin {
  AnimationController _animationController;
  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 AnimatedBuilder(
      animation: _animation,
      builder: (context, child) {
        return Opacity(
          opacity: _animation.value,
          child: Container(
            width: 200,
            height: 200,
            color: Colors.blue,
          ),
        );
      },
    );
  }
}

위의 코드는 MyAnimation 클래스를 예시로 들어 설명하였습니다. initState 메서드에서 애니메이션 컨트롤러를 초기화하고, build 메서드에서 AnimatedBuilder 위젯을 사용하여 애니메이션 효과를 구현하고 있습니다. 이 예시는 Opacity 위젯의 투명도를 조절하는 애니메이션 효과를 보여줍니다.

2. Rive 애니메이션 라이브러리

Rive는 플러터에서 사용할 수 있는 다양한 애니메이션을 제공하는 라이브러리입니다. Rive는 벡터 기반 애니메이션을 사용하며, 보다 복잡하고 다양한 애니메이션 효과를 구현할 수 있습니다.

Rive 애니메이션을 사용하기 위해서는 rive 패키지를 프로젝트에 추가해야 합니다. 아래의 예시 코드는 Rive 애니메이션을 로드하고 실행하는 방법을 보여줍니다.

import 'package:flutter/rive.dart';

class MyRiveAnimation extends StatefulWidget {
  @override
  _MyRiveAnimationState createState() => _MyRiveAnimationState();
}

class _MyRiveAnimationState extends State<MyRiveAnimation> {
  RiveAnimationController _animationController;

  @override
  void initState() {
    super.initState();
    _animationController = SimpleAnimation('idle');
  }

  @override
  Widget build(BuildContext context) {
    return RiveAnimation.asset(
      'assets/my_animation.riv',
      controller: _animationController,
    );
  }
}

위의 코드는 MyRiveAnimation 클래스를 예시로 들어 설명하였습니다. initState 메서드에서 Rive 애니메이션 컨트롤러를 초기화하고, build 메서드에서 RiveAnimation 위젯을 사용하여 애니메이션을 로드하고 실행하고 있습니다.

결론

이번 포스트에서는 플러터에서 애니메이션을 구현할 수 있는 두 가지 라이브러리에 대해 소개하였습니다. Flutter Animation은 기본적으로 제공되는 애니메이션 라이브러리이며, Rive는 강력한 애니메이션 효과를 구현할 수 있는 라이브러리입니다. 플러터에서 애니메이션을 효과적으로 활용하여 사용자에게 높은 품질의 모바일 애플리케이션을 제공해보세요!