Android 使用TransitionManager来方便地实现过渡动画

左手的ㄟ右手 2023-10-10 11:22 15阅读 0赞

在开发中我们使用过渡动画，平时会用`ObjectAnimator`或`ValueAnimator`来完成。

但其实，我们可以用更简单的方式来实现同样的效果。  
这就是TransitionManager，Google已经帮我们封装好了。

#### 改变View属性来实现过渡动画 ####

首先，我们创建一个布局

<?xml version="1.0" encoding="utf-8"?>
    <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
    
        <ImageView
    
            android:id="@+id/img_01"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="left"
            android:layout_margin="24dp"
            android:src="@mipmap/ic_01" />
    
    </FrameLayout>

然后在代码里动态改变他的布局属性

img01.setOnClickListener {
        
        val lp = img01.layoutParams as FrameLayout.LayoutParams
        lp.gravity = Gravity.RIGHT
        img01.requestLayout()
    }

运行项目，我们可以看到效果  
![在这里插入图片描述][20200720081707990.gif]  
可以看到，我们点击小车的时候，小车的位置进行了改变。  
但是这没有达到我们想要的动画效果，那要怎么办呢 ?  
很简单，加上以下一句话，就自动会有动画效果了。

img01.setOnClickListener {
        
        TransitionManager.beginDelayedTransition(img01.parent as ViewGroup?)
    
        val lp = img01.layoutParams as FrameLayout.LayoutParams
        lp.gravity = Gravity.RIGHT
        img01.requestLayout()
    }

来看下效果  
![在这里插入图片描述][20200720082155589.gif]

#### 改变xml来实现过渡动画 ####

除了动态改变view的属性，我们还可以直接替换xml布局文件，来实现过渡动画。  
首先，我们需要先新建开始和结束的xml文件，注意这里的id要保持一致。  
activity\_main\_start.xml

<?xml version="1.0" encoding="utf-8"?>
    <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/root"
        tools:context=".MainActivity">
    
        <ImageView
            android:id="@+id/img_01"
            android:layout_width="200dp"
            android:layout_height="300dp"
            android:scaleType="centerCrop"
            android:src="@mipmap/img_01"/>
    
    </FrameLayout>

activity\_main\_end.xml

<?xml version="1.0" encoding="utf-8"?>
    <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/root"
        tools:context=".MainActivity">
    
        <ImageView
            android:id="@+id/img_01"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:scaleType="centerCrop"
            android:src="@mipmap/img_01"/>
    
    </FrameLayout>

接着，在代码里调用`TransitionManager.go`

override fun onClick(v: View) {
        
            val root = findViewById<ViewGroup>(R.id.root)
            val startScene = Scene.getSceneForLayout(root, R.layout.activity_main_start, this)
            val endScene = Scene.getSceneForLayout(root, R.layout.activity_main_end, this)
            if (toggle) {
        
                TransitionManager.go(endScene, ChangeBounds())
            } else {
        
                TransitionManager.go(startScene, ChangeBounds())
            }
    
            bindData() //需要重新设置点击事件，因为在动画开始的一瞬间，原来的View已经从布局中移除
            toggle = !toggle
        }
    
        private fun bindData() {
        
            img01 = findViewById(R.id.img_01)
            img01.setOnClickListener(this)
        }

我们来看下效果  
![在这里插入图片描述][20200724144859623.gif]

#### 其他 ####

这让人感到很神奇，TransitionManager做了些什么了 ?  
下篇文章我们来看下它的源码。

[Android TransitionManager源码解析][Android TransitionManager]

[20200720081707990.gif]: https://img-blog.csdnimg.cn/20200720081707990.gif
[20200720082155589.gif]: https://img-blog.csdnimg.cn/20200720082155589.gif
[20200724144859623.gif]: https://img-blog.csdnimg.cn/20200724144859623.gif
[Android TransitionManager]: https://blog.csdn.net/EthanCo/article/details/107456112