Android Compose如何让AnimatedVectorResource每次都正向播放动画

问题本质 #

AnimatedVectorResource的painterFor方法会根据atEnd参数的状态变化自动匹配播放方向：

• atEnd从false变为true时，正向播放动画到结束状态
• atEnd从true变为false时，反向播放动画到初始状态
  原逻辑每次翻转布尔值，自然会出现正反交替播放的情况。

方案1：计数触发重置（全版本兼容） #

通过独立的触发计数器控制播放逻辑，每次点击强制先回到初始状态再触发正向播放：

val image = animatedVectorResource(drawableId)
// 播放触发计数器，每次加1代表触发一次播放
var playTrigger by remember { mutableStateOf(0) }
var atEnd by remember { mutableStateOf(false) }

LaunchedEffect(playTrigger) {
    if (playTrigger > 0) {
        // 先重置到初始状态
        atEnd = false
        // 等待1帧确保状态生效，动画时长超过200ms可省略该行
        delay(16)
        // 触发正向播放
        atEnd = true
    }
}

Image(
    painter = image.painterFor(atEnd),
    contentDescription = "你的内容描述",
    modifier = Modifier
        .size(64.dp)
        .clickable {
            playTrigger += 1
        }
)

方案2：Key重置状态（代码更精简） #

利用remember的key参数实现状态自动重置，无需额外协程逻辑：

val image = animatedVectorResource(drawableId)
// 用key控制状态重置
var playKey by remember { mutableStateOf(0) }
var atEnd by remember(playKey) { mutableStateOf(false) }

Image(
    painter = image.painterFor(atEnd),
    contentDescription = "你的内容描述",
    modifier = Modifier
        .size(64.dp)
        .clickable {
            playKey += 1
            // 状态已经随key重置为false，直接触发正向播放
            atEnd = true
        }
)

额外优化说明 #

如果你的项目已经升级到Compose 1.4.0及以上版本，可以直接使用新版rememberAnimatedVectorPainterAPI，配合Animatable控制动画进度，可实现更灵活的播放控制逻辑。

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