Android Compose中如何使用Cubic Bezier实现动画及触控效果？

手动实现按钮按压动画（基于Cubic Bezier缓动） #

在Compose中，你可以通过CubicBezierEasing定义自定义缓动曲线，结合状态驱动的动画API实现触控反馈效果，比如按钮按压时的缩放、位移。

核心步骤： #

1. 检测触控状态：用pointerInput监听按钮的按压/释放事件，维护按压状态。
2. 定义Cubic Bezier缓动：创建CubicBezierEasing实例，传入四个控制点（x1,y1,x2,y2），对应贝塞尔曲线的两个锚点。
3. 绑定动画到状态：用animateFloatAsState将触控状态映射为动画属性（如缩放比例），并指定自定义缓动。

代码示例：按钮按压缩放效果 #

@Composable
fun BezierPressButton(
    text: String,
    onClick: () -> Unit
) {
    val isPressed = remember { mutableStateOf(false) }
    // Material Design标准按压缓动曲线：Cubic Bezier(0.4, 0.0, 0.2, 1)
    val pressEasing = CubicBezierEasing(0.4f, 0.0f, 0.2f, 1.0f)
    
    // 根据按压状态驱动缩放动画
    val scale by animateFloatAsState(
        targetValue = if (isPressed.value) 0.95f else 1.0f,
        animationSpec = tween(
            durationMillis = 200,
            easing = pressEasing
        ),
        label = "Button press scale animation"
    )

    Button(
        onClick = onClick,
        modifier = Modifier
            .scale(scale)
            .pointerInput(Unit) {
                detectTapGestures(
                    onPress = {
                        isPressed.value = true
                        // 等待用户释放触控
                        tryAwaitRelease()
                        isPressed.value = false
                    }
                )
            }
    ) {
        Text(text)
    }
}

扩展效果： #

你可以用同样的方式实现其他触控反馈，比如按压时的Y轴位移、阴影透明度变化：

// 按压时向下偏移2dp
val offsetY by animateDpAsState(
    targetValue = if (isPressed.value) 2.dp else 0.dp,
    animationSpec = tween(durationMillis = 200, easing = pressEasing)
)
// 应用到Modifier：.offset(y = offsetY)

稳定库推荐 #

如果不想手动实现，以下是几个维护稳定、兼容性好的Compose动画库：

• Material Components for Compose：官方核心库，内置了符合Material Design规范的Cubic Bezier缓动（如FastOutSlowInEasing就是标准的按压缓动），无需额外引入，直接使用即可，完全适配Compose版本。
• Accompanist：Google官方维护的Compose扩展库，其Animation模块提供了更多动画工具类，可快速实现复杂的触控反馈，版本更新同步Compose节奏，稳定性有保障。
• Lottie Compose：适合需要复杂路径动画的场景，支持导入AE制作的包含Cubic Bezier曲线的动画文件，官方维护，兼容性强，可实现高精度的触控交互效果。

内容的提问来源于stack exchange，提问作者MaryG