首页 > 其他分享 >当个View下,使用Drawable入场退场动画

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

时间:2024-04-29 11:13:41浏览次数:27  
标签:动画 index drawable import Drawable android resources 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

简单,且实用

标签:动画,index,drawable,import,Drawable,android,resources,View
From: https://www.cnblogs.com/LiuZhen/p/18165232

相关文章

  • 动画毕业设计渲染加速:云渲染技术如何助力学生作品
    ​随着毕业季的临近,动画和CG专业的学生们正如火如荼地投入到毕业作品的制作中。面对动画渲染这一耗时且技术要求高的环节,云渲染农场以其高效、经济的特点,成为了学生们的优选解决方案。接下来,让我们一起深入了解如何选择渲染器与云渲染农场,轻松应对毕业作品的渲染挑战吧。一、动......
  • 动画渲染有哪些加速工具?(含云渲染工具)
    在影视动画制作中,渲染环节常常因其资源密集和耗时而成为瓶颈。为了提高渲染效率,行业内部开发了多种工具,它们通过算法优化、增强并行处理能力,并利用云计算技术,有效地提升了渲染的速率和工作效率。现在,让我们来探索一些高效的渲染加速工具。影视动画渲染加速工具推荐→云渲染农场......
  • [Paper Reading] DETR3D: 3D Object Detection from Multi-view Images via 3D-to-2D
    名称DETR3D:3DObjectDetectionfromMulti-viewImagesvia3D-to-2DQueries时间:21.10机构:mit/CMU/StanfordTL;DR一种利用Transformer做E2E的3D目标检测方法,在nuScenes自动驾驶数据集上取得很好效果。Method主要创新点在于2D-to-3DFeatureTransforms模块,细节如图描......
  • Script of Narrative Writing from different point of view
    Thispaperisadaptedfrompartonecadaverizationof《聊斋志异》.Thisisoriginaltext:https://liaozhai.5000yan.com/19939.htmlThepointofviewofthestory:ThethirdpersonpointofviewThepointwillIusedinthestory.:FirstpersonpointofviewThe......
  • Script of Narrative Writing from different point of view
    TheLittleMatchGirlTodaywasthelastdayofthisyear.Theweatherwaschillwithsnowflakesdancingintheair.Iwaspushtosellmatchesbymymother.WhenIlefthome,Iworeapairofoversizeslippers,whichbelongedtomymother.Myclothesand......
  • [官方培训] 24-UE 非线性动画制作流程 Epic 戴浩军
    传送门:[官方培训]24-UE非线性动画制作流程|Epic戴浩军_哔哩哔哩_bilibili一.UE非线性动画制作流程参考《堡垒之夜预告片》白皮书,虽发布于2018年,但其包含的实时动画制作流程所涉及的核心概念,至今仍然适用 在开始设计制作流程前,需先明确流程目标 设计工作流......
  • Script of Narrative Writing from different point of view
    ThestoryIchoose:TheLittleMatch-GirlThepointofviewofthestory:ThirdpersonpointofviewNewpointofview:FirstpersonpointofviewScript:ThatwasaChristmasEvewithheavysnow.Iwassellingmatchesonthestreet.“Matches,matches!”B......
  • Script of Narrative Writing from different point of view
    Myfavoritestory:upThepointofviewofthestory:FirstpersonpointofviewNewpointofview:ThirdpersonpointofviewScript:LittleboyCarlwasmadaboutadventurefromchildhood,hopingtobeagreatadventurer.Oneday,heencounteredtomboy......
  • Jetpack Compose(6)——动画
    目录一、低级别动画API1.1animate*AsState1.2Animatable1.3Transition动画1.3.1updateTransition1.3.2createChildTransition1.3.3封装并复用Transition动画1.4remeberInfiniteTransition——无限循环的transition动画1.5小结二、AndroidStudio对Compose动画......
  • 动画的12项基本法则
    目录挤压与伸展(Squashandstretch)预期动作(Anticipation)演出方式(Staging)接续动作与关键动作(Straightaheadactionandposetopose)跟随动作与重叠动作(Followthroughandoverlappingaction)渐快与渐慢(Slowinandslowout)弧形(Arcs)附属动作(Secondaryaction)时间控制(T......