【Flutter】Lottieを使ってアプリに動きを加える

2024年4月2日
2024年4月2日
プラグイン

プラグイン

対象者

Flutterを使ったアプリ開発に興味がある方
アプリのユーザー体験を向上させたい方
アニメーションの実装方法を学びたい方

はじめに

アプリのユーザー体験を格段に向上させるためには、単なる機能性だけでなく、見た目の美しさや動きの滑らかさも重要です。ここで重要な役割を果たすのが、アニメーションです。そこで注目したいのが「Lottie」です。Adobe After Effectsで作成された高品質なアニメーションを手軽にアプリに組み込めるLottieは、Flutter開発者にとって強力なツールとなります。
この記事では、Lottieの基本的な使い方から、アニメーションのカスタマイズ、制御方法までをわかりやすく解説します。
ただ、私自身Lottieの作成はできませんので、簡単なアニメーションファイルを使用しています。凝ったLottieであれば、もっと難しいと思います。

Lottieとは

Lottieの概要

Lottieは、Adobe After Effectsで作成されたアニメーションをJSON形式でエクスポートし、ネイティブモバイルアプリで再生するためのライブラリです。Bodymovinというプラグインを使ってエクスポートされたアニメーションは、Lottieを通じてAndroidやiOSアプリで簡単に実装できます。これにより、デザイナーと開発者の間の作業がスムーズになり、アプリのUI/UXを向上させることができます。

Lottieの利点

Lottieの最大の利点は、アニメーションの品質とパフォーマンスのバランスです。JSON形式であるため、アニメーションは軽量でありながら、ベクターベースのため解像度が変わっても品質が落ちません。また、アニメーションのカスタマイズや操作が容易であり、開発者はコードを書くことなくアニメーションを実装できます。これにより、開発の効率化とアプリのパフォーマンス向上が実現します。

Lottieの導入方法

FlutterプロジェクトへのLottie追加

LottieをFlutterプロジェクトに追加することで、アプリに魅力的なアニメーションを簡単に組み込むことができます。これは、開発者がコードを書くことなくデザインされたアニメーションを使用できるため、開発時間の短縮とアプリのビジュアル品質の向上につながります。

まず、pubspec.yamlファイルにLottieパッケージを追加する必要があります。

dependencies:
  lottie: ^2.7.0

この一行を追加するだけで、FlutterプロジェクトにLottieライブラリが組み込まれ、使用準備が整います。

Lottieファイルの配置

Lottieアニメーションを使用するには、まずアニメーションファイル（通常は.json形式）をプロジェクトのアセットに追加する必要があります。これにより、アプリが実行されるときにアニメーションファイルが読み込まれ、表示されるようになります。

アセットとしてLottieファイルを追加するには、pubspec.yamlファイルに以下のように記述します。

flutter:
  assets:
    - assets/animation.json

この設定により、assetsフォルダ内のanimation.jsonファイルがアプリのアセットとして認識され、アプリ内で使用できるようになります。アニメーションファイルは、Adobe After Effectsで作成し、Bodymovinプラグインを使用してエクスポートしたものを使用します。
また簡単なアニメーションファイルは、ネット上でも検索できます。

以上の手順により、FlutterプロジェクトにLottieアニメーションを導入し、アプリに魅力的なビジュアルエフェクトを追加することができます。

Lottieウィジェットの基本

Lottie.assetの使用

Lottie.assetは、アプリのアセットからLottieアニメーションを読み込み、表示するためのウィジェットです。このメソッドを使用することで、開発者は簡単にローカルのアニメーションファイルをアプリに組み込むことができます。これは、アプリのローディング画面やインタラクティブな要素など、さまざまな場面で利用できるため、非常に便利です。

Lottie.asset('assets/animation.json')

このコードスニペットは、assetsフォルダ内のanimation.jsonファイルを読み込み、アニメーションを表示する方法を示しています。

Lottie.networkの使用

Lottie.networkは、インターネット上のURLからLottieアニメーションを読み込み、表示するためのウィジェットです。このメソッドを使用することで、開発者はリモートのアニメーションファイルをアプリに組み込むことができます。これは、アニメーションファイルをアプリに組み込む代わりに、サーバーから動的にアニメーションを取得したい場合に特に有用です。

