LoginSignup
36
30

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

@kafumi(Takafumi Kanda)

AndroidのアニメーションAPIまとめ 2018

Last updated at Posted at 2018-12-30

Android Dev Summit 2018のセッション Get Animated が、AndroidのアニメーションAPIのまとめとして素晴らしかったのですが、Googleのセッションの常として、YouTube動画はあるけれどスライド資料がなかったので、メモがてら要点をまとめました。

アニメーションAPI一覧

API名 APIレベル
View Animations 1+
Value Animator 11+
Object Animator 11+
View Property Animator 12+
Animated Vector Drawable 21+ (AndroidXライブラリにより14+で利用可能1)
Physics (AndroidX) 14+2
Transitions 19+ (AndroidXライブラリにより14+で利用可能)
Motion Layout (AndroidX) 18+

どのAPIを使うべきかの判断フロー

  1. 複数のViewが関係する複雑なアニメーション、かつ、ユーザー操作に応じたアニメーション
    → Motion Layout
  2. 途中で中断する可能性がある、かつ、ユーザー操作に応じたアニメーション
    → Physics
  3. Activity/Fragment遷移時のShared elementなど、ウィンドウ内容のアニメーション
    → Transitions
  4. ベクター画像のアニメーション
    → Animated Vector Drawable
  5. ウィンドウ全体のアニメーション
    → View Animations
  6. Viewプロパティのアニメーション
    → View Property Animator
  7. Viewプロパティ以外のカスタムアニメーション3
    → Value Animator
  8. 汎用的なプロパティアニメーション
    → Object Animator

View Animations

  • android.view.animation

  • ViewのDrawパスで実行されるので、必ずViewのサイズが計測済みの状況で実行される、という特徴がある

    • そのため、10% などの相対サイズ表現が使える

  • リソースXMLは res/anim フォルダに配置する

    <set xmlns:android="http://schemas.android.com/apk/res/android"
     android:shareInterpolator="false">
    <translate
        android:fromYDelta="0"
        android:toYDelta="-2%"
        android:interpolator="@interpolator/fast_out_slow_in"
        android:duration="425"/>
    <alpha
        android:fromAlpha="1.0"
        android:toAlpha="0.9"
        android:interpolator="@interpolator/linear"
        android:duration="117"/>
</set>

  • 以下のケースで必要になるが、それ以外では使う必要はない

    • Windowアニメーション
    • Fragmentアニメーション (サイズの計測後に開始する必要があるアニメーションだけ)

Animator

Value Animator

  • ValueAnimator

  • オブジェクトのプロパティではない、独立した値を変化させて、アニメーションを実装するときに使う

  • 変化前後の値や、アニメーション時間など、リソースXMLでは animator タグで定義できる

    <animator xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="1000"
    android:valueFrom="1"
    android:valueTo="0"
    android:valueType="floatType"
    android:repeatCount="1"
    android:repeatMode="reverse"/>

  • コードでは、次のように定義・実行できる

    ValueAnimator.ofInt(0, 4).apply {
    repeatCount = 10
    duration = 1000
    addUpdateListener { valueAnimator ->
        val value = valueAnimator.animatedValue as Int
        // ...
    }
}

Object Animator

  • ObjectAnimator

  • Viewに限らず、何らかのオブジェクトのプロパティ変化で表現できるアニメーションの実装に使う

  • 変化前後のプロパティ値や、プロパティの名前、アニメーション時間など、リソースXMLでは objectAnimator タグで定義できる

    <objectAnimator xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="1000"
    android:valueTo="200"
    android:valueType="floatType"
    android:propertyName="y"
    android:repeatCount="1"
    android:repeatMode="reverse"/>

  • コードでは、次のように定義・実行できる

    ObjectAnimator.ofFloat(view, View.ALPHA, 1f, 0f).apply {
    duration = 100
}.start()

  • PropertyValuesHolder (APIレベル23+) を使うと、複数のプロパティを同時にアニメーションできる

    val scaleX = PropertyValuesHolder.ofFloat(View.SCALE_X, 0.5f, 1f)
val scaleY = PropertyValuesHolder.ofFloat(View.SCALE_Y, 0.5f, 1f)
val alpha = PropertyValuesHolder.ofFloat(View.ALPHA, 0f, 1f)

ObjectAnimator.ofPropertyValuesHolder(view, scaleX, scaleY, alpha).apply {
    duration = 100
}.start()

  • AnimatorSet を使うと、複数の Animator を協調して実行できる

View Property Animator

  • ViewPropertyAnimator

  • View.animate() で ViewPropertyAnimator のインスタンスを取得し、実行する

    view.animate()
    .scaleX(1f).scaleY(1f).alpha(1f)
    .setInterpolator(OvershootInterpolator())
    .start()

  • 単一のViewに対して、シングルショットのアニメーションを実行する場合に向いている

Animated Vector Drawable

  • AnimatedVectorDrawable (AndroidX: AnimatedVectorDrawableCompat)
  • Vector DrawableとAnimatorをセットにしたもの。Vector Drawableのプロパティを、Animatorでアニメーションさせている
  • Android 7.0 (APIレベル25) 以降では、アニメーションがUIスレッドでなくRenderスレッドで実行されるので、アニメーションのジャンクが起こりづらくなっている

Physics

Transitions

  • android.transition (AndroidX: androidx.transition)

  • Viewレイアウトの変化をアニメーションさせるためのAPI

  • Transitionの内容は、コードや、res/transition に配置するXMLで定義できる

    <transitionSet xmlns:android="http://schemas.android.com/apk/res/android"
    android:transitionOrdering="sequential">
    <fade android:fadingMode="fade_out" />
    <changeBounds />
    <fade android:fadingMode="fade_in" />
</transitionSet>

  • Activity/Fragment遷移時に、ウィンドウの内容をアニメーションするときにも利用する

    0_72H_VxsWtTQV17Su.gif

    (Restitching Plaid – Nick Butcher – Medium より)

Motion Layout

  1. 古いバージョンのサポートライブラリを使えば、APIレベル7+に遡ってサポート可能です ↩

  2. サポートしているバージョンに関する記述が見つからなかったので、全AndroidXライブラリの最低サポートバージョンであるAPIレベル14+が適用されると判断しました ↩

  3. セッションではこの順序で紹介されていたのですが、7 (Value Animator) と8 (Object Animator) の順序が逆なのでは、と思います。つまり、まずObject Animatorが使えないか検討して、使えないケースでValue Animatorを使うことになるのかな、と ↩

36
30
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
36
30

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?