アニメーションをカスタマイズする

アニメーション API の多くは、動作をカスタマイズするためのパラメータを受け入れます。

AnimationSpec パラメータでアニメーションをカスタマイズする

ほとんどのアニメーション API では、オプションの AnimationSpec パラメータでアニメーションの仕様をカスタマイズできます。

val alpha: Float by animateFloatAsState(
    targetValue = if (enabled) 1f else 0.5f,
    // Configure the animation duration and easing.
    animationSpec = tween(durationMillis = 300, easing = FastOutSlowInEasing),
    label = "alpha"
)
AnimationSnippets.kt

各種アニメーションの作成に対応した、さまざまなタイプの AnimationSpec があります。

spring で物理学ベースのアニメーションを作成する

spring は、開始値と終了値の間で物理学ベースのアニメーションを作成します。dampingRatio と stiffness の 2 つのパラメータを受け取ります。

dampingRatio は、ばねの弾性を定義します。デフォルト値は Spring.DampingRatioNoBouncy です。

stiffness は、終了値までのばねの移動速度を定義します。デフォルト値は Spring.StiffnessMedium です。

val value by animateFloatAsState(
    targetValue = 1f,
    animationSpec = spring(
        dampingRatio = Spring.DampingRatioHighBouncy,
        stiffness = Spring.StiffnessMedium
    ),
    label = "spring spec"
)
AnimationSnippets.kt

spring 継続時間ベースの AnimationSpec 型と比べて、spring は中断をより適切に処理できます。これは、spring の場合、アニメーション中にターゲット値が変更されたときに速度の継続性が保証されるためです。spring は、animate*AsState や updateTransition など、多くのアニメーション API によってデフォルトの AnimationSpec として使用されます。

たとえば、ユーザーのタッチによって駆動される次のアニメーションに spring 構成を適用し、アニメーションの進行中に中断すると、tween を使用した場合よりも spring を使用した場合の方がスムーズに応答することがわかります。

tween を使用してイージング カーブで開始値と終了値の間をアニメーション化する

tween は、イージング カーブを使用して、指定された durationMillis の開始値と終了値の間をアニメーション化します。tween は、2 つの値の間を移動する（between）ことから、between の短縮形です。

delayMillis を指定して、アニメーションの開始を遅らせることもできます。

val value by animateFloatAsState(
    targetValue = 1f,
    animationSpec = tween(
        durationMillis = 300,
        delayMillis = 50,
        easing = LinearOutSlowInEasing
    ),
    label = "tween delay"
)
AnimationSnippets.kt

詳細については、イージングをご覧ください。

keyframes を使用して特定のタイミングで特定の値にアニメーション化する

keyframes は、アニメーションの持続時間内の異なるタイムスタンプで指定されたスナップショット値に基づいてアニメーション化します。アニメーション値は、常に 2 つのキーフレーム値の間で補間されます。これらのキーフレームごとに、イージングを指定して補間曲線を設定できます。

0 ms と持続時間の値の指定はオプションです。これらの値を指定しない場合は、デフォルトでアニメーションの開始値と終了値が設定されます。

val value by animateFloatAsState(
    targetValue = 1f,
    animationSpec = keyframes {
        durationMillis = 375
        0.0f at 0 using LinearOutSlowInEasing // for 0-15 ms
        0.2f at 15 using FastOutLinearInEasing // for 15-75 ms
        0.4f at 75 // ms
        0.4f at 225 // ms
    },
    label = "keyframe"
)
AnimationSnippets.kt

keyframesWithSplines を使用してキーフレーム間をスムーズにアニメーション化する

値の遷移時にスムーズな曲線に沿ってアニメーションを作成するには、keyframes アニメーション 仕様の代わりに keyframesWithSplines を使用します。

val offset by animateOffsetAsState(
    targetValue = Offset(300f, 300f),
    animationSpec = keyframesWithSpline {
        durationMillis = 6000
        Offset(0f, 0f) at 0
        Offset(150f, 200f) atFraction 0.5f
        Offset(0f, 100f) atFraction 0.7f
    }
)
AnimationSnippets.kt

スプラインベースのキーフレームは、画面上のアイテムの 2D 移動に特に便利です。

次の動画は、円がたどるべき x 座標と y 座標の同じセットを指定した場合の keyframes と keyframesWithSpline の違いを示しています。

ご覧のとおり、スプラインベースのキーフレームは、ベジェ曲線を使用してアイテム間をスムーズにアニメーション化するため、ポイント間の遷移がスムーズになります。この仕様は、プリセット アニメーションに便利です。ただし、ユーザー主導のポイントを使用する場合は、中断可能なため、スプリングを使用してポイント間のスムーズさを実現することをおすすめします。

repeatable を使用してアニメーションを繰り返す

repeatable は、指定された繰り返し回数に達するまで、持続時間ベースのアニメーション（tween や keyframes など）を繰り返します。repeatMode パラメータを渡すと、アニメーションを繰り返す際に、最初から（RepeatMode.Restart）開始するか、最後から（RepeatMode.Reverse）開始するかを指定できます。

