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

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

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

C000f292a92b894afabbb352e8709667?s=128

Toshinori Sugita

August 25, 2017
Tweet

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アプリのアニメーション