如何手动实现滑动解锁按钮的背景颜色动画过渡？

你要的是用户滑动驱动的进度型颜色过渡，TargetBasedAnimation其实是为时间轴动画设计的，用在这里反而绕弯了。直接用Color.lerp()根据滑动进度实时计算颜色是最直接的方案，以下是完整实现：

核心实现思路 #

滑动解锁的进度是用户交互产生的0f-1f数值，属于输入驱动的状态变化，不需要依赖时间动画API。通过Color.lerp(startColor, endColor, progress)可以直接根据当前进度算出中间过渡色，实时响应滑动操作。

完整代码示例 #

import androidx.compose.foundation.background
import androidx.compose.foundation.draggable
import androidx.compose.foundation.gestures.Orientation
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.offset
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.default.Lock
import androidx.compose.material3.Icon
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
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 SlideToUnlockButton(
    startBgColor: Color = Color.Gray,
    endBgColor: Color = Color.Green,
    onUnlockSuccess: () -> Unit
) {
    // 记录按钮宽度，用于将滑动偏移量转换为0-1的进度
    val buttonWidth = remember { mutableStateOf(0) }
    // 滑动的横向偏移量
    val slideOffset = remember { mutableStateOf(0f) }
    // 计算当前滑动进度，限制在0f-1f之间
    val slideProgress = remember(slideOffset.value, buttonWidth.value) {
        if (buttonWidth.value == 0) 0f else (slideOffset.value / buttonWidth.value).coerceIn(0f, 1f)
    }
    // 根据进度实时计算背景色
    val currentBgColor = Color.lerp(startBgColor, endBgColor, slideProgress)

    Box(
        modifier = Modifier
            .fillMaxWidth()
            .height(60.dp)
            .background(currentBgColor, RoundedCornerShape(30.dp))
            // 获取按钮实际宽度
            .onSizeChanged { buttonWidth.value = it.width }
            .draggable(
                state = rememberDraggableState { delta ->
                    // 更新滑动偏移量，限制在按钮宽度范围内
                    slideOffset.value = (slideOffset.value + delta).coerceIn(0f, buttonWidth.value.toFloat())
                    // 进度达到100%时触发解锁回调
                    if (slideProgress >= 1f) {
                        onUnlockSuccess()
                        slideOffset.value = 0f // 解锁后重置滑块位置
                    }
                },
                orientation = Orientation.Horizontal
            )
    ) {
        // 滑动滑块
        Box(
            modifier = Modifier
                .offset(x = slideOffset.value)
                .size(60.dp)
                .background(Color.White, RoundedCornerShape(30.dp))
                .padding(16.dp)
        ) {
            Icon(Icons.Default.Lock, contentDescription = "滑动解锁图标")
        }
        // 解锁提示文本
        Text(
            text = if (slideProgress < 1f) "滑动解锁" else "已解锁",
            color = Color.White,
            modifier = Modifier.align(Alignment.Center)
        )
    }
}

@Preview
@Composable
fun PreviewSlideToUnlockButton() {
    SlideToUnlockButton(onUnlockSuccess = { /* 处理解锁逻辑 */ })
}

关键细节说明 #

1. 进度计算：通过onSizeChanged获取按钮实际宽度，将滑动偏移量除以宽度得到0-1的进度值，用coerceIn确保进度不会超出范围。
2. 颜色过渡：Color.lerp是Compose内置的颜色插值函数，会自动处理RGB通道的平滑过渡，完全适配滑动进度的实时变化。
3. 滑动逻辑：draggable修饰符处理横向滑动，限制偏移量在按钮宽度内，进度达标后触发解锁回调并重置滑块位置。

关于TargetBasedAnimation的补充 #

如果非要用TargetBasedAnimation，其实是将滑动进度作为动画的“手动驱动源”，但完全没必要，反而增加复杂度。简单示例如下：

// 用Animatable持有进度值，滑动时直接同步进度
val progressAnimatable = remember { Animatable(0f) }

// 在滑动回调中更新进度
progressAnimatable.snapTo(newProgressValue)

// 颜色计算
val currentColor = Color.lerp(startColor, endColor, progressAnimatable.value)

这种方式本质还是依赖Color.lerp，Animatable在这里只是做了一层状态持有，对滑动场景没有额外收益。

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