Kotlin中如何实现FloatingActionButton点击旋转并切换图标与背景色？

核心问题1：FAB变量类型错误 #

你把fab声明成了View类型，而View没有setImageResource()这类FloatingActionButton的专属方法，自然调用不了。必须将其强转为FloatingActionButton类型，才能操作图标。

核心问题2：混淆了FAB的图标与背景 #

XML里android:src设置的是FAB的前景图标，修改它要调用setImageResource()；而fab.background修改的是FAB的圆形底色，不是图标，所以你之前改background完全没作用到图标上。

核心问题3：动画时机不合理 #

直接在onAnimationStart里改图标，会导致动画还没开始翻转，图标就先变了，视觉效果割裂。正确做法是在动画旋转到90度（半翻转状态）时切换图标，看起来像是FAB翻过来露出新图标。

修正后的完整代码 #

1. FAB初始化与点击事件处理

// 强转为FloatingActionButton类型
val fab = findViewById<FloatingActionButton>(R.id.fab)
// 用变量记录当前状态，实现点击切换效果
var isFlipped = false

fab.setOnClickListener {
    rotateAndSwitchFab(fab, isFlipped)
    isFlipped = !isFlipped
}

2. 旋转+切换的动画实现

private fun rotateAndSwitchFab(fab: FloatingActionButton, isFlipped: Boolean) {
    // 第一段动画：旋转到90度
    fab.animate()
        .rotationY(90f)
        .setDuration(200)
        .setListener(object : Animator.AnimatorListener {
            override fun onAnimationStart(animation: Animator?) {}
            override fun onAnimationCancel(animation: Animator?) {}
            override fun onAnimationRepeat(animation: Animator?) {}

            override fun onAnimationEnd(animation: Animator?) {
                // 中间切换图标和背景色
                if (isFlipped) {
                    fab.setImageResource(R.drawable.bike_helmet_plus_1)
                    fab.setBackgroundColor(ContextCompat.getColor(fab.context, R.color.default_fab_color))
                } else {
                    fab.setImageResource(R.drawable.helmet)
                    fab.setBackgroundColor(ContextCompat.getColor(fab.context, R.color.flipped_fab_color))
                }
                // 第二段动画：完成剩余90度旋转，实现完整翻转效果
                fab.animate()
                    .rotationY(if (isFlipped) 0f else 180f)
                    .setDuration(200)
                    .setListener(null) // 清空监听，避免重复触发
            }
        })
}

补充说明

• 记得在colors.xml中定义default_fab_color和flipped_fab_color，或者直接使用系统内置颜色值。
• 分两段动画的设计，能让图标切换刚好卡在翻转的中间节点，视觉上更贴近真实翻面的效果。

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