[flutter] 스토리 보드 애니메이션을 사용한 간단한 애니메이션 제작 방법

11 Dec 2023

flutter

Flutter에서 스토리 보드 애니메이션을 사용하여 간단한 애니메이션을 제작하는 방법을 알아보겠습니다.

1. 스토리 보드 애니메이션을 소개

스토리 보드 애니메이션은 Adobe After Effects를 통해 제작된 애니메이션을 코드로 가져와 앱에 통합하여 사용할 수 있는 기술입니다.

2. 스토리 보드 애니메이션 가져오기

먼저, pubspec.yaml 파일에 flare_flutter 패키지를 추가합니다.

dependencies:
  flare_flutter: ^3.0.0

터미널에서 flutter pub get 명령어를 실행하여 패키지를 다운로드합니다.

3. 스토리 보드 애니메이션 적용

다음으로, 가져온 애니메이션을 앱에 적용합니다.

import 'package:flare_flutter/flare_actor.dart';

class MyFlareAnimation extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return FlareActor(
      "assets/animation.flr", // 애니메이션 파일 경로
      animation: "idle", // 애니메이션 이름
    );
  }
}

4. 애니메이션 컨트롤

Flutter는 FlareController를 사용하여 애니메이션을 제어할 수 있습니다.

class MyFlareController extends FlareController {
  @override
  void initialize(FlutterActorArtboard artboard) {
    artboard.getAnimation("idle").apply(artboard, 0.0, 1.0);
  }

  @override
  bool advance(FlutterActorArtboard artboard, double elapsed) {
    return false; // 애니메이션 반복 여부
  }
}

5. 마치며

위 방법을 참고하여, Flutter 앱에 스토리 보드 애니메이션을 추가해 보세요. Flutter와 flare_flutter 패키지를 사용하여 다양하고 흥미로운 애니메이션을 만들어낼 수 있습니다.

더 많은 정보를 원하시거나 문제가 발생한 경우, flare_flutter 공식 문서를 참고하세요.