[Flutter] 애니메이션 처리를 위한 lottie 패키지 설명서

 

 

 

1. Lottie란 무엇인가?

https://lottiefiles.com/kr/what-is-lottie

Lottie 애니메이션은 무엇일까요? - 로티파일즈

해당 사이트에서 Lottie에 대해 정말 자세히 알려줍니다!.

 

 

 

 

2. Lottie 패키지 사용

Flutter에서는 이러한 Lottie JSON을 컨트롤할 수 있는 패키지가 있습니다. LIKES수가 엄청납니다!. 바로 사용해 보도록 하겠습니다.

 

 

2.1 패키지 설치

https://pub.dev/packages/lottie/install

lottie | Flutter Package

lottie 패키지 본인 프로젝트에 받아주세요.

 

 

2.2  Lottie 사용

Lottie사용 방법은 엄청나게 간단합니다. 기존 위젯 쓰던 대로 Lottie를 불러와서 assets에 있는 lottie를 보여줄 건지, network상에 있는 lottie를 보여줄 건지, zip파일로 되어있는 lottie를 보여줄 건지 설정하면 바로 사용이 가능합니다.

 

2.2.1  network 사용

network상에 있는 lottie라서 바로 사용가능합니다.

class LottieTestPage extends StatelessWidget {
  const LottieTestPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Lottie.network(
          'https://assets3.lottiefiles.com/packages/lf20_syycbook.json',
        ),
      ),
    );
  }
}

 

 

2.2.2  aseets 사용

본인 프로젝트 assets폴더에 lottie파일이 있어야겠죠?

class LottieTestPage extends StatelessWidget {
  const LottieTestPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Lottie.asset('assets/LottieLogo.json'),
      ),
    );
  }
}

 

 

2.2.3  zip 사용

Lottie.asset('assets/LottieLogo.zip'),

2.2.2 assets와 사용방법은 동일합니다.

 

 

 

2.3  Lottie 컨트롤하기

class LottieTestPage extends StatelessWidget {
  const LottieTestPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Lottie.network(
          'https://assets3.lottiefiles.com/packages/lf20_syycbook.json',
        ),
      ),
    );
  }
}

해당코드를 기본 베이스로 컨트롤 작업을 붙여보겠습니다.

 

 

2.3.1  StatefulWidget으로 변경

 

2.3.2  TickerProviderStateMixin 설정

애니메이션 컨트롤을 하기 위해서는 TickerProviderStateMixin을 사용해야 합니다. 해당작업은 Flutter의 mixin 기능을 이용해야 합니다.

class LottieTestPage extends StatefulWidget {
  const LottieTestPage({Key? key}) : super(key: key);

  @override
  State<LottieTestPage> createState() => _LottieTestPageState();
}

class _LottieTestPageState extends State<LottieTestPage> with TickerProviderStateMixin {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Lottie.network(
          'https://assets3.lottiefiles.com/packages/lf20_syycbook.json',
        ),
      ),
    );
  }
}

 

 

2.3.3  컨트롤러 생성

class LottieTestPage extends StatefulWidget {
  const LottieTestPage({Key? key}) : super(key: key);

  @override
  State<LottieTestPage> createState() => _LottieTestPageState();
}

class _LottieTestPageState extends State<LottieTestPage> with TickerProviderStateMixin {
  late final AnimationController _lottieController; 

  @override
  void initState() { //컨트롤러 생성
    _lottieController = AnimationController(vsync: this);
    super.initState();
  }

  @override
  void dispose() {  //컨트롤러 해제
    _lottieController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Lottie.network(
          'https://assets3.lottiefiles.com/packages/lf20_syycbook.json',
        ),
      ),
    );
  }
}

AnimationController를 생성해 줍니다. vsync라는 파라미터에 넣는 this는 TickerProviderStateMixin을 with로 사용해 줬기 때문에 가능한 겁니다.

 

그리고 StatefulWidget에서 컨트롤러를 생성했을 경우에는 항상 dispose에서 컨트롤러를 해제해줘야 합니다.

 

 

2.3.4  컨트롤러 주입

        Lottie.network(
          'https://assets3.lottiefiles.com/packages/lf20_syycbook.json',
          controller: _lottieController,
        ),

생성한 컨트롤러를 Lottie사용 부분 controller에 주입해 줍니다. 그러면 이제 해당 컨트롤러로 Lottie를 자유자재로 컨트롤할 수 있게 되었습니다.

 

 

2.3.5  컨트롤러 재생시간 설정

