LottieはAirBnBが開発した,アニメーションを表示するライブラリ. 表示させるアニメーションはこちらのサイトに公開されている.

動画はiOSの例なので,Androidはどうしようかと探した.この記事はAndroidの情報です.参考にした下記の記事では,Android,iOSの両方の情報が書かれています.とても素晴らしい.

https://xamgirl.com/lottie-animations-step-by-step-in-xamarin-forms/

アニメーションをダウンロードする

アニメーションファイルはLottieFilesからダウンロードする.

ファイル形式はjson.

好みのものをダウンロードする.

lottiefiles.com

f:id:shuhelohelo:20200602224230p:plain

JSONファイルを各プロジェクトに配置する

以下はAndroidの例になるが,ファイルをAndroidプロジェクトのAssetsフォルダに入れる.ドラッグアンドドロップで良い.

ファイルのBuildActionをAndroid Assetに変更する.デフォルトでこれになっているはず.

f:id:shuhelohelo:20200228141453p:plain

Com.Airbnb.Xamarin.Forms.LottieをNugetでインストール.

現時点での最新バージョンは3.1.2だが,うまく動かすことができなかったので,今回はバージョン3.0.4をインストールした.

手順としては,MainActivity.csにAnimationViewRenderer.Init()を追加する,とのことだが,追加しなくても表示された.これはXamarin.Androidの場合に必要なのだろうか.わからない.

        protected override void OnCreate(Bundle savedInstanceState)
        {
            TabLayoutResource = Resource.Layout.Tabbar;
            ToolbarResource = Resource.Layout.Toolbar;

            base.OnCreate(savedInstanceState);

            Xamarin.Essentials.Platform.Init(this, savedInstanceState);
            global::Xamarin.Forms.Forms.Init(this, savedInstanceState);

            AnimationViewRenderer.Init();//これを追加

            LoadApplication(new App());
        }

ビュー(XAML)の編集

ContentPageに以下のようにLottieの名前空間を追加しておく.

<ContentPage
...
    xmlns:lottie="clr-namespace:Lottie.Forms;assembly=Lottie.Forms"
...>

アニメーションを表示させたい箇所に以下のようにAnimationViewを記述する.

            <lottie:AnimationView
                x:Name="AnimationView"
                Animation="5834-pouring.json"
                AutoPlay="True"
                HorizontalOptions="FillAndExpand"
                Loop="true"
                Speed="1.0"
                VerticalOptions="FillAndExpand" />