Android Tween Animation

Tween Animation?

「中間アニメーション」はAndroidが提供するアニメーションの実現方法の一つです.

xmlを使用して、リソースディレクトリのanimでアニメーションを定義できます.
Alpha、scale、rotate、translate、setをルート要素として使用できます.各ルート要素を理解し、使用します.

Alpha(透明度)

<?xml version="1.0" encoding="utf-8"?>
<alpha xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromAlpha="0"
    android:toAlpha="1"
    android:duration="1000"/>

fromAlpha:開始α値(0-1)

toAlpha:終了α値(0-1)

duration:アニメーション実行時間

透明な状態でスタートし、1秒で徐々にクリア(?)サンセットアニメーション.

scale(サイズ)

<?xml version="1.0" encoding="utf-8"?>
<scale xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromXScale="100%"
    android:fromYScale="100%"
    android:toXScale="200%"
    android:toYScale="200%"
    android:pivotY="50%"
    android:pivotX="50%"
    android:duration="1000"/>

fromXScale:スタート幅

fromYScale:スタート高さ

to XScale:終了幅

to YScale:終端高さ

pivotX:動画運転時、基準座標のX値

pivoty:動画運転時、基準座標のY値

duration:アニメーション実行時間

オリジナルのサイズ(100%)から2倍のサイズのアニメーションに拡大します.

translate(移動)

<?xml version="1.0" encoding="utf-8"?>
<translate xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromXDelta="0"
    android:fromYDelta="0"
    android:toXDelta="100%"
    android:toYDelta="100%"
    android:duration="1000"/>

fromXDelta:ホームポジションX値(0=ホームポジション)

fromYDelta:ホームポジションY値(0=ホームポジション)

to XDelta:終了位置X値

toYDelta:終了位置Y値

duration:アニメーション実行時間

元の位置から右下に移動するアニメーション.
ただし、クリックイベントは既存の場所でのみ有効です.アニメーションに移動してもビューの絶対位置は変更されません.

回転(回転)

<?xml version="1.0" encoding="utf-8"?>
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromDegrees="0"
    android:toDegrees="180"
    android:pivotX="50%"
    android:pivotY="50%"
    android:duration="1000"/>

fromDegrees:スタートアングル

to Degrees:終了角度

pivotX:動画運転時、基準座標のX値

pivoty:動画運転時、基準座標のY値

duration:アニメーション実行時間

180度回転するアニメーション.
pivotを使用すると、アニメーションは指定した座標の周りで実行され、アニメーションが50,50に設定されている場合、現在の位置で回転します.他の座標を指定すると、その座標に対してビューの指定角度が回転します.

set

setを使用すると、上記のすべての要素が使用できます.

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" android:fillAfter="true">
    <alpha
        android:startOffset="200"
        android:fromAlpha="0"
        android:toAlpha="1"
        android:duration="1000" />
    <scale
        android:startOffset="1200"
        android:fromXScale="100%"
        android:fromYScale="100%"
        android:toXScale="200%"
        android:toYScale="200%"
        android:pivotY="50%"
        android:pivotX="50%"
        android:duration="1000"/>
    <translate
        android:startOffset="2200"
        android:fromXDelta="0"
        android:fromYDelta="0"
        android:toXDelta="100%"
        android:toYDelta="0%"
        android:duration="1000"/>
    <rotate
        android:startOffset="3200"
        android:fromDegrees="0"
        android:toDegrees="360"
        android:pivotX="150%"
        android:pivotY="50%"
        android:duration="1000"/>
</set>

startOffset:要素ごとの開始時間

fillAfter:アニメーションが終了しているか

最初のalphaアニメーションは0.2秒から1秒間実行され、scaleアニメーションは1.2秒(終了時間)から1秒間実行され、順序定義されたアニメーションが実行されます.
FillAfterでは、アニメーションが終了したときに状態を維持するかどうかを指定できます.
defaultはfalseであり、ビューの位置は閉じたままです.
したがって、クリックイベントは元のビューの場所でのみ機能します.

アニメーションの適用

アニメーションが定義されている以上、アニメーションの適用を始めましょう.

val animation = AnimationUtils.loadAnimation( this, R.anim.ani_scale ).apply { 
	fillAfter = true 
}

AnimationUtilsのloadAnimation(…)アニメーションオブジェクトを作成します.

view.startAnimation( alphaAnimation )

アニメーションを適用するビューでstartAnimationを使用して定義したアニメーションを実行できます.

アニメーションリスナー

アニメーションの開始または終了時にアクションを実行する場合は、アニメーションオブジェクトにリスナーを追加できます.

private val alphaAnimationListener = object : Animation.AnimationListener {
        override fun onAnimationStart(animation: Animation?) {
        }

        override fun onAnimationEnd(animation: Animation?) {
            image.startAnimation( scaleAnimation )
        }

        override fun onAnimationRepeat(animation: Animation?) {
        }

    }

アニメーションリスナーを作成します.
アニメーションが終わったらすぐにscaleAnimationを実行します

alphaAnimation.setAnimationListener(alphaAnimationListener)

アニメーションオブジェクトにリスナーを登録し、アニメーションを実行して、アニメーションが終了したときに必要な操作を実行するようにします.

繰り返し(繰り返し)

android:repeatMode="reverse"
android:repeatCount="infinite"

アニメーションを定義する場合は、repeatModeとrepeatCountを指定できます.

repeatMode:restart(先頭から)、reverse(逆繰返し)

repeatCount:繰り返し回数

interpolator

また、補間器を指定することもできます.
補間はアニメーション速度のオプションです.

linear_interpolator : とうそくど (一定速度で行う)
accelerate_interpolator : スピードを上げる (遅くて速い)
anticipate_interpolator : 期待する. (最初は少し引き締めてから)
bounce_interpolator : 弾ける (最後はちょっとぽっちゃり)
cycle_interpolator : ループ (終了後に再生を反転)
decelerate_interpolator : げんそく (速くて遅い)
overshoot_interpolator : を過ぎて (もうしばらく行ってから戻る)
適用方法(xml)

android:interpolator="@android:interpolator/accelerate_decelerate"

適用方法(コード)

private val scaleAnimation by lazy { 
	AnimationUtils.loadAnimation( this, R.anim.ani_scale ).apply { 
		 interpolator = AccelerateDecelerateInterpolator()
	 } 
}