Android开发：如何实现ImageView旋转时切换PNG图片的勾选/叉号动画？

哥们，我懂你要的效果——就是让ImageView旋转360°的过程中，把勾选的PNG图无缝转成叉号，反过来切换也一样对吧？之前搜的方案大多是矢量图的，用PNG确实得换个思路，其实分阶段拆分动画+中间切换图片就能实现，给你详细说下：

把完整的360°旋转拆成两个180°的动画阶段：

1. 从0°转到180°，这时候图片处于“倒过来”的状态
2. 在第一个动画结束瞬间，切换成目标图片（勾选转叉号，叉号转勾选）
3. 接着执行第二个180°旋转，从180°转到360°（视觉上就是把新图片转回正向）

这样整个过程看起来就是连续的360°旋转，同时完成了图片的自然切换。

1. 准备资源 #

先准备两张尺寸、绘制区域完全一致的PNG图：

• 勾选图标：ic_check.png
• 叉号图标：ic_cross.png
  确保两张图的中心对齐，这样切换时不会出现位移，动画更流畅。

2. 分阶段编写动画代码 #

这里用Kotlin示例（Java写法逻辑完全一致，只是语法不同）：

// 获取两张图片的Drawable
val checkDrawable = ContextCompat.getDrawable(context, R.drawable.ic_check)
val crossDrawable = ContextCompat.getDrawable(context, R.drawable.ic_cross)

// 初始设置默认图片（比如先显示勾选）
imageView.setImageDrawable(checkDrawable)

// 执行旋转切换动画的方法
fun toggleCheckCross() {
    imageView.isClickable = false // 避免动画过程中重复点击
    // 第一阶段：旋转180°
    imageView.animate()
        .rotation(180f)
        .setDuration(500) // 动画时长，可根据需求调整
        .withEndAction {
            // 旋转到180°时，切换图片
            val targetDrawable = if (imageView.drawable == checkDrawable) crossDrawable else checkDrawable
            imageView.setImageDrawable(targetDrawable)
            
            // 第二阶段：继续旋转剩下的180°到360°
            imageView.animate()
                .rotation(360f)
                .setDuration(500)
                .withEndAction {
                    // 动画结束后重置rotation为0°，恢复点击能力
                    imageView.rotation = 0f
                    imageView.isClickable = true
                }
                .start()
        }
        .start()
}

// 给ImageView加点击事件触发动画
imageView.setOnClickListener {
    toggleCheckCross()
}

• 简化代码结构：用withEndAction替代AnimatorListener，代码更简洁易读
• 适配反向切换：方法里会自动判断当前显示的图片，不管是勾选转叉号还是叉号转勾选都能兼容
• 避免动画冲突：动画执行时禁用点击，结束后恢复，防止多次点击导致动画混乱

这样就能用PNG图实现你想要的旋转切换效果啦！

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