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

アニメーション 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

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

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

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

tween は、イージング カーブを使用して、指定された durationMillis の開始値と終了値の間をアニメーション化します。tween は、2 つの値の間にあることを示す 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