Lottie.network('https://example.com/animation.json')

このコードスニペットは、指定されたURLからアニメーションを読み込み、表示する方法を示しています。

ウィジェットのカスタマイズ

Lottieウィジェットは、さまざまなパラメータを通じてカスタマイズが可能です。例えば、アニメーションのサイズ、フィット方法、アニメーションの再生方法などを調整することができます。これにより、開発者はアニメーションをアプリのデザインやニーズに合わせて柔軟に調整することができます。

Lottie.asset(
  'assets/animation.json',
  width: 200,
  height: 200,
  fit: BoxFit.fill,
  repeat: true,
  reverse: true,
  animate: true,
)

このコードスニペットは、アニメーションのサイズ、フィット方法、ループ再生、逆再生、自動再生をカスタマイズする方法を示しています。これにより、アプリのさまざまなシーンでアニメーションを効果的に活用することができます。

アニメーションの制御

アニメーションの開始と停止

Lottieアニメーションは、AnimationControllerを使用してプログラム的に開始や停止を制御することができます。これにより、ユーザーの操作やアプリの状態に応じてアニメーションを動的に管理することが可能になります。

AnimationController _controller;

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

@override
void dispose() {
  _controller.dispose();
  super.dispose();
}

void _toggleAnimation() {
  if (_controller.isAnimating) {
    _controller.stop();
  } else {
    _controller.forward();
  }
}

このコードスニペットでは、AnimationControllerを使用してアニメーションの開始と停止を制御しています。_toggleAnimationメソッドを呼び出すことで、アニメーションの状態を切り替えることができます。

アニメーションのループ

Lottieアニメーションは、repeatメソッドを使用してループ再生することができます。これにより、アニメーションを継続的に再生することが可能になり、ローディング画面や背景アニメーションなどに適しています。

_controller.repeat();

このコードスニペットでは、repeatメソッドを使用してアニメーションをループ再生しています。

アニメーションの進行度の制御

Lottieアニメーションは、AnimationControllerのvalueプロパティを使用して進行度を制御することができます。これにより、アニメーションの特定の部分を精密に制御したり、アニメーションの進行を他の要素と同期させたりすることができます。

_controller.value = 0.5;

このコードスニペットでは、アニメーションの進行度を50%の位置に設定しています。これにより、アニメーションの中間点から再生を開始することができます。

以上の方法により、FlutterのLottieアニメーションを効果的に制御し、アプリのユーザー体験を向上させることができます。

アニメーションのカスタマイズ

サイズと配置の調整

Lottieアニメーションのサイズと配置は、ウィジェットのプロパティを通じて簡単に調整することができます。これにより、アニメーションを画面のさまざまな部分に適切にフィットさせることが可能になります。Littieであれば、拡大しても綺麗なままです！

Lottie.asset(
  'assets/animation.json',
  width: 200,
  height: 200,
  alignment: Alignment.center,
)

このコードスニペットは、アニメーションの幅と高さを200ピクセルに設定し、中央に配置する方法を示しています。

色の変更

Lottieアニメーションの色は、ColorFilteredウィジェットを使用して変更することができます。これにより、アニメーションの色調をアプリのデザインに合わせることができます。

ColorFiltered(
  colorFilter: ColorFilter.mode(Colors.blue, BlendMode.srcATop),
  child: Lottie.asset('assets/animation.json'),
)

このコードスニペットは、アニメーションの色を青に変更する方法を示しています。

透明度の制御

Lottieアニメーションの透明度は、Opacityウィジェットを使用して制御することができます。これにより、アニメーションの表示をさりげなくしたり、他の要素とのバランスを取ることができます。

Opacity(
  opacity: 0.5,
  child: Lottie.asset('assets/animation.json'),
)

このコードスニペットは、アニメーションの透明度を50%に設定する方法を示しています。

以上の方法により、FlutterでLottieアニメーションをカスタマイズし、アプリのデザインやニーズに合わせて調整することができます。

Q&A

