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

自己紹介 ● 杉田 寿憲（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#_=_

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

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

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 の説明引用多いので中立ではないです

Xamarin.Formsで使う（iOS）

DEMO

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

使用上の注意 ● 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」ってつけないでください

「とりあえず動いた」の次 ● いろんなサンプルを動かしてみる ○ 公式サンプル ■ 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 ■ 公式チュートリアルからオンライン講座まで…

参考資料 ● 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

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