Compose 中 自定义动画

在 Jetpack Compose 中，自定义动画允许你以更灵活的方式实现各种动画效果，包括组合动画、路径动画、自定义插值器等。自定义动画通常使用 Animatable 对象来管理动画值，并通过调用 animateTo、snapTo 等方法来控制动画的播放过程。

示例代码

以下是一个简单的自定义动画示例，演示了如何在 Compose 中创建一个简单的缩放动画效果：

import androidx.compose.animation.core.*
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.*
import androidx.compose.material3.*
import androidx.compose.runtime.*
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp

@Composable
fun CustomAnimationExample() {
    var scale by remember { mutableStateOf(1f) }

    val animatableScale = remember { Animatable(1f) }

    LaunchedEffect(Unit) {
        animatableScale.animateTo(
            targetValue = 2f,
            animationSpec = tween(durationMillis = 1000)
        )
    }

    Box(
        modifier = Modifier
            .size(100.dp)
            .background(Color.Blue)
            .scale(animatableScale.value)
    )
}

@Preview
@Composable
fun CustomAnimationExamplePreview() {
    CustomAnimationExample()
}

在上述示例中，我们使用 Animatable 对象来创建一个可变的动画值 animatableScale，并在 LaunchedEffect 中使用 animateTo 方法来实现缩放动画效果。当组合函数被调用时，动画会自动开始，并在一秒钟内完成缩放。

解释

1. Animatable 对象：

   • 使用 Animatable 对象来创建一个可变的动画值，可以是浮点数、颜色、偏移量等。
   • 在示例中，我们使用 Animatable(1f) 来创建一个可变的浮点数值，表示缩放比例。

2. LaunchedEffect：

   • 使用 LaunchedEffect 来启动一个协程，以便在组合函数被调用时执行动画。
   • 在示例中，我们在 LaunchedEffect 中调用 animateTo 方法来实现缩放动画效果。

3. 动画播放过程：

   • 调用 animateTo 方法可以控制动画的播放过程，包括动画的目标值、持续时间、插值器等。

通过自定义动画，你可以实现各种各样的动画效果，从简单的缩放、平移到复杂的路径动画、组合动画等，使得你的应用程序界面更加生动和有趣。