Android：如何实现从右到左的横向圆形背景颜色过渡动画

XML 实现方案 #

方法1：使用 ValueAnimator/ObjectAnimator #

代码中直接创建动画

通过ValueAnimator对颜色值插值计算，动态更新背景色：

val colorStart = ContextCompat.getColor(this, R.color.colorPrimary)
val colorEnd = ContextCompat.getColor(this, R.color.colorAccent)

ValueAnimator.ofObject(ArgbEvaluator(), colorStart, colorEnd).apply {
    duration = 1000 // 动画时长（毫秒）
    addUpdateListener { animator ->
        val animatedColor = animator.animatedValue as Int
        yourRootView.setBackgroundColor(animatedColor)
    }
    start()
}

XML定义动画

在res/animator目录下创建color_transition.xml：

<objectAnimator xmlns:android="http://schemas.android.com/apk/res/android"
    android:propertyName="backgroundColor"
    android:duration="1000"
    android:valueFrom="@color/colorPrimary"
    android:valueTo="@color/colorAccent"
    android:valueType="colorType"/>

代码中启动动画：

val animator = AnimatorInflater.loadAnimator(this, R.animator.color_transition) as ObjectAnimator
animator.target = yourRootView
animator.start()

方法2：使用 TransitionManager #

适合页面切换场景，自动处理背景色过渡：

// 触发切换时执行
TransitionManager.beginDelayedTransition(yourRootView)
yourRootView.setBackgroundColor(ContextCompat.getColor(this, R.color.targetColor))

Jetpack Compose 实现方案 #

方法1：animateColorAsState（单状态切换） #

这是Compose中最简洁的颜色动画实现方式：

@Composable
fun ColorTransitionScreen() {
    var isDarkMode by remember { mutableStateOf(false) }
    val bgColor by animateColorAsState(
        targetValue = if (isDarkMode) Color.DarkGray else Color.LightGray,
        animationSpec = tween(durationMillis = 1000)
    )

    Box(
        modifier = Modifier
            .fillMaxSize()
            .background(bgColor)
            .clickable { isDarkMode = !isDarkMode }
    ) {
        // 放置你的UI内容（小图框、文字等）
    }
}

方法2：updateTransition（多状态切换） #

适合需要在多个状态间切换背景色的复杂场景：

@Composable
fun MultiStateColorTransition() {
    enum class ScreenState { DEFAULT, ACTIVE, INACTIVE }
    var currentState by remember { mutableStateOf(ScreenState.DEFAULT) }

    val transition = updateTransition(currentState, label = "ScreenStateTransition")
    val bgColor by transition.animateColor(label = "BgColor") { state ->
        when (state) {
            ScreenState.DEFAULT -> Color.White
            ScreenState.ACTIVE -> Color.Blue
            ScreenState.INACTIVE -> Color.Gray
        }
    }

    Box(
        modifier = Modifier
            .fillMaxSize()
            .background(bgColor)
            .clickable {
                currentState = when(currentState) {
                    ScreenState.DEFAULT -> ScreenState.ACTIVE
                    ScreenState.ACTIVE -> ScreenState.INACTIVE
                    ScreenState.INACTIVE -> ScreenState.DEFAULT
                }
            }
    ) {
        // 内容区域
    }
}

内容的提问来源于stack exchange，提问作者Ayxan Vəliyev