shibuya.apk #14 Pre-Google I/O 2017 https://shibuya-apk.connpass.com/event/55506/ でLTした Physics-based Animation についてです。

1. Spring to Life
shibuya.apk #14 Pre-Google I/O 2017
2017.5.9
株式会社LIFULL 寒川 明好

2. © LIFULL Co.,Ltd. 本書の無断転載、複製を固く禁じます。2
自己紹介
• 寒川 明好
– @SamrilRio
• 株式会社LIFULL
– LIFULL HOME’S
– Android開発グループ
• Engineering Manager
– 最近オフィスが品川 → 半蔵門
• shibuya.apk 初参加！

3. © LIFULL Co.,Ltd. 本書の無断転載、複製を固く禁じます。3
おかげさまでベストアプリ

4. © LIFULL Co.,Ltd. 本書の無断転載、複製を固く禁じます。4
Google I/O 2017
May 17-19, 2017
Shoreline Amphitheatre Mountain View, California

5. © LIFULL Co.,Ltd. 本書の無断転載、複製を固く禁じます。5
アニメーション
Androidのアニメーションには種類がある
• Property Animation
• View Animation
• Drawable Animation
• Physics-based Animation 【NEW】

6. © LIFULL Co.,Ltd. 本書の無断転載、複製を固く禁じます。6
Physics-based Animation
• Support Library 25.3.0 （2017/3）で追加
• dynamic-animation
– 物理ベースのアニメーションライブラリ

7. © LIFULL Co.,Ltd. 本書の無断転載、複製を固く禁じます。7
関連するクラス
• android.support.animation
– Viewをアニメーション化するAPI
– アニメーションの作成、管理するクラスが含まれている
• DynamicAnimation
– physics-based animationの基本クラス
– アニメーションライフサイクルの設定
• SpringAnimation
– Springアニメーションを作成するクラス
– DynamicAnimationのサブクラス
• SpringForce
– アニメーションで定義するDamping ratio と Stiffnessのプロ
パティを定義

8. © LIFULL Co.,Ltd. 本書の無断転載、複製を固く禁じます。8
Spring Animationの作り方 #1
1. Spring Animationを作成
SpringAnimation Class
@param view Spring Animation化させるView
@param property DynamicAnimation.ViewProperty
@param finalPosition バネの最終位置

9. © LIFULL Co.,Ltd. 本書の無断転載、複製を固く禁じます。9
DynamicAnimation.ViewProperty
Viewに対してのアニメーションを設定
• SpringAnimation.ALPHA
• SpringAnimation.TRANSLATION_X
• SpringAnimation.TRANSLATION_Y
：

10. © LIFULL Co.,Ltd. 本書の無断転載、複製を固く禁じます。10
Spring Animationの作り方 #2
2. Animationを start()
今回は View がクリックされたときにアニメーションを start()
setStartValue(float) でアニメーションの開始位置を設定

11. © LIFULL Co.,Ltd. 本書の無断転載、複製を固く禁じます。11
（Optional）リスナー
• OnAnimationUpdateListener
アニメーションのフレームごとに呼ばれるため、
必要な場合にのみ登録する
• OnAnimationEndListener
アニメーションの終了を通知
アニメーションが終了するかキャンセルされる
たびに呼ばれる
• リスナーの削除には
– removeUpdateListener()
– removeEndListener()
を使う

12. © LIFULL Co.,Ltd. 本書の無断転載、複製を固く禁じます。12
（Optional）Set spring properties: Damping ratio
• 減衰比 ≒ バネのびよよーん
４つのプロパティ
– DAMPING_RATIO_HIGH_BOUNCY
– DAMPING_RATIO_MEDIUM_BOUNCY （default）
– DAMPING_RATIO_LOW_BOUNCY
– DAMPING_RATIO_NO_BOUNCY
バネのバウンドが少ない

13. © LIFULL Co.,Ltd. 本書の無断転載、複製を固く禁じます。13
（Optional）Set spring properties: Stiffness
• 堅さ、こわばり感 ≒ バネのバチンっ
４つのプロパティ
– STIFFNESS_HIGH
– STIFFNESS_MEDIUM （default）
– STIFFNESS_LOW
– STIFFNESS_VERY_LOW
バネの堅さがない

14. © LIFULL Co.,Ltd. 本書の無断転載、複製を固く禁じます。14
まとめ
単純にアニメーションと言っても、ユーザにとっ
て違和感のないアニメーションが理想
Physics-based Animation
を活用しよう

15. © LIFULL Co.,Ltd. 本書の無断転載、複製を固く禁じます。15
おわり