Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

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

Toshinori Sugita

August 25, 2017
Tweet

More Decks by Toshinori Sugita

Other Decks in Technology

Transcript

  1. 自己紹介 • 杉田 寿憲(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#_=_
  2. 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 の説明引用多いので中立ではないです
  3. 使用上の注意 • 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」ってつけないでください
  4. 「とりあえず動いた」の次 • いろんなサンプルを動かしてみる ◦ 公式サンプル ▪ 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 ▪ 公式チュートリアルからオンライン講座まで…
  5. 参考資料 • 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