如何用Jetpack Compose实现Java中图片闪烁动画效果？

原Java代码实现的是无限循环的透明度闪烁动画：从完全不透明（alpha=255）过渡到半透明（alpha=77），再反向回到不透明，动画时长100ms，使用AccelerateDecelerateInterpolator插值器。以下是Jetpack Compose的对应实现方案：

基础无限闪烁实现 #

适合不需要手动控制启停的场景：

import androidx.compose.animation.core.*
import androidx.compose.foundation.Image
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.ui.Modifier
import androidx.compose.ui.res.painterResource

@Composable
fun FlashingImage(
    imageResId: Int,
    modifier: Modifier = Modifier
) {
    // 初始化无限循环动画容器
    val infiniteTransition = rememberInfiniteTransition()
    
    // 定义透明度动画：将原Int类型的alpha（0-255）转换为Compose的0f-1f浮点数范围
    val alpha by infiniteTransition.animateFloat(
        initialValue = 1f, // 对应原代码的255
        targetValue = 77f / 255f, // 对应原代码的77
        animationSpec = infiniteRepeatable(
            // 配置单次动画：时长100ms，使用对应插值器的 easing
            animation = tween(
                durationMillis = 100,
                easing = AccelerateDecelerateEasing
            ),
            repeatMode = RepeatMode.Reverse, // 对应原代码的REVERSE
            repeatCount = InfiniteRepeatCount // 对应原代码的INFINITE
        )
    )
    
    Image(
        painter = painterResource(id = imageResId),
        contentDescription = "Flashing image",
        modifier = modifier,
        alpha = alpha // 绑定动画值到图片透明度
    )
}

可控启停的闪烁实现 #

如果需要手动控制动画的开始/停止，可以用Animatable结合协程实现：

import androidx.compose.animation.core.*
import androidx.compose.foundation.Image
import androidx.compose.runtime.*
import androidx.compose.ui.Modifier
import androidx.compose.ui.res.painterResource
import kotlinx.coroutines.launch

@Composable
fun ControllableFlashingImage(
    imageResId: Int,
    isFlashing: Boolean,
    modifier: Modifier = Modifier
) {
    // 初始化可控制的动画值对象
    val alpha = remember { Animatable(1f) }
    val coroutineScope = rememberCoroutineScope()
    
    // 根据isFlashing状态启动/停止动画
    LaunchedEffect(isFlashing) {
        if (isFlashing) {
            alpha.animateTo(
                targetValue = 77f / 255f,
                animationSpec = infiniteRepeatable(
                    animation = tween(
                        durationMillis = 100,
                        easing = AccelerateDecelerateEasing
                    ),
                    repeatMode = RepeatMode.Reverse
                )
            )
        } else {
            // 停止动画并恢复到完全不透明状态
            alpha.animateTo(1f, animationSpec = tween(100))
        }
    }
    
    Image(
        painter = painterResource(id = imageResId),
        contentDescription = "Controllable flashing image",
        modifier = modifier,
        alpha = alpha.value
    )
}

关键对应点说明 #

• rememberInfiniteTransition 替代原代码的 AnimatorSet，专门处理无限循环动画
• animateFloat 适配Compose的浮点数alpha体系，将原0-255的Int值转换为0f-1f的比例
• infiniteRepeatable 配置无限循环规则，RepeatMode.Reverse 和 InfiniteRepeatCount 完全对应原代码的参数
• AccelerateDecelerateEasing 是Compose中对应 AccelerateDecelerateInterpolator 的实现

内容的提问来源于stack exchange，提问作者H.Jain