[flutter] 플러터 Lottie로 소셜 매체 앱의 좋아요 애니메이션 표시하기

05 Dec 2023

flutter

lottie logo

이번 블로그에서는 플러터(Flutter)로 소셜 매체 앱에서 사용되는 좋아요 애니메이션을 표시하는 방법을 알아보겠습니다. 이를 위해 Lottie를 사용하겠습니다.

Lottie란?

Lottie는 Airbnb에서 개발된 애니메이션 플랫폼입니다. Lottie는 JSON 형식의 애니메이션 데이터를 사용하여 애니메이션을 렌더링할 수 있습니다. 탁월한 성능과 다양한 애니메이션 효과를 제공하여 개발자들에게 많은 인기를 얻고 있습니다.

프로젝트 설정

먼저, 플러터 프로젝트를 생성하고 Lottie 패키지를 추가해야 합니다. pubspec.yaml 파일에 아래의 의존성을 추가해줍니다.

dependencies:
  flutter:
    sdk: flutter
  lottie: ^0.7.0

의존성을 추가한 뒤, 패키지를 가져옵니다.

import 'package:lottie/lottie.dart';

애니메이션 파일 준비

Lottie에서 사용할 애니메이션 파일을 준비해야 합니다. 플러터 앱에서 사용될 애니메이션 파일은 JSON 형식으로 되어 있어야 합니다. 애니메이션 파일은 Adobe After Effects 등의 도구를 사용하여 생성할 수 있습니다.

애니메이션 파일은 프로젝트의 assets 폴더 아래에 저장합니다.

애니메이션 표시하기

애니메이션을 화면에 표시하기 위해 Lottie.asset() 위젯을 사용합니다. 위젯의 assetName 속성에 애니메이션 파일의 경로를 지정합니다.

Lottie.asset('assets/animation.json', width: 150, height: 150)

위 코드는 애니메이션 파일을 로드하고 크기를 150x150으로 설정하여 애니메이션을 화면에 표시합니다.

애니메이션 제어하기

Lottie 위젯은 animate, stop, isAnimating과 같은 다양한 메소드와 속성을 제공하여 애니메이션을 제어할 수 있습니다. 예를 들어, 아래의 코드는 애니메이션을 시작하고 일정 시간 후에 멈추는 예시입니다.

LottieController _animationController;
bool _isAnimating = false;

@override
void initState() {
  super.initState();
  _animationController = AnimationController(vsync: this);
}

void _playAnimation() {
  setState(() {
    _isAnimating = true;
  });
  _animationController..duration = Duration(seconds: 3)
    ..repeat()
    ..addStatusListener((status) {
      if (status == AnimationStatus.completed) {
        setState(() {
          _isAnimating = false;
        });
      }
    });
}

void _stopAnimation() {
  _animationController.reset();
  setState(() {
    _isAnimating = false;
  });
}

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

Column(
  children: [
    Lottie.asset(
      'assets/animation.json',
      width: 150,
      height: 150,
      controller: _animationController,
    ),
    SizedBox(height: 10),
    RaisedButton(
      onPressed: _isAnimating ? _stopAnimation : _playAnimation,
      child: Text(_isAnimating ? 'Stop' : 'Play'),
    ),
  ],
)

위 코드에서는 LottieController를 사용하여 애니메이션을 제어하고, AnimationController와 함께 애니메이션을 시작하고, 멈추는 예시를 보여줍니다.

결론

이렇게 플러터에서 Lottie를 사용하여 소셜 매체 앱에서 사용되는 좋아요 애니메이션을 표시할 수 있습니다. Lottie를 사용하면 직관적이고 효율적인 애니메이션 효과를 구현할 수 있으며, 개발자들에게 많은 도움을 줄 수 있습니다.

더 많은 Lottie 기능을 알아보려면 공식 문서를 참조하시기 바랍니다.