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

# 概要

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

[LottieXamarinで始めるXamarinアプリのアニメーション / Introduction of animation to Xamarin apps using the LottieXamarin](https://speakerdeck.com/toshi0607/introduction-of-animation-to-xamarin-apps-using-the-lottiexamarin)

# Lottie とは？
* [Adobe After Effects](http://www.adobe.com/jp/products/aftereffects.html) で作成したアニメーションを [bodymovin](https://exchange.adobe.com/addons/products/12557#.WZgIPXdJbXF) プラグインで json 化し、アプリで読み込むライブラリ
* MvvmCross のメンテナでもある [Martijn van Dijk](https://github.com/martijn00) 氏が Xamarin 向けのライブラリを作成
* もちろん React Native でも！（[airbnb/lottie-react-native](https://github.com/airbnb/lottie-react-native)）
* ドイツ人映画監督、シルエットアニメの先駆者 Lotte Reiniger （白雪姫とか）にちなんで名付けられた

# 使用例
* Nintendo Switch Online アプリでも使われてるらしい！
  * [Nintendo Switch Online アプリは Xamarin(Xamarin.Forms)製です](http://qiita.com/amay077/items/53fc0d6d0cd46f1885bd)
* そもそも Airbnb 製ライブラリ
  * 使ってるという裏はとれてませんのでご参考まで…

# Lottie 以外の選択肢
* 手作業でがんばる😇
  * [Creating Mobile Apps with Xamarin.Forms Book Chapter 22. Animation](https://developer.xamarin.com/guides/xamarin-forms/creating-mobile-apps-xamarin-forms/summaries/chapter22/) などなど
* Adobe After Effects を利用する他のライブラリを使う
  * [Keyframes](https://github.com/facebookincubator/Keyframes) by Facebook
  * [Squall](http://www.marcuseckert.com/squall/) by Marcus Eckert
* Gif ファイルで頑張る
  * bodymovin JSON の2倍サイズ
  * 固定サイズのレンダリング
* 画像ファイル並べて頑張る
  * bodymovin JSON の30〜50倍
  * サイズ固定

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

# Xamarin.Formsで使う（iOS）

## 共通コード側
Lottie for Xamarin.Forms を追加します。
<img width="818" alt="スクリーンショット 2017-08-22 0.09.52.png" src="https://qiita-image-store.s3.amazonaws.com/0/46547/13d7338d-78f5-4b82-4abc-7eeb656c221c.png">

```xml: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 を追加します。
<img width="816" alt="スクリーンショット 2017-08-22 0.03.14.png" src="https://qiita-image-store.s3.amazonaws.com/0/46547/59139d36-2c70-3360-6ca5-4dc1eb847183.png">


Resources の中に使用する JSON ファイルを追加します。
<img width="201" alt="marked_resource.png" src="https://qiita-image-store.s3.amazonaws.com/0/46547/f41566a6-a291-4e1d-195b-762df63387fa.png">


```csharp: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
![ios_city.gif](https://qiita-image-store.s3.amazonaws.com/0/46547/15eb1bcb-290c-aef1-d0ce-e9dc6cb62354.gif)


# Xamarinネイティヴで使う（macOS）
nuget パッケージと JSON ファイルを追加します。
<img width="212" alt="スクリーンショット 2017-08-22 0.24.34.png" src="https://qiita-image-store.s3.amazonaws.com/0/46547/6e8c9df3-fb42-05b2-32a1-dd7de295d9d8.png">


```csharp: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
欠けます😇
![mac-lottie.gif](https://qiita-image-store.s3.amazonaws.com/0/46547/4993f884-40f8-5213-6e9a-dfbfd0e08afa.gif)

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

![lottie-mac.gif](https://qiita-image-store.s3.amazonaws.com/0/46547/f1c1f308-90ea-8521-3522-12440bf2eca5.gif)



# 使用上の注意
* com.airbnb.ios.lottie - 2.0.3.1 は動かない
  * とりあえずcom.airbnb.ios.lottie - 2.0.5 で解消！
  * [issue](https://github.com/martijn00/LottieXamarin/issues/91)
* アニメが部分的にしか表示されないときがある
  * 使い方おかしいだけかも
  * [issue](https://github.com/martijn00/LottieXamarin/issues/72)
* Lottie 自体が Adobe After Effects の全ての機能をサポートしているわけではない
  * [Supported After Effects Features](https://github.com/martijn00/LottieXamarin#supported-after-effects-features)
* Xamarin ってつけずに検索すると、Adobe After Effects や bodymovin の使い方まで色々記事が出て来ます。bodymovin も　SVG、canvas、html 等 JSON 以外にも色々対応しているのでこれ単独でも色々と使い方はあるはずです。
  * [svg / canvas出力ができるbodymovinの紹介](http://techblog.kayac.com/bodymovin-svg-canvas)

# 「とりあえず動いた」の次
* いろんなサンプルを動かしてみる
  * [公式サンプル](https://github.com/airbnb/lottie-android/tree/master/LottieSample/src/main/assets)
  * [LottieFiles](https://www.lottiefiles.com/)（超おすすめ！）
     * 手元で試したり、こんなアイディアあるのか！と参考にしたり…
* 実場面に適用してみる
[Lottie で Xamarin.Forms のスプラッシュページを作ってみた．](
http://santea.hateblo.jp/entry/2017/03/08/Lottie_%E3%81%A7_Xamarin.Forms_%E3%81%AE%E3%82%B9%E3%83%97%E3%83%A9%E3%83%83%E3%82%B7%E3%83%A5%E3%83%9A%E3%83%BC%E3%82%B8%E3%82%92%E4%BD%9C%E3%81%A3%E3%81%A6%E3%81%BF%E3%81%9F%EF%BC%8E)
* Adobe After Efectsと戦ってみる
  * [Adobe After Effects 情報まとめ](https://matome.naver.jp/odai/2133343958212028901)
  * 公式チュートリアルからオンライン講座まで…

## [LottieFiles](https://www.lottiefiles.com/) の様子です
![lottiefiles.gif](https://qiita-image-store.s3.amazonaws.com/0/46547/f421ddf2-64a0-9866-30b8-4c70724a52b1.gif)

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

# 参考資料
* [Lottie](https://airbnb.design/introducing-lottie/)
* [martijn00/LottieXamarin](https://github.com/martijn00/LottieXamarin)
* [Adobe After Effects](http://www.adobe.com/jp/products/aftereffects.html)
* [Adobe Add-ons Bodymovin](https://exchange.adobe.com/addons/products/12557#.WZgIPXdJbXF)