當個View下，使用Drawable入場退場動畫

翻滚的咸鱼發表於2024-04-29
View動畫

效果圖，簡單的入場退場動效，一般情況是不同view之間去新增動畫，某些條件下顯然並不符合需求，需要在單個ImageView下進行的

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/white">

    <ImageView
        android:id="@+id/iv_bg"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scaleType="fitXY"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <Button
        android:id="@+id/btn_click"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="100dp"
        android:text="點選切換背景"
        android:textSize="30sp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

該view下，背景存在不同資源，png，drawable，svg，color，本質其實都是drawable

drawable下使用入場退場動效，需要使用到 TransitionDrawable，utils類如下

object TransitionDrawableUtils {

    private var topDrawable: Drawable? = null

    fun setDrawable(bgView: ImageView, drawable: Drawable) {
        if (topDrawable == null) {
            bgView.setImageDrawable(drawable)
        } else {
            val drawables = arrayListOf<Drawable>()
            topDrawable?.let { drawables.add(it) }
            drawables.add(drawable)
            val transition = TransitionDrawable(drawables.toTypedArray())
            bgView.setImageDrawable(transition)
            transition.startTransition(1000)
        }
        topDrawable = drawable
    }

}

要使用TransitionDrawable至少需要兩個drawable資源，然後定義drawableList，進行背景切換，切換時TransitionDrawable會對資源進行過渡

package com.example.page

import android.annotation.SuppressLint
import android.graphics.Color
import android.graphics.drawable.ColorDrawable
import android.graphics.drawable.Drawable
import android.os.Bundle
import android.widget.Button
import android.widget.ImageView
import androidx.appcompat.app.AppCompatActivity
import androidx.core.graphics.drawable.toBitmap
import androidx.core.graphics.drawable.toDrawable

class TransitionDrawableActivity : AppCompatActivity() {

    private var index = 0

    @SuppressLint("UseCompatLoadingForDrawables")
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_transition)

        val ivBg = findViewById<ImageView>(R.id.iv_bg)
        val btnClick = findViewById<Button>(R.id.btn_click)

        val bgList = arrayListOf<Drawable>(
            ColorDrawable(Color.CYAN),
            resources.getDrawable(R.drawable.bg_def, this.theme),
            toTransitionDrawable(resources.getDrawable(R.drawable.bg1, this.theme)),// svg圖片需要轉換一下
            toTransitionDrawable(resources.getDrawable(R.drawable.bg2, this.theme)),
            toTransitionDrawable(resources.getDrawable(R.drawable.bg3, this.theme)),
            toTransitionDrawable(resources.getDrawable(R.drawable.bg4, this.theme))
        )
        TransitionDrawableUtils.setDrawable(ivBg, bgList[index])
        btnClick.setOnClickListener {
            index++
            if (index >= bgList.size) {
                index = 0
            }
            TransitionDrawableUtils.setDrawable(ivBg, bgList[index])
        }
    }

    private fun toTransitionDrawable(drawable: Drawable): Drawable {
        return drawable.toBitmap(1920, 1920, null).toDrawable(resources)
    }
}　　

需要注意的是，如果是svg圖片，需要轉換一下，否則svg不支援TransitionDrawable

簡單，且實用

相關文章