Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

実践アニメーション

1,772 views

Published on

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

Published in: Engineering
  • Be the first to comment

実践アニメーション

  1. 1. 実践アニメーション ~複雑なアニメーションへのアプローチ~ 湯上 尚哉
  2. 2. 資料について PDF に ODP を埋め込んでありますので、ダウンロード後 LibreOffice で 開くとアニメーション gif が動きます サンプルコード https://github.com/citrous/practicalanimation
  3. 3. 目次 1. 自己紹介とこの講義について 2. View アニメーションの基礎 3. 様々なアプローチの紹介 3-1. 複数の要素を組み合わせる 3-2. AnimatedVectorDrawable の作り方 3-3. コードで実装する
  4. 4. 目次 1. 自己紹介とこの講義について 2. View アニメーションの基礎 3. 様々なアプローチの紹介 3-1. 複数の要素を組み合わせる 3-2. AnimatedVectorDrawable の作り方 3-3. コードで実装する(ここが本編!)
  5. 5. 1. 自己紹介とこの講義について
  6. 6. 湯上 尚哉(ゆのうえ なおや) Android と Kotlin 大好き ワインと日本酒も大好き 最近 Netflix に夢中
  7. 7. 株式会社セプテーニ・オリジナルで 「 GANMA! 」という漫画アプリの開発に従事 Android も Scala で書いています
  8. 8. Android のアニメーション どうやって作るべき?
  9. 9. アニメーション画像データがあるなら問題なし! ない場合、どうやって作るのか?
  10. 10. Animation 関連の API がたくさん ・ Animation クラス ・ Transition Animation ・ Property Animation ・などなど
  11. 11. 複雑なアニメーションを実装する際に どういうアプローチが存在するのかを紹介します
  12. 12. 2. View アニメーションの基礎
  13. 13. Android の基本的なアニメーション ・移動( Translation ) ・拡大縮小( Scale ) ・回転( Rotation ) ・透過( Alpha )
  14. 14. 移動( Translation ) view.animate().translationX(128).translationY(128).start();
  15. 15. 拡大・縮小( Scale ) view.animate().scaleX(2.0f).scaleY(2.0f).start();
  16. 16. 回転( Rotation ) view.animate().rotation(180f).start();
  17. 17. 透過( Alpha ) view.animate().alpha(0f).start();
  18. 18. Material Design からのアニメーション事情 ・物理的な視覚効果を表現する ・ユーザーアクションへのフィードバックが重要 → Ripple Effect, Transition Animation
  19. 19. 今時のアプリのデザイン ・シンプルなアニメーションでは表現力不足 ・なんだか物足りない
  20. 20. 3. 複雑なアニメーションへのアプローチ
  21. 21. 複数の要素を組み合わせる res/animator に AnimatorSet のリソースを作る 他の View にも使いまわせる
  22. 22. ・ typo が怖い ・アニメーションが複雑になってくると読み辛い ・一度作成したリソースが聖域になりやすい
  23. 23. AnimatedVectorDrawable ObjectAnimator を使って VectorDrawable を アニメーションさせる
  24. 24. Android Icon Animator https://romannurik.github.io/AndroidIconAnimator/ Google の Roman Nurik 氏による神ツール 作成したアニメーションアイコンを xml で出力可能
  25. 25. VectorDrawable に対応した アニメーションアイコンを手軽に作成できる プレビュー版とはいえ実用性は十分 アニメーションさせる対象が増えると大変…
  26. 26. シンプルなアニメーションアイコンは 手軽に作成できる プレビュー版とはいえ実用性は十分 アニメーションさせる対象が増えると大変…
  27. 27. こんなアニメーションは?
  28. 28. ここからが本題です
  29. 29. ValueAnimator + CustomView 万能説
  30. 30. ValueAnimator ・ ObjectAnimator の継承元 ・ API Level 11 ~ ・指定した値を指定した時間内で変化させる ・複数のプロパティを持たせることも可能
  31. 31. ここで指定した時間内で
  32. 32. ここで指定した値が 0 ~指定値まで変わる
  33. 33. ・ setValues は基本的に何でも OK ・複数の値を Key-Value で指定できる ・開始時の値を指定することも可能 (API Level 21 ~ )
  34. 34. setValues のなかまたち setFloatValues(float... values) → float 値 setIntValues(int... values) → int 値 setValues(PropertyValuesHolder... values) → PropertyValuesHolder を入れられる setObjectValues(Object... values) → 何でも OK. 推移は setEvaluator で定義する
  35. 35. Interpolator に合わせて変化させることができる 最初ゆっくり後半加速とか、最初と最後ゆっくりとか
  36. 36. UpdateListener を設定 値が更新されたタイミングで View を更新してあげる
  37. 37. View の onDraw() で ValueAnimator の値をもとに 図形を描画
  38. 38. 各点の描画 X 座標 = value * ランダム数値 1 + A Y 座標 = (value * ランダム数値 2)^2 - 2( ランダム数値 2 * ランダム数値 3) + A ランダム数値 : アニメーション開始時に生成 value: ValueAnimator で取得できる値 A: View の中心までの座標
  39. 39. 出来上がり
  40. 40. ValueAnimator を複数使った例
  41. 41. ・全てコード内で完結する ・描画の相対座標指定やランダム要素の付加等が楽 ・アニメーション対象が増えても追加しやすい ・複雑になった場合の可読性が xml より高そう
  42. 42. まとめ ・画像リソースがあるならそれに越したことはない ・ Android Icon Animator は便利 ・ ValueAnimator + CustomView で何とでもなる
  43. 43. 素敵な Android アニメーションライフを お過ごしください

×