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
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#_=_
3. 今日のお話 • Xamarin（Forms、ネイティヴ）アプリへのアニメーション導入方 法 • LottieというAdobe After Effectsで作成したアニメーションをア プリでレンダリングするためのライブラリの概要 • 「動いた！」の次の一歩
4. Lottieとは • After Effectsで作成したアニメーションをbodymovinプラグイン でjson化し、アプリで読み込むライブラリ • MvvmCrossのメンテナでもあるMartijn van Dijk氏がXamarin向 けのライブラリを作成 • ドイツ人映画監督、シルエットアニメの先駆者Lotte Reiniger （白雪姫とか）にちなんで名付けられた + json +
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 の説明引用多いので中立ではないです
6. Xamarin.Formsで使う（iOS）
7. DEMO
8. Xamarinネイティヴで使う（macOS）
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」ってつけないでください
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 ▪ 公式チュートリアルからオンライン講座まで…
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
12. ご清聴ありがとうございました！ LottieXamarinで始める Xamarinアプリのアニメーション