LottieXamarinで始めるXamarinアプリのアニメーション


概要

  • Xamarin でもアニメーションを使ってみようということで、 LottieXamarinの使い方について書きます。
  • ここに資料を上げてありますので、概要だけ流し読みしたい方はこちらをどうぞ!

LottieXamarinで始めるXamarinアプリのアニメーション / Introduction of animation to Xamarin apps using the LottieXamarin

Lottie とは?

  • Adobe After Effects で作成したアニメーションを bodymovin プラグインで json 化し、アプリで読み込むライブラリ
  • MvvmCross のメンテナでもある Martijn van Dijk 氏が Xamarin 向けのライブラリを作成
  • もちろん React Native でも!(airbnb/lottie-react-native
  • ドイツ人映画監督、シルエットアニメの先駆者 Lotte Reiniger (白雪姫とか)にちなんで名付けられた

使用例

Lottie 以外の選択肢

※ 大体 https://github.com/martijn00/LottieXamarin 内の説明なので中立ではないかもです

Xamarin.Formsで使う(iOS)

共通コード側

Lottie for Xamarin.Forms を追加します。

LottieFormsSamplePage.xaml
<?xml version="1.0" encoding="utf-8"?>
<!-- xmlns:forms="clr-namespace:Lottie.Forms;assembly=Lottie.Forms"をお忘れなく! -->
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" 
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
             xmlns:local="clr-namespace:LottieFormsSample" 
             x:Class="LottieFormsSample.LottieFormsSamplePage"
             xmlns:forms="clr-namespace:Lottie.Forms;assembly=Lottie.Forms">
    <ContentPage.Content>
        <StackLayout VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
            <!-- ここがメインです! -->
            <forms:AnimationView 
                x:Name="AnimationView" 
                Animation="City.json" 
                AutoPlay="True" Loop="true"
                VerticalOptions="FillAndExpand"
                HorizontalOptions="FillAndExpand" />
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

プラットフォーム側

Lottie for Xamarin.Forms を追加します。

Resources の中に使用する JSON ファイルを追加します。

AppDelegate.cs
using System;
using System.Collections.Generic;
using System.Linq;

using Foundation;
using UIKit;

// Lottie用に追加
using Lottie.Forms.iOS.Renderers;

namespace LottieFormsSample.iOS
{
    [Register("AppDelegate")]
    public partial class AppDelegate : global::Xamarin.Forms.Platform.iOS.FormsApplicationDelegate
    {
        public override bool FinishedLaunching(UIApplication app, NSDictionary options)
        {
            global::Xamarin.Forms.Forms.Init();

            LoadApplication(new App());

            // Lottie用に追加
            AnimationViewRenderer.Init();

            return base.FinishedLaunching(app, options);
        }
    }
}

DEMO

Xamarinネイティヴで使う(macOS)

nuget パッケージと JSON ファイルを追加します。

ViewController.cs
using System;

using AppKit;
using Foundation;

using Airbnb.Lottie;

namespace LottiemacOSSample
{
    public partial class ViewController : NSViewController
    {
        private LOTAnimationView lottieLogo;

        public ViewController(IntPtr handle) : base(handle)
        {
        }

        public override void ViewDidLoad()
        {
            base.ViewDidLoad();

            this.lottieLogo = LOTAnimationView.AnimationNamed("LottieLogo1");
            this.lottieLogo.LoopAnimation = true;
            this.lottieLogo.ContentMode = LOTViewContentMode.ScaleAspectFill;
            this.lottieLogo.Frame = View.Bounds;
            this.lottieLogo.AutoresizingMask = NSViewResizingMask.WidthSizable |
               NSViewResizingMask.HeightSizable;
            this.View.AddSubview(this.lottieLogo);
        }

        public override void ViewDidAppear()
        {
            base.ViewDidAppear();
            this.lottieLogo.Play();
        }

        public override NSObject RepresentedObject
        {
            get
            {
                return base.RepresentedObject;
            }
            set
            {
                base.RepresentedObject = value;
                // Update the view, if already loaded.
            }
        }
    }
}

DEMO

欠けます😇

駄菓子菓子、公式のサンプルいじったやつは欠けないなぜ…

使用上の注意

  • com.airbnb.ios.lottie - 2.0.3.1 は動かない
    • とりあえずcom.airbnb.ios.lottie - 2.0.5 で解消!
    • issue
  • アニメが部分的にしか表示されないときがある
    • 使い方おかしいだけかも
    • issue
  • Lottie 自体が Adobe After Effects の全ての機能をサポートしているわけではない
  • Xamarin ってつけずに検索すると、Adobe After Effects や bodymovin の使い方まで色々記事が出て来ます。bodymovin も SVG、canvas、html 等 JSON 以外にも色々対応しているのでこれ単独でも色々と使い方はあるはずです。

「とりあえず動いた」の次

LottieFiles の様子です

なんかワクワクしませんか?ユーザが次々と自分の作品を投稿していて、 JSON ファイルがダウンロードできます。

参考資料