val value by animateFloatAsState(
    targetValue = 1f,
    animationSpec = repeatable(
        iterations = 3,
        animation = tween(durationMillis = 300),
        repeatMode = RepeatMode.Reverse
    ),
    label = "repeatable spec"
)
AnimationSnippets.kt

infiniteRepeatable を使用してアニメーションを無限に繰り返す

infiniteRepeatable は repeatable に似ていますが、繰り返し回数が無限である点が異なります。

val value by animateFloatAsState(
    targetValue = 1f,
    animationSpec = infiniteRepeatable(
        animation = tween(durationMillis = 300),
        repeatMode = RepeatMode.Reverse
    ),
    label = "infinite repeatable"
)
AnimationSnippets.kt

ComposeTestRule を使用したテストでは、infiniteRepeatable を使用したアニメーションは実行されません。各アニメーション値の初期値を使用してコンポーネントがレンダリングされます。

snap を使用して終了値に自動整列する

snap は、値をすぐに終了値に切り替える特別な AnimationSpec です。delayMillis を指定して、アニメーションの開始を遅らせることができます。

val value by animateFloatAsState(
    targetValue = 1f,
    animationSpec = snap(delayMillis = 50),
    label = "snap spec"
)
AnimationSnippets.kt

カスタム イージング関数を設定する

持続時間ベースの AnimationSpec オペレーション（tween、keyframes など）では、Easing を使用してアニメーションの割合を調整します。これにより、アニメーション化する値の速度を変えながら動かすことができます。割合は、0（開始）から 1.0（終了）までの値で、アニメーションの現在の位置を示します。

Easing とは、実際には 0～1.0 の小数値を受け取り、浮動小数点数を返す関数です。戻り値は、オーバーシュートまたはアンダーシュートを表すために境界外となる場合もあります。カスタム Easing は、次のようなコードで作成できます。

val CustomEasing = Easing { fraction -> fraction * fraction }

@Composable
fun EasingUsage() {
    val value by animateFloatAsState(
        targetValue = 1f,
        animationSpec = tween(
            durationMillis = 300,
            easing = CustomEasing
        ),
        label = "custom easing"
    )
    // ……
}
AnimationSnippets.kt

Compose には、ほとんどのユースケースに対応できる組み込みの Easing 関数がいくつか用意されています。 シナリオに応じた Easing の使用については、速度 - マテリアル デザインで詳細 をご覧ください。

• FastOutSlowInEasing
• LinearOutSlowInEasing
• FastOutLinearEasing
• LinearEasing
• CubicBezierEasing
• もっと見る

AnimationVector との間で変換してカスタムデータ型をアニメーション化する

ほとんどの Compose アニメーション API は、デフォルトでアニメーション値として Float、Color、Dp などの基本的なデータ型をサポートしています。ただし、カスタムのデータ型など、他のデータ型のアニメーション化が必要な場合もあります。アニメーション中、アニメーション化する値は AnimationVector として表されます。値は、対応する TwoWayConverter によって AnimationVector に変換されます（逆も同様です）。これにより、コア アニメーション システムが値を均一に処理できるようになります。たとえば、Int は、単一の浮動小数点値を保持する AnimationVector1D として表されます。Int の TwoWayConverter は次のようになります。

val IntToVector: TwoWayConverter<Int, AnimationVector1D> =
    TwoWayConverter({ AnimationVector1D(it.toFloat()) }, { it.value.toInt() })
AnimationSnippets.kt

Color は基本的に 4 つの値（赤、緑、青、アルファ）のセットであるため、Color は 4 つの浮動小数点値を保持する AnimationVector4D に変換されます。このように、アニメーションで使用されるデータ型はすべて、次元数に応じて AnimationVector1D、AnimationVector2D、AnimationVector3D、AnimationVector4D のいずれかに変換されます。これにより、オブジェクトの異なるコンポーネントを別々にアニメーション化し、それぞれの速度をトラッキングすることができます。基本的なデータ型の組み込みコンバータには、Color.VectorConverter や Dp.VectorConverter などのコンバータを使用してアクセスできます。

新しいデータ型のサポートをアニメーション化する値として追加する場合は、独自の TwoWayConverter を作成して API に指定できます。たとえば、次のように animateValueAsState を使用してカスタムのデータ型をアニメーション化できます。

data class MySize(val width: Dp, val height: Dp)

@Composable
fun MyAnimation(targetSize: MySize) {
    val animSize: MySize by animateValueAsState(
        targetSize,
        TwoWayConverter(
            convertToVector = { size: MySize ->
                // Extract a float value from each of the `Dp` fields.
                AnimationVector2D(size.width.value, size.height.value)
            },
            convertFromVector = { vector: AnimationVector2D ->
                MySize(vector.v1.dp, vector.v2.dp)
            }
        ),
        label = "size"
    )
}
AnimationSnippets.kt

次のリストに、組み込みの VectorConverter をいくつか示します。

• Color.VectorConverter
• Dp.VectorConverter
• Offset.VectorConverter
• Int.VectorConverter
• Float.VectorConverter
• IntSize.VectorConverter