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

  • 25
    いいね
  • 0
    コメント

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