컨트롤러가 우리가 재생하려는 Lottie의 재생시간을 알아야 컨트롤을 할 수 있게 됩니다. 그래서 컨트롤러에 재생시간을 설정해줘야 합니다.

              Lottie.network(
                'https://assets3.lottiefiles.com/packages/lf20_syycbook.json',
                controller: _lottieController,
                onLoaded: (composition) {
                  _lottieController.duration = composition.duration;
                },
              ),

onLoaded는 Lottie가 로드됐을 때 실행되는 콜백함수입니다. 그때 우리가 생성한 컨트롤러의 duration에 콜백함수의 인자로 받은 LottieComposition의 duration을 넣어줍니다.

 

쉽게 설명해서 3초짜리 Lottie가 보여줄 준비가 됐을 때 onLoaded가 실행되면서 실행될 때 LottieComposition을 던져줍니다. 이것의 duration을 컨트롤러의 duration에 넣어주면 이제 해당 컨트롤러의 재생시간은 Lottie의 재생시간인 3초로 설정이 되는 것입니다.

 

 

2.3.6  forward()

              Lottie.network(
                'https://assets3.lottiefiles.com/packages/lf20_syycbook.json',
                controller: _lottieController,
                onLoaded: (composition) {
                  _lottieController.duration = composition.duration;
                  _lottieController.forward();
                },
              ),

Lottie가 준비가 됐을 때 다른 이벤트 없이 바로 재생시키려면 컨트롤러의 forward() 함수를 실행시키면 바로 재생이 됩니다.

_lottieController.forward(from: 0.5);

 

forward의 from옵션은 실행했을 때 어느 시점부터 보여줄지 정할 수 있습니다. ( 0 ~ 1 사이)

 

2.7초짜리 Lottie가 있다고 하면 0.00 ~ 1까지 나눠서 설정할 수 있습니다. 만약에 코드처럼 0.5로 넣는다면 2.7초의 반인 1.35초 부분부터 Lottie가 실행됩니다.

 

2.3.7  repeat()

              Lottie.network(
                'https://assets3.lottiefiles.com/packages/lf20_syycbook.json',
                controller: _lottieController,
                onLoaded: (composition) {
                  _lottieController.duration = composition.duration;
                  _lottieController.repeat();
                },
              ),

forward()를 사용하면 한 번만 보여주고 더 이상 플레이가 되지 않습니다. 만약에 여러 번 연속으로 재생시키고 싶다면 repeat() 함수를 사용해 보세요.

 

repeat() 함수에는 min, max, period, reverse의 옵션이 존재합니다.

 

• min

                  _lottieController.repeat(
                    min: 0.5,
                  );

forward()의 from과 비슷합니다. 반복하는데 어느 구간부터 반복할지 정하는 것입니다. 0.5로 설정을 한다고 하면 2.7초짜리 Lottie가 있다고 하면 1.35초 부분부터 실행이 되면서 반복되는 것입니다.

 

• max

                  _lottieController.repeat(
                    max: 0.5,
                  );

min의 반대인 max입니다. min이 어디부터 시작할지를 정했다면 max는 어디서 끝낼지를 정하는 거겠죠? max를 0.5로 설정한다면  2.7초짜리 Lottie가 있다고 하면 0초 부분부터 1.35초 부분까지만 계속 반복될 것입니다.

 

 

                  _lottieController.repeat(
                    min: 0.3,
                    max: 0.8,
                  );

물론 같이도 사용이 가능합니다. 설명하지 않아도 어떻게 실행될지 이해되시죠? 그런데 여기서 이상한 부분을 느끼신 분이 계실까요? 계신다면 박수 짞짞짞짞

 

기존 Lottie보다 min이나 max를 따로 설정하니깐 뭔가 Lottie가 느리게 재생될 것입니다.

                onLoaded: (composition) {
                  _lottieController.duration = composition.duration;
                  _lottieController.repeat(
                    min: 0.0,
                    max: 0.5,
                  );
                },

이유는 바로 위에서 우리는 컨트롤러의 재생시간을 Lottie의 총 재생시간으로 설정해 줬습니다. 위에서 설정한 Lottie의 재생시간은 실제로 2.7초입니다. 즉 컨트롤러는 2.7초의 시간으로 하나의 Lottie를 재생시킵니다. 하지만 추가한 옵션 때문에 (min: 0.0, max: 0.5) 0초 부분부터 1.35초의 부분까지만 보이도록 설정했습니다. 하지만 컨트롤러는 2.7초를 재생시켜야 합니다. 우리가 그렇게 설정했기 때문이죠. 그래서 천천히 재생시켜서 0초 ~ 1.35초를 2.7초 동안 보여주기 때문에 기존 Lottier보다 재생속도가 느리게 보인 것입니다. 

 

