至今头条

当个View下，使用Drawable入场退场动画

2024-04-29 11:00 由 翻滚的咸鱼 发表于 #移动端开发

效果图，简单的入场退场动效，一般情况是不同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

简单，且实用

热门相关：风流医圣   公子别秀   弃妇当家：带着萌宝去种田   明尊   纨绔仙医