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

・Xamarin（Forms、ネイティヴ）アプリにアニメーションを導入
・LottieというAdobe After Effectsで作成したアニメーションをアプリでレンダリングするためのライブラリを使用
・「動いた！」の次の一歩

Transcript

1. LottieXamarinで始める
   Xamarinアプリのアニメーション
   2017/8/30 初心者歓迎XamarinのLT会！
   Xamarin入門者の集い #3
   

   View Slide

2. 自己紹介
   ● 杉田 寿憲（Toshinori Sugita, @toshi0607）
   ● Software Engineer@freee
   ● 元◯TT ○ata企画営業、コード書くのかっこいいと思って業務
   経験なしからエンジニアに
   ○ http://toshi0607.com/general/struggle-for-freee/
   ● Rubyが多いですが、Microsoft技術関連開発も！！
   ○ サーバサイド: Ruby on Rails、Go
   ○ クライアントサイド: WPF、Xamarin
   ● We’re hiring @freee
   ○ 日本を変えたいWindowsアプリエンジニア募集！！
   ■ https://www.wantedly.com/projects/66243#_=_
   

   View Slide

3. 今日のお話
   ● Xamarin（Forms、ネイティヴ）アプリへのアニメーション導入方
   法
   ● LottieというAdobe After Effectsで作成したアニメーションをア
   プリでレンダリングするためのライブラリの概要
   ● 「動いた！」の次の一歩
   

   View Slide

4. Lottieとは
   ● After Effectsで作成したアニメーションをbodymovinプラグイン
   でjson化し、アプリで読み込むライブラリ
   ● MvvmCrossのメンテナでもあるMartijn van Dijk氏がXamarin向
   けのライブラリを作成
   ● ドイツ人映画監督、シルエットアニメの先駆者Lotte Reiniger
   （白雪姫とか）にちなんで名付けられた
   +
   json
   +
   

   View Slide

5. Lottie以外の選択肢
   ● 手作業でがんばる
   ○ Creating Mobile Apps with Xamarin.Forms Book Chapter 22. Animation
   ● 他のAE利用ライブラリを使う
   ○ Keyframes by Facebook
   ■ https://github.com/facebookincubator/Keyframes
   ○ Squall by Marcus Eckert
   ■ http://www.marcuseckert.com/squall/
   ● Gifファイルで頑張る
   ○ bodymovin JSONの2倍サイズ
   ○ 固定サイズのレンダリング
   ● 画像ファイル並べて頑張る
   ○ bodymovin JSONの30〜50倍
   ○ サイズ固定
   ※https://github.com/martijn00/LottieXamarin の説明引用多いので中立ではないです
   

   View Slide

6. Xamarin.Formsで使う（iOS）
   

   View Slide

7. DEMO
   

   View Slide

8. Xamarinネイティヴで使う（macOS）
   

   View Slide

9. 使用上の注意
   ● com.airbnb.ios.lottie - 2.0.3.1は動かない
   ○ com.airbnb.ios.lottie - 2.0.5 で直りました！
   ○ https://github.com/martijn00/LottieXamarin/issues/91
   ● アニメが部分的にしか表示されないときがある
   ○ 使い方おかしいだけかも
   ○ https://github.com/martijn00/LottieXamarin/issues/72
   ● Lottie自体がAdobe After Effectsの全ての機能をサポートして
   いるわけではない
   ○ Supported After Effects Features
   ○ https://github.com/martijn00/LottieXamarin#supported-after-effects-feature
   s
   ● 検索するときはとにかく「Xamarin」ってつけないでください
   

   View Slide

10. 「とりあえず動いた」の次
    ● いろんなサンプルを動かしてみる
    ○ 公式サンプル
    ■ https://github.com/airbnb/lottie-android/tree/master/LottieSample/src
    /main/assets
    ○ LottieFiles（超おすすめ！）
    ■ https://www.lottiefiles.com
    ● 実場面に適用してみる
    ○ Lottie で Xamarin.Forms のスプラッシュページを作ってみ
    た．（by Santea先生）
    ■ 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
    ■ 公式チュートリアルからオンライン講座まで…
    

    View Slide

11. 参考資料
    ● 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
    ● LottieXamarinで始めるXamarinアプリのアニメーション（Qiita記
    事）
    ○ http://qiita.com/toshi0607/items/063c277e6450e91c8349
    

    View Slide

12. ご清聴ありがとうございました！
    LottieXamarinで始める
    Xamarinアプリのアニメーション
    

    View Slide