🗂

FlutterでLottieアニメーションを実装する方法

2025/06/17に公開

はじめに

Flutterアプリにアニメーションを追加したいと思ったことはありませんか？
しかし、複雑なアニメーションを一から実装するのは大変ですよね。

そこで今回は、Lottieというライブラリを使用して、簡単に美しいアニメーションを実装する方法を紹介します。

Lottieとは？

Lottieは、Adobe After Effectsで作成したアニメーションを、JSONファイルとしてエクスポートし、アプリで簡単に表示できるようにするライブラリです。

主な特徴：

デザイナーが作成したアニメーションをそのまま使用可能
軽量でパフォーマンスが良い
様々なプラットフォームで同じアニメーションを表示可能

実装手順

1. パッケージの追加

まず、pubspec.yamlファイルにLottieパッケージを追加します：

dependencies:
  flutter:
    sdk: flutter
  lottie: ^3.1.0  # 最新バージョンを指定

パッケージを追加したら、以下のコマンドを実行して依存関係を更新します：

flutter pub get

2. Lottieの基本的な使い方

Lottieアニメーションを表示する方法は主に2つあります：

2.1 ネットワークから読み込む場合

Lottie.network(
  'https://assets5.lottiefiles.com/packages/lf20_ydo1amjm.json',
  width: 200,
  height: 200,
)

2.2 アセットから読み込む場合

まず、assets/animationsディレクトリを作成し、LottieのJSONファイルを配置します。
pubspec.yamlにアセットを追加します：

flutter:
  assets:
    - assets/animations/

アセットからアニメーションを読み込みます：

Lottie.asset(
  'assets/animations/loading.json',
  width: 200,
  height: 200,
)

3. よく使用するパラメータとオプション

Lottieには様々なパラメータがあり、アニメーションの表示方法をカスタマイズできます：

3.1 サイズと表示方法の制御

Lottie.network(
  'アニメーションのURL',
  width: 200,          // 幅
  height: 200,         // 高さ
  fit: BoxFit.contain, // 表示方法（contain, cover, fill等）
)

3.2 アニメーションの制御

Lottie.network(
  'アニメーションのURL',
  controller: _controller,  // アニメーションコントローラー
  repeat: true,            // ループ再生
  animate: true,           // 自動再生
  frameRate: FrameRate.max, // フレームレート
)

3.3 イベントハンドリング

Lottie.network(
  'アニメーションのURL',
  onLoaded: (composition) {
    // アニメーション読み込み完了時の処理
  },
  onError: (error) {
    // エラー発生時の処理
  },
)

4. アニメーションの制御方法

アニメーションを制御するには、AnimationControllerを使用します：

// コントローラーの初期化
final controller = AnimationController(vsync: this);

// アニメーションの制御
controller.forward();  // 再生
controller.reverse();  // 逆再生
controller.stop();     // 停止
controller.reset();    // リセット

サンプルアニメーションの入手方法

Lottieアニメーションは以下の方法で入手できます：

LottieFilesから無料のアニメーションをダウンロード
Adobe After Effectsで自作
デザイナーから提供を受ける

注意点

ネットワークから読み込む場合は、インターネット接続が必要です
アセットから読み込む場合は、アプリのサイズが大きくなります
複雑なアニメーションは、パフォーマンスに影響する可能性があります

完全な実装例

以下は、これまで説明した機能をすべて含む完全な実装例です。
各パートには詳細なコメントを付けており、実装の理解を助けます：

// Flutterの基本パッケージをインポート
import 'package:flutter/material.dart';
// Lottieパッケージをインポート
import 'package:lottie/lottie.dart';

// アプリケーションのエントリーポイント
void main() {
  runApp(const MyApp());
}

// アプリケーションのルートウィジェット
class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Lottie Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      // Lottieのデモページを表示
      home: const LottieDemoPage(),
    );
  }
}

// Lottieアニメーションを表示するページ
class LottieDemoPage extends StatefulWidget {
  const LottieDemoPage({super.key});

  @override
  State<LottieDemoPage> createState() => _LottieDemoPageState();
}

class _LottieDemoPageState extends State<LottieDemoPage> with SingleTickerProviderStateMixin {
  // アニメーションを制御するコントローラー
  late final AnimationController _controller;
  // アニメーションの再生状態を管理
  bool isPlaying = false;

  @override
  void initState() {
    super.initState();
    // アニメーションコントローラーを初期化
    _controller = AnimationController(vsync: this);
  }

  @override
  void dispose() {
    // コントローラーを破棄
    _controller.dispose();
    super.dispose();
  }

  // タップ時の処理
  void _onTap() {
    if (isPlaying) {
      _controller.reset();
    } else {
      _controller.forward();
    }
    setState(() {
      isPlaying = !isPlaying;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("Lottie Animation Demo")),
      body: SingleChildScrollView(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            const SizedBox(height: 20),
            // 1. ネットワークからLottieアニメーションを読み込む例
            const Text(
              "1. ネットワークから読み込み",
              style: TextStyle(fontSize: 16, fontWeight: FontWeight.bold),
            ),
            GestureDetector(
              onTap: _onTap,
              child: Lottie.network(
                'https://assets5.lottiefiles.com/packages/lf20_ydo1amjm.json',
                controller: _controller,
                onLoaded: (composition) {
                  _controller.duration = composition.duration;
                },
                width: 200,
                height: 200,
              ),
            ),
            const SizedBox(height: 20),
            // 2. アセットからLottieアニメーションを読み込む例
            const Text(
              "2. アセットから読み込み",
              style: TextStyle(fontSize: 16, fontWeight: FontWeight.bold),
            ),
            Lottie.asset(
              'assets/animations/loading.json',
              width: 200,
              height: 200,
              fit: BoxFit.fill,
            ),
            const SizedBox(height: 20),
            // 3. ループ再生の例
            const Text(
              "3. ループ再生",
              style: TextStyle(fontSize: 16, fontWeight: FontWeight.bold),
            ),
            Lottie.network(
              'https://assets9.lottiefiles.com/packages/lf20_UJNc2t.json',
              width: 200,
              height: 200,
              repeat: true,
            ),
            const SizedBox(height: 20),
            // 4. 速度変更の例
            const Text(
              "4. 速度変更",
              style: TextStyle(fontSize: 16, fontWeight: FontWeight.bold),
            ),
            Lottie.network(
              'https://assets3.lottiefiles.com/packages/lf20_kkflmtur.json',
              width: 200,
              height: 200,
              frameRate: FrameRate.max,
            ),
          ],
        ),
      ),
    );
  }
}

まとめ

Lottieを使用することで、簡単に美しいアニメーションを実装できます。
デザイナーと協業する場合も、After Effectsのアニメーションをそのまま使用できるため、開発効率が向上します。