Colin's Blog
[flutter] 플러터 Lottie 애니메이션 소리 추가하기

플러터(Flutter)는 마이크로소프트의 Lottie 라이브러리를 통해 애니메이션을 생성하고 표현할 수 있는 기능을 제공합니다. 하지만 기본적으로 Lottie 애니메이션에는 소리가 포함되어 있지 않습니다. 이번 글에서는 플러터 Lottie 애니메이션에 소리를 추가하는 방법에 대해 알아보겠습니다.

준비물

단계별 가이드

1. 플러그인 추가

먼저, lottie 플러그인을 추가해야 합니다. pubspec.yaml 파일에 다음과 같이 의존성을 추가합니다:

dependencies:
  flutter:
    sdk: flutter
  lottie: ^1.0.0

플러그인 추가 이후에는 flutter packages get 명령어를 사용하여 의존성을 다운로드 해야 합니다.

2. Lottie 파일 가져오기

Lottie 파일을 사용하기 전에, 해당 파일을 가져와야 합니다. json 파일의 경우에는 애니메이션 및 효과에 대한 정보를 포함하고 있으며, flr 파일은 Adobe After Effects에서 내보낸 파일 형식입니다.

Lottie 파일을 가져오는 방법은 다양합니다. 파일을 로컬에 저장하여 사용하거나, 인터넷에서 다운로드하는 등의 방법이 있습니다.

3. 애니메이션 컨트롤러 생성

다음으로, 애니메이션을 제어하기 위한 애니메이션 컨트롤러를 생성해야 합니다. 애니메이션 컨트롤러는 TickerProvider를 구현한 클래스입니다.

AnimationController _animationController;

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

4. 애니메이션과 소리 연결

애니메이션과 소리를 연결하기 위해, flutter_ijkplayer 플러그인을 사용할 수 있습니다. 해당 플러그인은 비디오 및 오디오 재생을 제공합니다.

pubspec.yaml 파일에 flutter_ijkplayer 의존성을 추가한 후, flutter packages get 명령어를 실행하여 의존성을 다운로드합니다.

dependencies:
  flutter_ijkplayer: ^1.2.9

flutter_ijkplayer 패키지를 사용하여 소리를 추가하는 방법은 다음과 같습니다:

String soundUrl = 'path/to/sound/file.mp3';
IjkMediaController _videoController = IjkMediaController.network(soundUrl);

5. 애니메이션 재생

이제 애니메이션과 소리를 연결하여 재생할 수 있습니다. 이를 위해 onPress 이벤트와 같은 트리거를 사용할 수 있습니다.

void _playAnimation() {
  _animationController.reset();
  _animationController.forward();
  _videoController.play();
}

void _stopAnimation() {
  _animationController.reset();
  _videoController.stop();
}

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: GestureDetector(
      onTap: _playAnimation,
      onLongPress: _stopAnimation,
      child: AnimatedBuilder(
        animation: _animationController,
        builder: (context, child) {
          return Transform.rotate(
            angle: _animationController.value * math.pi * 2,
            child: child,
          );
        },
        child: Container(
          child: Lottie.asset('path/to/lottie/file.json'),
        ),
      ),
    ),
  );
}

결론

이제 플러터(Flutter) Lottie 애니메이션에 소리를 추가하는 방법을 알아보았습니다. Lottie 애니메이션의 진행과 동시에 소리를 재생하는 방식으로, 더욱 동적이고 흥미로운 애니메이션을 구현할 수 있습니다.

© 2018 Colin. All rights reserved.