如何使用TransitionDrawable结合矢量Drawable实现CheckBox状态切换动画？

嘿，你现在的问题是TransitionDrawable已经设置给CheckBox了，但没触发动画对吧？这是因为TransitionDrawable不会自动感知CheckBox的选中状态变化，得我们手动去监听状态并触发动画。下面是完整的实现步骤：

1. 确认TransitionDrawable配置（你的XML已没问题，补充细节） #

你的transition.xml里第一个item对应未选中状态，第二个对应选中状态，这个顺序是对的。如果想自定义动画时长，可以在<transition>标签里加上android:duration="400"（单位毫秒），比如：

<?xml version="1.0" encoding="utf-8"?>
<transition xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="400"> <!-- 自定义动画时长 -->
    <item android:drawable="@drawable/ic_disabled" />
    <item android:drawable="@drawable/ic_enabled" />
</transition>

2. 代码中绑定状态监听并触发动画 #

你已经完成了设置buttonDrawable的步骤，接下来需要给CheckBox添加选中状态监听器，在状态变化时启动对应的过渡动画：

val checkbox = findViewById<CheckBox>(R.id.your_checkbox_id)
val stateDrawable = ContextCompat.getDrawable(this, R.drawable.transition) as TransitionDrawable

// 先处理初始状态：如果CheckBox默认是选中的，直接切换到第二个drawable
if (checkbox.isChecked) {
    stateDrawable.startTransition(0) // 0时长直接切换，避免初始状态异常
}

checkbox.buttonDrawable = stateDrawable

checkbox.setOnCheckedChangeListener { _, isChecked ->
    if (isChecked) {
        // 选中时，从第一个drawable过渡到第二个
        stateDrawable.startTransition(stateDrawable.duration)
    } else {
        // 取消选中时，反向过渡
        stateDrawable.reverseTransition(stateDrawable.duration)
    }
}

3. 注意事项 #

• 如果你的CheckBox在布局里默认设置了android:checked="true"，一定要先调用startTransition(0)初始化drawable状态，不然第一次切换时动画会不正常。
• startTransition()和reverseTransition()的参数是动画时长，如果XML里已经设置了android:duration，直接用stateDrawable.duration即可，也可以手动传数值比如400。
• 确保ic_disabled和ic_enabled是正确的Drawable资源，避免资源找不到的问题。

这样就能实现CheckBox选中/取消时的平滑过渡动画啦～

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