그렇다면 우리는 0초 부분부터 1.35초의 부분까지만 반복해서 보여주고 싶은데 속도도 정상속도로 보여주고 싶다 할 땐 어떻게 해야 될까요? 간단합니다. 컨트롤러의 재생시간을 다르게 설정해 주면 되겠죠?

 

                onLoaded: (composition) {
                  _lottieController.duration = composition.duration * 0.5;
                  _lottieController.repeat(
                    min: 0.0,
                    max: 0.5,
                  );
                },

 

컨트롤러의 재생시간을 기존 Lottie의 재생시간의 2.7초의 * 0.5를 해서 1.35초로 설정해 주면 컨트롤러의 총 재생시간은 1.35초로 설정되기 때문에 min: 0.0,  max: 0.5로 사용해도 똑같은 속도로 보이게 될 것입니다.

 

만약 더 느리게 재생시키고 싶다면 *2, *3 등등으로 컨트롤러의 재생시간을 늘리면 되겠죠?

-해당 부분은 다른 함수에서도 동일하게 동작합니다-

 

• reverse

                  _lottieController.repeat(
                    reverse: true,
                  );

반복할 때 반대로도 반복시킵니다. 기본값은 false입니다.

 

 

• period

period는 위에서 느리게 재생되는 Lottie의 재생속도를 정상으로 설정하기 위해 컨트롤러의 재생시간을 늘리거나, 줄여서 정상으로 맞췄던 거 기억나시나요?  

 

컨트롤러의 재생시간은 Lottie의 총 재생시간으로 설정하고 따로 해당 repeat부분의 재생시간을 설정하고 싶을 때 사용됩니다. 즉 컨트롤러의 재생시간을 설정하지 않아도 period를 사용하면 repeat의 재생속도를 설정해서 속도를 정상적으로 설정할 수 있습니다.

 

                onLoaded: (composition) {
                  _lottieController.duration = composition.duration;
                  var start = 0.3;
                  var stop = 0.8;
                  _lottieController.repeat(
                    min: start,
                    max: stop,
                    period: _lottieController.duration! * (stop - start),
                  );
                },

 

 

2.3.8  stop()

                  ElevatedButton(
                    onPressed: () {
                      _lottieController.stop();
                    },
                    child: Text("일시정지"),
                  ),

재생을 시켰으면 정지를 시킬 수도 있어야 합니다. stop() 함수를 사용하면 정지시킬 수 있습니다.

 

 

2.3.9 재개

                  ElevatedButton(
                    onPressed: () {
                      _lottieController.forward(
                        from: _lottieController.value,
                      );
                    },
                    child: Text("재개"),
                  ),

stop()으로 정지후 재개하려면 컨트롤러의 value로 멈춘 부분의 시간을 알아와서 재개시킬 수 있습니다. 하지만 repeat도중에 정지를 하고 다시 정지한 시점부터 반복을 하려면 구현이 매우 힘듭니다.

 

 

 

2.4  Lottie 사이즈 조정

              Lottie.network(
                'https://assets3.lottiefiles.com/packages/lf20_syycbook.json',
                controller: _lottieController,
                onLoaded: (composition) {
                  _lottieController.duration = composition.duration;
                  _lottieController.repeat();
                },
                width: 30,
                height: 100,
                fit: BoxFit.fill,
              ),

Lottie의 사이즈 조정은 width, height, fit 옵션을 통해 조정이 가능합니다.

 

 

 

2.5 Lottie Custom Loading

class LottieTestPage extends StatefulWidget {
  const LottieTestPage({Key? key}) : super(key: key);

  @override
  State<LottieTestPage> createState() => _LottieTestPageState();
}

class _LottieTestPageState extends State<LottieTestPage>
    with TickerProviderStateMixin {
  late final Future<LottieComposition> _composition;

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

    _composition = NetworkLottie(
            'https://assets3.lottiefiles.com/packages/lf20_syycbook.json')
        .load();

	// _composition = AssetLottie('assets/LottieLogo1.json').load();
  }

  @override
  Widget build(BuildContext context) {
    return FutureBuilder<LottieComposition>(
      future: _composition,
      builder: (context, snapshot) {
        var composition = snapshot.data;
        if (composition != null) {
          return Lottie(composition: composition);
        } else {
          return const Center(child: CircularProgressIndicator());
        }
      },
    );
  }
}

 

Lottie가 로드되고 있을 때 로딩화면을 구현하거나 하고 싶을 때는 FutureBuilder를 이용해서 구현할 수 있습니다.