Colin's Blog
[flutter] 플러터 Lottie와 트위치 애니메이션 연동하기

Flutter

개요

Flutter는 Google에서 개발한 크로스 플랫폼 앱 개발 프레임워크입니다. Flutter를 사용하면 단일 코드 베이스로 안드로이드 및 iOS 모두에 대한 네이티브 앱을 개발할 수 있습니다.

Lottie는 애프터이펙트에서 생성한 애니메이션을 JSON 형식으로 내보내고, 앱에서 해당 애니메이션을 재생할 수 있는 라이브러리입니다. 이번 글에서는 플러터 Lottie와 트위치 애니메이션을 연동하여 화려한 애니메이션을 구현하는 방법에 대해 알아보겠습니다.

Lottie 설치하기

플러터 Lottie를 사용하기 위해서는 먼저 Lottie 패키지를 프로젝트에 추가해야 합니다. pubspec.yaml 파일에 다음과 같이 의존성을 추가해주세요.

dependencies:
  lottie: ^1.0.0

적절한 버전의 Lottie를 선택하여 의존성에 추가한 후, 패키지를 업데이트하면 Lottie를 사용할 준비가 끝납니다.

Lottie 애니메이션을 플러터에 적용하기

  1. 프로젝트에 Lottie 애니메이션 파일을 추가해주세요. 애니메이션 파일은 JSON 형식이어야 합니다. 예를 들어, animation.json이라는 이름의 파일을 추가한 후 assets 폴더에 저장합니다.

  2. 플러터에서 Lottie 애니메이션을 사용하기 위해 Lottie 위젯을 이용해야 합니다. Lottie.asset() 생성자를 사용하여 애니메이션 파일을 가져와 Lottie 위젯에 적용할 수 있습니다.

import 'package:lottie/lottie.dart';

class MyAnimation extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Lottie.asset('assets/animation.json');
  }
}

애니메이션 파일의 경로를 Lottie.asset() 메서드의 인자로 지정해주면 해당 애니메이션이 화면에 재생됩니다.

트위치 애니메이션 연동하기

트위치는 실시간 스트리밍 플랫폼으로, 사용자는 채팅과 함께 스트리머의 게임플레이를 시청할 수 있습니다. 트위치 애니메이션은 해당 스트리머의 채팅 동작에 대한 애니메이션으로, 채팅 메시지에 따라 애니메이션을 효과적으로 표현할 수 있습니다.

트위치 애니메이션을 플러터 Lottie와 연동하기 위해서는 다음의 단계를 따르세요:

  1. 트위치 개발자 포탈에 접속하여 트위치 개발자 계정을 생성합니다.

  2. 트위치 API에 애플리케이션을 등록하고, 해당 애플리케이션의 클라이언트 ID를 발급받습니다.

  3. 트위치 애니메이션을 가져오기 위해 API 호출을 수행합니다. 이때, 트위치 API의 GET /bits/actions 엔드포인트를 사용하여 애니메이션 목록을 가져올 수 있습니다.

  4. 애니메이션 목록을 플러터 앱으로 가져와 Lottie 위젯에 적용합니다. 이때, 트위치 애니메이션의 URL을 이용하여 Lottie 위젯에 적용할 수 있습니다.

import 'package:lottie/lottie.dart';
import 'package:http/http.dart' as http;

class TwitchAnimation extends StatefulWidget {
  @override
  _TwitchAnimationState createState() => _TwitchAnimationState();
}

class _TwitchAnimationState extends State<TwitchAnimation> {
  List<String> animationUrls = [];

  @override
  void initState() {
    super.initState();
    _fetchAnimations();
  }

  Future<void> _fetchAnimations() async {
    final response = await http.get('https://api.twitch.com/bits/actions');
    final data = jsonDecode(response.body);
    setState(() {
      animationUrls = data['animations'].map<String>((animation) => animation['url']).toList();
    });
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        for (final url in animationUrls)
          Lottie.network(url),
      ],
    );
  }
}

해당 코드는 트위치 애니메이션을 가져와 리스트 형태로 화면에 표시하는 예시입니다. Lottie.network() 함수를 사용하여 트위치 애니메이션의 URL을 Lottie 위젯에 적용하고 화면에 표시할 수 있습니다.

결론

이번 글에서는 플러터 Lottie와 트위치 애니메이션을 연동하는 방법에 대해 알아보았습니다. Lottie를 사용하면 플러터 앱에 다양한 화려한 애니메이션을 쉽게 추가할 수 있습니다. 트위치 애니메이션을 활용하면 사용자와의 상호작용을 통해 다양한 애니메이션 효과를 구현할 수 있으며, 이는 사용자 경험을 향상시키는 데 도움이 될 것입니다.

© 2018 Colin. All rights reserved.