実践Lottie.pdf

Transcript

1. 実践Lottie kumanomi
2. 自己紹介 • @m_kumanomi • 熊埜御堂 将隆 (くま みどう まさたか) • 株式会社Diverse • Poiboy AndroidとiOS担当
3. Lottieと Airbnbが発表した、Android・Web・iOS・React Nativeなどでアニメーションを組み込むため ライ ブラリです 静止画像を使うことと同じくらい簡単に、 アプリでアニメーションを使うことができます
4. どんなアプリに組み込んだ ？ <Poiboy> 女子大生がイケメンを見つけるため マッチングアプリです こ アプリにLottieでアニメーションを追 加しました
5. なぜLottieだった か • こんなことがしたい • 人数的な問題 • 時間的な問題
6. こんなことがしたい • クリスマス • 年末 • 年始 といった３つ 異なる期間でちょっとリッチな アニメーション付き キャンペーン(以後CP)を実施したい
7. こんなことがしたい(デザイナーさん 要望) • クリスマス サンタが上から下にシャンシャン出てきて プレゼントを置いてパッカーン • 年末 花火が上がってガラポンが回ってババーン • 年始 方 年末 ガラポンがポチ袋です
8. こんなことがしたい(キャンペーン) • 課金プランを4種類増やしたい • CP 初日と終了1日前と終了日に 告知 ポップアップを出したい • くじ引きっぽく景品排出できるようにしたい • ユーザー アクションによって再度くじ引きできるチャンスを付与したい • せっかくな で登録導線でも告知したい • API 間に合わない で景品情報 一部 アプリで持たないといけない • などなど
9. すごく難しそうなこと わかった こんなことがしたい(キャンペーン)
10. チーム体制 Android (僕) PM 兼務 Server Server デザイナー 1人 プロデューサー兼務 iOS
11. チーム体制 Android (僕) PM 兼務 Server Server デザイナー 1人 プロデューサー兼務 iOS
12. ひとりぼっちだった チーム体制
13. CPやるよ！ 僕へ 告知 11/28にあった 時間的問題 (slack調べ)
14. クリスマスまで 1ヶ月 切っていた 時間的問題 (クリスマス前に リリース必要ですよ ？)
15. 無理 時間的問題
16. 無理 時間的問題
17. 満を持してLottie登場
18. 満を持してLottie登場
19. 満を持してLottie登場 こいつ すげぇや
20. 今まで アニメーション作成時 依頼 されかた 例 • iOSですでに作られててそれを見て！ • 動画ファイルを渡される • AfterEffects スクリーンショットも動画と一緒に送られて来る
21. アニメーション作成時 依頼 されかた 例
22. それがLottieで ... jsonファイルと画像ファイルを もらうだけ！！！！
23. Lottieで アニメーション製作 流れ 1. Illustratorで画像(素材)を作る 2. AfterEffectsでアニメーションを作る 3. AfterEffects bodymovin(後で紹介)プラグインで AfterEffectsで作ったアニメーションをjsonに変換する 4. アプリに組み込む それだけ！！！
24. AfterEffectsと • AdobeAfterEffects 、最先端 ビジュアルエフェクトとモーショングラフィックスを 実現する、強力かつ柔軟に対応可能な映像制作・合成ソフトウェアです。(Adobe ページコピペ) • 映像を加工したり、エフェクトを追加したり静止画から動画を作ったりと いろんなことができる動画制作ツールです
25. bodymovinと • AfterEffectsで制作したアニメーションデータをJSON形式で書き出してくれるエクス テンションです。 • 書き出されたJSONファイル Lottieで読み込むことができます
26. 実装コードを紹介 Lottie実装編
27. Lottie実装(gradle) build.gradle dependencies { implementation 'com.airbnb.android:lottie:$lottieVersion' } gradleに下を追加
28. Lottie実装(xml) sample.xml <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" tools:context="com.example.diverse.lottie.MainActivity"> <com.airbnb.lottie.LottieAnimationView android:id="@+id/lottie_animation_view" android:layout_width="match_parent" android:layout_height="wrap_content" /> </LinearLayout>
29. Lottie実装 LottieSampleFragment.kt override fun onActivityCreated(savedInstanceState: Bundle?) { super.onActivityCreated(savedInstanceState) // アニメーション json読み込み lottieAnimationView.setAnimation(R.raw.sample) // ループ 制御 lottieAnimationView.loop(true) // アニメーション開始 lottieAnimationView.playAnimation() } 今回 rawディレクトリにjsonファイルを入れましたが、 assetsに入れても動作します Animator.AnimationListener()をセットできる で、 通常 アニメーションと同じように扱うことができます
30. かんたん
31. Lottieで作ったクリスマス アニメーション
32. Lottieで作った年末アニメーション
33. Lottieで作った年始アニメーション
34. Lottie実装編
35. 実装 かんたんだけど・・・ 1. デザイナーさん AfterEffects 学習コスト 問題 2. AfterEffectsを勉強した方法 3. AfterEffects 困ったところ こ 3点に絞って共有します！
36. AfterEffects 学習コスト • 個人差 あるも アニメーションを製作した経験がない状態でAfterEffectsを 使った場合、初期 学習時間がかなりかかる • 先ほど再生したアニメーションであれ 作り方 記事等 色々なところに 落ちている で、初めてでも触りながらでなんとか作ることができる • しっかりと鍛えたい場合 本を買うなり詳しい人が近くにいないと難しい
37. AfterEffectsを勉強した方法 • サイトを参考に本を購入し作りながら勉強 • 同じプロダクト内にAfterEffectsに詳しいエンジニア 方もいた で 聞きながら学習できた • 社内 デザイナー陣でAfterEffects 勉強会を行なっていた
38. AfterEffects 勉強会 参考までに...
39. デザイナー視点でAfterEffects 困ったこと1 • 得意な人を隣に置いておいて教えてもらいたいぐらいに 難しい • 作り始めるまで 最初 学習コストが多い (急にタスクを振られてできるも で ない) • アニメーションを作る時間がそこそこかかる。丸一日など時間を取られてしまう (弊社 場合アプリ 画面を作りつつバナーを作りつつなど他 タスクが多い) • とにかくアプリ 扱い方が難しい(時間軸があるため)
40. デザイナー視点でAfterEffects 困ったこと2 • 表現できることに限界がある 技術力不足や、工数的な問題でイメージ通りに作れない時がある。 そ 際 妥協するしかない・・・ • 使えるフィルターを考えてアニメーションを作ること Lottieで使えないフィルターがいくつかあるため、そこを考慮しないといけない(後ほ ど)
41. Lottieで使えないAfterEffects 機能 http://airbnb.io/lottie/supported-features.html
42. じめてAfterEffectsでアニメーションを作った時 こと • アニメーションを作ってもらった後に、Bodymovinでうまく変換できないフィルター 存在を理解していなかったため、最初 アニメーション うまく動かなかった • 最初 反射効果 エフェクトを使っていたところがうまくいかなかった (slack調べ)
43. 前 スライド 反射効果でうまくいかない問題
44. 前 スライド 反射効果でうまくいかない問題
45. 前 スライド 反射効果でうまくいかない問題 • Light Sweepエフェクトが対応していなかった • じゃあどうすれ いい ？
46. 前 スライド 反射効果でうまくいかない問題 • オレンジ色 画像 上に白い同じ形 画像を重 る • 白い画像 方 描画領域をマスクします • そ 後にマスク 領域を右側にずらしていくことで 作りたかったアニメーションを実現しています
47. 完成したアニメーション
48. 前 スライド 反射効果でうまくいかない問題 • 対応していないエフェクトなど 機能 結構ある • ただ実装方法を変えてみるとすれ 再現させること できる
49. じゃあアニメーション 全部 Lottieでいい ？
50. Lottieに向かないアニメーション
51. Lottieに向かないアニメーションもあるけど・・・ • 全部 アニメーションがLottieでいける！わけで ない • すごく便利！！
52. 今まで 話から • AfterEffectsを使ったことがあるデザイナーさんがいたからでしょ？ • 勉強会とかできない • AfterEffectsに詳しいエンジニアがいない そういう時 どうな ？
53. 人柱になってもらう1 • 新しいデザイナーさんにアプリ 起動画面を置き換えてもらった • そ デザイナーさん AfterEffectsを使ったことがありません • 現在 チーム体制 デザイナーさん1人だけ 状態です • そ 際に出た学びを共有
54. 人柱になってもらう2 • 今までだとAfterEffects 勉強会を行なっている • 同じプロダクト内にAfterEffects わかるエンジニアがいる • 同じプロダクト内にデザイナーが複数人いる 0からAfterEffectsを学んだ場合 どうなってしまう か
55. な でスプラッシュ画面を 置き換えていただきました！
56. 今まで スプラッシュ画面 sample.xml <?xml version="1.0" encoding="utf-8"?> <animation-list xmlns:android="http://schemas.android.com/apk/res/android" android:oneshot="true"> <item android:duration="50" android:drawable="@drawable/anim_splashscreen_1" /> <item android:duration="50" android:drawable="@drawable/anim_splashscreen_2" /> <item android:duration="50" android:drawable="@drawable/anim_splashscreen_3" /> <item android:duration="50" android:drawable="@drawable/anim_splashscreen_4" /> <item
57. 今まで スプラッシュ画面 • パラパラ漫画 ようなアニメーションを作っていた
58. 今まで スプラッシュ画面
59. Lottieで置き換えた後 スプラッシュ画面
60. スプラッシュ画面 置き換えで ハマりどころ(実機再生)
61. スプラッシュ画面 置き換えで ハマりどころ i 文字 アニメーションが ズレている がわかるでしょうか？
62. lottiefiles.com • lottie jsonファイルをブラウザ上で 再生してくれるサイト • Drag and DropするだけでOK
63. lottiefiles.comで再生。しかしながら・・・
64. lottiefiles.comで再生。しかしながら・・・ • i 文字 ズレない(うまくいってる！！) • どうやってなおすか jsonファイルをみて修正 したく ない • AfterEffects 方を再確認
65. AfterEffectsでアニメーションを確認
66. スプラッシュ画面製作時 知見まとめ • 弊社にかつて在籍したデザイナーさん noteがかなり役に立った(あとで紹介) • スプラッシュ画面を作るまでにかかった時間 4日 (合間合間に別作業もしていたけどモチベーション 維持が難しい) • 慣れれ 1日でできそう • 今回に関して 完成形が見えていた で時間が短縮された ◦ 絵コンテ、案だし ◦ プロダクトとして 方向性すり合わせ • AfterEffects 操作が結構特殊？初見に 扱いづらくそこがネック
67. nozoeさん note https://note.mu/conoito/n/n14d5cb725c99?magazine_key=m42e211ddb8d1
68. nozoeさん note
69. nozoeさん note
70. nozoeさん note
71. Lottie使って良かったこと1 • アニメーションを作って見せてから、エンジニアにアニメーション 実装可否を聞く必要がない • デザイナーが実際に作ったも がそ まま使える エンジニア側 都合による妥協みたいなも が少ない • ユーザー フィードバックに対して アニメーションを気軽に作れたり 簡素なデフォルト ローディングアニメーションなどをちょっとリッチなも に変更し たり・・・
72. Lottie使って良かったこと2 • ある程度学習してアニメーションも使い回せるようになると 製作速度が若干上がっていく • jsonファイルをサーバーなどに置いておくことで、 アニメーション A/Bテストも可能 スライドで rawディレクトリを使いましたが、オンラインストレージ上にjsonを置いて おけ そちらを再生するみたいなことができます！ (これって結構すごくないですか？ )
73. 総括 • エンジニアにとってLottie とんでもなく便利に感じた • エンジニア側が楽になった分、デザイナー側 お手伝いができる • 躓く AfterEffects そこさえ乗り越えられる環境があれ Lottieをつかったアニメーションを作っていけ る。 • CP 間に合いました！めでたしめでたし！
74. • 女 子 「ポイ」から始まるマッチングアプリ ◦ 会員数100万人以上! ◦ 10, 20代 ユーザーが80%以上!! ◦ 毎日1万以上 マッチング!!! • Android / iOS / Web でサービス展開中 Web (※10代 満18歳以上)
75. Poiboyで 一緒にサービスを作るエンジニアを全力で採用中!! • Android エンジニア • サーバーサイドエンジニア • デザイナー 上記以外にも エンジニアを積極採用中です! まず ぜひDiverse ブースまでお気軽にお越しください!! 採用ページ: https://diverse-inc.co.jp/recruit/positions 公式FacebookとTwitterでも最新情報を公開中 !
76. Thank You ! Special thanks to: yumiko_i yu aono hinofu nozoe