Android 上 FloatingActionButton 图像的动画变化

Question

我正在开发一个示例应用程序。

它有一个主浮动操作按钮和子浮动操作按钮。

当点击主 Fab 时，应显示子 Fab。 我使用 ObjectAnimator 解决了这个问题。

而现在，我只有一件事。

我想在 Fab 打开时更改主图标图像。

简单地说，我可以使用 setImageResource api。

val res = if (isFabOpened) R.drawable.ic_close else R.drawable.ic_open
fabMain.setImageResource(res)

但我想添加过渡动画以获得平滑的变化效果。

我找到了“TransitionDrawable”。

所以我尝试了下面的代码：

1. res/drawable/transition_fab_main.xml

<?xml version="1.0" encoding="utf-8"?>
<transition xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/ic_add" />
    <item android:drawable="@drawable/ic_close" />
</transition>

1. res/layout/activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 
    ......>

    <!-- ...... -->

    <com.google.android.material.floatingactionbutton.FloatingActionButton
            android:id="@+id/fabMain"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="24dp"
            android:src="@drawable/transition_fab_main"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"/>

</androidx.constraintlayout.widget.ConstraintLayout>

1. MainActivity.kt

val transitionDrawable = fabMain.drawable as TransitionDrawable
if (isFabOpen) {
    transitionDrawable.reverseTransition(300)
} else {
    transitionDrawable.startTransition(300)
}

但它不能正常工作... 开始和结束都可以，但是在动画中间显示错误的图像。

有人帮帮我吗？

Answer 1

不是一个错误的图标，它是图标的组合，一个覆盖另一个 在过渡期间。您可以尝试以下方法-

val transitionDrawable = fabMain.drawable as TransitionDrawable
transitionDrawable.isCrossFadeEnabled = true
transitionDrawable.apply { if (isFabOpen) reverseTransition(200) else startTransition(0) }

请注意VectorDrawables 不会交叉淡入淡出 theTransitionDrawable，您需要将它们转换为 BitmapDrawables 首先。请参阅下面的代码 -

 private fun bitmapDrawableFromVector(
        context: Context,
        drawableId: Int
    ) = BitmapDrawable(context.resources, getBitmapFromVectorDrawable(context, drawableId))

    private fun getBitmapFromVectorDrawable(context: Context, drawableId: Int): Bitmap? {
        val drawable = ContextCompat.getDrawable(context, drawableId)
        val bitmap = Bitmap.createBitmap(
            drawable!!.intrinsicWidth,
            drawable.intrinsicHeight,
            Bitmap.Config.ARGB_8888
        )
        val canvas = Canvas(bitmap)
        drawable.setBounds(0, 0, canvas.width, canvas.height)
        drawable.draw(canvas)
        return bitmap
    }

相关主题 - https://stackoverflow.com/a/62442627/4694013

谢谢。