Q1: Lottieとは何ですか？

A1: LottieはAdobe After Effectsで作成されたアニメーションをネイティブモバイルアプリで再生するためのライブラリです。軽量で高品質なアニメーションを実現し、Flutterアプリに簡単に組み込むことができます。

Q2: FlutterプロジェクトにLottieを導入する方法は？

A2: LottieをFlutterプロジェクトに導入するには、まずpubspec.yamlにLottieパッケージを追加します。次に、アセットとしてLottieアニメーションファイル（.json形式）をプロジェクトに追加し、Lottie.assetウィジェットを使って表示します。

Q3: Lottieアニメーションのカスタマイズ方法は？

A3: Lottieアニメーションは、サイズや配置の調整、色の変更、透明度の制御など、さまざまな方法でカスタマイズが可能です。例えば、Lottie.assetウィジェットのプロパティを使ってサイズを指定したり、ColorFilteredウィジェットで色を変更したりできます。

まとめ

読者はLottieについて多くを学びました。LottieはAdobe After Effectsで作成されたアニメーションをネイティブモバイルアプリで再生するためのライブラリであること、その軽量性と高品質が魅力であることを理解しました。Flutterプロジェクトへの導入方法や、Lottie.assetとLottie.networkを使った基本的な使用法も把握しました。さらに、アニメーションの制御やカスタマイズ方法についても学び、その柔軟性と拡張性を確認しました。これらの知識を活用することで、読者は自身のFlutterアプリに魅力的なアニメーションを簡単に組み込むことができるでしょう。

参考

Flutter Lottie Animation Tutorial | Stunning Animations In Flutter Using Lottie)
iCONS8
今回のLottieのファイルを使用しました。
リンクを含めれば無料で使用できますが、有料でないと種類は少ないし、無料と有料、どうやって見分けるんだろ。
以下で検索して見つけました。「https://icons8.jp/icons/set/bookmark-free–animated」
LottieFiles
Lottieファイルを作成するためのサイト。アニメーションを作れる気がしないので、ノータッチ。

ソース(main.dartにコピペして動作確認用)

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

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> with TickerProviderStateMixin {
  late final AnimationController _controller = AnimationController(
    vsync: this,
  );

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          children: [
            Lottie.asset(
              'assets/icons8-bookmark.json',
              width: 100,
              height: 100,
              fit: BoxFit.fill,
              repeat: true,
              reverse: true,
              animate: true,
            ),
            GestureDetector(
              child: ColorFiltered(
                colorFilter:
                    const ColorFilter.mode(Colors.blue, BlendMode.srcATop),
                child: Lottie.asset(
                  'assets/icons8-bookmark.json',
                  controller: _controller,
                  onLoaded: (composition) {
                    _controller.duration = composition.duration;
                  },
                ),
              ),
              onTap: () {
                if (_controller.value == 0) {
                  _controller.animateTo(0.5);
                } else {
                  _controller.animateBack(0);
                }
              },
            ),
          ],
        ),
      ),
    );
  }
}

このサンプルコードでは、Flutterを使ってLottieアニメーションを表示し、制御する方法を示しています。2種類のアニメーション方法が紹介してます。

繰り返しアニメーション: 最初のLottie.assetウィジェットは、repeat、reverse、animateパラメータを使用して、アニメーションを繰り返し再生し、逆再生し、自動的にアニメーションを開始します。この設定により、アニメーションは継続的にループし、前後に動きます。
タップでアニメーション制御: 2番目のLottie.assetウィジェットは、GestureDetectorウィジェットでラップされ、タップ時にアニメーションの進行度を制御します。animateTo(0.5)メソッドにより、アニメーションは中間点まで進み、ブックマークが追加される状態で停止します。再度タップすると、animateBack(0)メソッドによりアニメーションが最初に戻り、ブックマークが外れる状態になります。

このサンプルでは、assets/icons8-bookmark.jsonというLottieアニメーションファイルが使用されており、ブックマークの追加と削除のアニメーションが実装されています。このようにLottieを使うことで、Flutterアプリに魅力的でインタラクティブなアニメーションを簡単に追加できます。