Edited at

【Android】Physics-based Animations (Google I/O '17)

More than 1 year has passed since last update.

Google I/O 2017 の Android Animations Spring to Life で発表された Physics-based Animations (物理ベースアニメーション) についてのまとめです。(LT用資料も兼ねてます)



Physics-based Animations


Physics-based Animationsとは

物理法則に基づいたアニメーションのこと。

(例)Spring Animation

low_stiffness.gif



利点


  • 自然な見た目


    • 物理ベースで理解しやすく全体的に滑らかになる



  • コース修正


    • アニメーションのターゲットが変更されたときに勢いを維持しつつ滑らかに停止できる



  • 視覚的違和感の軽減


    • リアルタイムに滑らかに動作することで全体的な違和感を軽減できる





非物理ベースアニメーションと物理ベースアニメーションの違い

非物理ベース
物理ベース

targetchange_oa.gif
targetchange_pba.gif

ObjectAnimatorを使ったアニメーション
physics-based APIを使ったアニメーション

非物理ベースアニメーション( Animator を利用したアニメーション)は、ターゲットが変更されたらアニメーションを停止しターゲット変更時点の位置を開始点として新しいターゲットに対してアニメーションを開始する。

物理ベースアニメーションは、ターゲットを変更すると新しい方向へ動こうとする加速度は元々の速度に影響されて新しいターゲットに連続的に移動する。


非物理ベースアニメーションの速度グラフ

oa_chart.png


物理ベースアニメーションの速度グラフ

pba_chart.png



使い方

build.gradleに以下を追記。(I/O発表時はbeta1でしたが、2017/06/18時点ではbeta2)

dependencies {

compile "com.android.support:support-dynamic-animation:26.0.0-beta2"
}

API level 16 (Jelly Bean 4.1.x系)までサポートしている。



関連クラス

クラス
説明

android.support.animation
Viewをアニメーションするための主要なAPI。物理ベースのアニメーションを作成・管理するためのクラスが含まれる。

DynamicAnimation
物理ベースのアニメーションパッケージのベースクラス。すべてのアニメーションのアニメーションライフサイクルと共通の設定を管理。

SpringAnimationhttps
DynamicAnimationクラスのサブクラス。スプリングアニメーションを作成。

SpringForce
アニメーションで使用される減衰比や剛性などのスプリングのプロパティを定義するクラス。

FlingAnimation
DynamicAnimationクラスのサブクラス。最初の運動量を持ち徐々に減速するフライングアニメーションを作成。



Spring Animation


Spring Animationとは

各フレームに適用されるバネの力に基づいて値と速度が計算されるアニメーション。

バネの力は減衰と剛性の特性がある。

(例)手を離したときのスプリングアニメーション

spring-release.gif



基本的な使い方

SpringAnimationオブジェクト作成してstart()実行。

final View img = findViewById(R.id.imageView);

// Setting up a spring animation to animate the view’s translationY property with the final spring position at 0.
final SpringAnimation anim = new SpringAnimation(img, DynamicAnimation.TRANSLATION_Y, 0);

// Starting the animation
anim.start();



減衰率設定(バウンス設定)

//Setting the damping ratio to create a low bouncing effect.

anim.getSpring().setDampingRatio(DAMPING_RATIO_LOW_BOUNCY);

High bounce
Medium bounce
Low bounce
No bounce

high_bounce.gif
medium_bounce.gif
low_bounce.gif
no_bounce.gif



剛性設定

//Setting the spring with a low stiffness.

anim.getSpring().setStiffness(STIFFNESS_LOW);

High stiffness
Medium stiffness
Low stiffness
Very low stiffness

high_stiffness.gif
medium_stiffness.gif
low_stiffness (1).gif
very_low_stiffness.gif



Chained Spring Animation

SpringAnimationを組み合わせて使うことで複数のViewを鎖のようにアニメーションさせることもできる。

spring_chain.gif



Fling Animation

オブジェクトの速度に比例する摩擦力を使ったアニメーション。

fling-animation.gif

FlingAnimation fling = new FlingAnimation(view, DynamicAnimation.SCROLL_X);



参考

Android Animations Spring to Life (Google I/O '17) - YouTube

https://www.youtube.com/watch?v=BNcODK-Ju0g

Animator | Android Developers

https://developer.android.com/reference/android/animation/Animator.html

ObjectAnimator | Android Developers

https://developer.android.com/reference/android/animation/ObjectAnimator.html

android.support.animation | Android Developers

https://developer.android.com/reference/android/support/animation/package-summary.html

DynamicAnimation | Android Developers

https://developer.android.com/reference/android/support/animation/DynamicAnimation.html

SpringAnimation | Android Developers

https://developer.android.com/reference/android/support/animation/SpringAnimation.html

SpringForce | Android Developers

https://developer.android.com/reference/android/support/animation/SpringForce.html

FlingAnimation | Android Developers

https://developer.android.com/reference/android/support/animation/FlingAnimation.html

Physics-based Animations | Android Developers

https://developer.android.com/topic/libraries/support-library/preview/physics-based-animation.html