DroidKaigi 2017 実践アニメーションの講義で使用したスライドです。

1. 実践アニメーション ～複雑なアニメーションへのアプローチ～
湯上 尚哉

2. 資料について
PDF に ODP を埋め込んでありますので、ダウンロード後 LibreOffice で
開くとアニメーション gif が動きます
サンプルコード
https://github.com/citrous/practicalanimation

3. 目次
1. 自己紹介とこの講義について
2. View アニメーションの基礎
3. 様々なアプローチの紹介
3-1. 複数の要素を組み合わせる
3-2. AnimatedVectorDrawable の作り方
3-3. コードで実装する

4. 目次
1. 自己紹介とこの講義について
2. View アニメーションの基礎
3. 様々なアプローチの紹介
3-1. 複数の要素を組み合わせる
3-2. AnimatedVectorDrawable の作り方
3-3. コードで実装する（ここが本編！）

5. 1. 自己紹介とこの講義について

6. 湯上 尚哉（ゆのうえ なおや）
Android と Kotlin 大好き
ワインと日本酒も大好き
最近 Netflix に夢中

7. 株式会社セプテーニ・オリジナルで
「 GANMA! 」という漫画アプリの開発に従事
Android も Scala で書いています

8. Android のアニメーション
どうやって作るべき？

9. アニメーション画像データがあるなら問題なし！
ない場合、どうやって作るのか？

10. Animation 関連の API がたくさん
・ Animation クラス
・ Transition Animation
・ Property Animation
・などなど

11. 複雑なアニメーションを実装する際に
どういうアプローチが存在するのかを紹介します

12. 2. View アニメーションの基礎

13. Android の基本的なアニメーション
・移動（ Translation ）
・拡大縮小（ Scale ）
・回転（ Rotation ）
・透過（ Alpha ）

14. 移動（ Translation ）
view.animate().translationX(128).translationY(128).start();

15. 拡大・縮小（ Scale ）
view.animate().scaleX(2.0f).scaleY(2.0f).start();

16. 回転（ Rotation ）
view.animate().rotation(180f).start();

17. 透過（ Alpha ）
view.animate().alpha(0f).start();

18. Material Design からのアニメーション事情
・物理的な視覚効果を表現する
・ユーザーアクションへのフィードバックが重要
→ Ripple Effect, Transition Animation

19. 今時のアプリのデザイン
・シンプルなアニメーションでは表現力不足
・なんだか物足りない

20. 3. 複雑なアニメーションへのアプローチ

21. 複数の要素を組み合わせる
res/animator に AnimatorSet のリソースを作る
他の View にも使いまわせる

22. ・ typo が怖い
・アニメーションが複雑になってくると読み辛い
・一度作成したリソースが聖域になりやすい

23. AnimatedVectorDrawable
ObjectAnimator を使って VectorDrawable を
アニメーションさせる

24. Android Icon Animator
https://romannurik.github.io/AndroidIconAnimator/
Google の Roman Nurik 氏による神ツール
作成したアニメーションアイコンを xml で出力可能

25. VectorDrawable に対応した
アニメーションアイコンを手軽に作成できる
プレビュー版とはいえ実用性は十分
アニメーションさせる対象が増えると大変…

26. シンプルなアニメーションアイコンは
手軽に作成できる
プレビュー版とはいえ実用性は十分
アニメーションさせる対象が増えると大変…

27. こんなアニメーションは？

28. ここからが本題です

29. ValueAnimator ＋ CustomView 万能説

30. ValueAnimator
・ ObjectAnimator の継承元
・ API Level 11 ～
・指定した値を指定した時間内で変化させる
・複数のプロパティを持たせることも可能

31. ここで指定した時間内で

32. ここで指定した値が 0 ～指定値まで変わる

33. ・ setValues は基本的に何でも OK
・複数の値を Key-Value で指定できる
・開始時の値を指定することも可能 (API Level 21 ～ )

34. setValues のなかまたち
setFloatValues(float... values) → float 値
setIntValues(int... values) → int 値
setValues(PropertyValuesHolder... values)
→ PropertyValuesHolder を入れられる
setObjectValues(Object... values)
→ 何でも OK. 推移は setEvaluator で定義する

35. Interpolator に合わせて変化させることができる
最初ゆっくり後半加速とか、最初と最後ゆっくりとか

36. UpdateListener を設定
値が更新されたタイミングで View を更新してあげる

37. View の onDraw() で ValueAnimator の値をもとに
図形を描画

38. 各点の描画
X 座標 = value * ランダム数値 1 + A
Y 座標 = (value * ランダム数値 2)^2
- 2( ランダム数値 2 * ランダム数値 3) + A
ランダム数値 : アニメーション開始時に生成
value: ValueAnimator で取得できる値
A: View の中心までの座標

39. 出来上がり

40. ValueAnimator を複数使った例

41. ・全てコード内で完結する
・描画の相対座標指定やランダム要素の付加等が楽
・アニメーション対象が増えても追加しやすい
・複雑になった場合の可読性が xml より高そう

42. まとめ
・画像リソースがあるならそれに越したことはない
・ Android Icon Animator は便利
・ ValueAnimator + CustomView で何とでもなる

43. 素敵な Android アニメーションライフを
お過ごしください