[flutter] 플러터 Lottie로 디자인 포트폴리오 앱의 동적 애니메이션 구현하기

05 Dec 2023

flutter

디자인 포트폴리오를 갖고 있는 개발자들은 자신의 작품을 동적인 애니메이션으로 표현하는 것이 중요합니다. 플러터(Flutter) 프레임워크는 Lottie를 통해 간편하고 멋진 애니메이션을 구현할 수 있는 기능을 제공합니다.

Lottie란?

Lottie는 Airbnb에서 개발한 오픈소스 애니메이션 라이브러리입니다. Lottie는 After Effects로 만들어진 JSON 형식의 애니메이션 파일을 가져와서 앱에서 재생할 수 있습니다. 이렇게 가져온 Lottie 파일은 벡터 기반으로 구성되어 확대 및 축소가 가능하며, 다양한 플랫폼과 호환됩니다.

애니메이션 선행 작업

Lottie를 사용하여 동적 애니메이션을 구현하기 전에 몇 가지 작업을 수행해야 합니다.

After Effects에서 애니메이션 작업을 마친 후 Lottie Exporter 플러그인을 설치합니다. 이 플러그인을 통해 애니메이션을 JSON 형식으로 내보낼 수 있습니다.
Lottie 파일을 플러터 프로젝트에 추가합니다. 이 파일은 애니메이션을 모방하기 위해 사용될 것입니다.

플러터에서 Lottie 사용하기

pubspec.yaml 파일에서 lottie: ^1.0.0 의존성을 추가합니다.
Flutter 프로젝트의 패키지를 업데이트합니다.
```
   flutter pub get
```
필요한 lottie_flutter 패키지를 import합니다.
```
import 'package:lottie/lottie.dart';
```
화면에 애니메이션을 표시하기 위해 Lottie.asset 위젯을 사용합니다.
```
Lottie.asset('assets/lottie-animation.json'),
```

필요한 경우 애니메이션의 설정을 지정할 수 있습니다.

Lottie.asset(
   'assets/lottie-animation.json',
   width: 300,
   height: 300,
   repeat: true,
   reverse: true,
),

애니메이션이 필요한 부분에 위젯을 배치하고, 원하는 UI와 애니메이션 속도를 설정합니다.

Lottie로 디자인 포트폴리오 앱의 동적 애니메이션 만들기

Lottie 파일을 다운로드하고 assets 폴더에 추가합니다.

애니메이션을 표시할 화면을 구성합니다.

import 'package:flutter/material.dart';
import 'package:lottie/lottie.dart';

class PortfolioScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('디자인 포트폴리오'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            // 애니메이션
            Lottie.asset('assets/design-portfolio.json'),
            SizedBox(height: 16),
            // 다른 컨텐츠
            Text('플러터로 만든 디자인 포트폴리오 앱', style: TextStyle(fontSize: 24)),
          ],
        ),
      ),
    );
  }
}

모바일 앱에서 디자인 포트폴리오 화면에 애니메이션을 추가합니다.

import 'package:flutter/material.dart';
import 'portfolio_screen.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '플러터 포트폴리오 앱',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: PortfolioScreen(),
    );
  }
}

결론

이제 플러터와 Lottie를 사용하여 디자인 포트폴리오 앱에 멋진 동적 애니메이션을 구현할 수 있습니다. Lottie는 다른 애니메이션 라이브러리보다 간편하고 효과적인 방법을 제공합니다. 관심 있는 개발자들은 Lottie 라이브러리의 다른 기능을 살펴보고 플러터 앱에서 동적 애니메이션 활용을 시도해 볼 수 있습니다.

Lottie란?

애니메이션 선행 작업

플러터에서 Lottie 사용하기

Lottie로 디자인 포트폴리오 앱의 동적 애니메이션 만들기

결론

참고 자료