Android过渡动画，发现掘金小秘密

2401_84520118

于 2024-04-30 14:46:44 发布

阅读量482

点赞数 19

分类专栏：程序员文章标签： android

本文链接：https://blog.csdn.net/2401_84520118/article/details/138345649

版权

程序员专栏收录该内容

184 篇文章 1 订阅

订阅专栏

在两个Activity定义两个相同类型的View；
给两个View设置相同的transitionName属性；
通过ActivityOptions.makeSceneTransitionAnimation()函数生成Bundle对象；
startActivity()函数传递bundle对象。

「栗子讲解，清晰易懂：」

分别在activity_first.xml和activity_second.xml布局文件定义ImageView组件，并将transitionName属性设为activityTransform。

<?xml version="1.0" encoding="utf-8"?>

「预览图」 外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传 activityTransform属性也可以通过代码设置。

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) { ivImage.transitionName="activityTransform" }

在FirstActivity中给ImageView设置点击事件，跳转到第二个Activity。

ivImage.setOnClickListener { if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {//判断Android版本 val bundle = ActivityOptions.makeSceneTransitionAnimation(this, ivImage, "activityTransform") .toBundle() startActivity(Intent(this, SecondActivity::class.java), bundle) } else { startActivity(Intent(this, SecondActivity::class.java)) } }

代码中，先判断当前Android版本是否大于等于5.0，大于或等于Android 5.0的话就设置共享元素动画,小于5.0 就正常启动第二个Activity。

通过ActivityOptions.makeSceneTransitionAnimation()创建启动Activity过渡的一些参数，makeSceneTransitionAnimation()函数第一个参数为Activity对象;第二个参数为共享元素组件，这里设置为id是ivImage的ImageView视图；第三个参数为transitionName属性的值，这里是activityTransform。在调用AcivityOptions对象toBundle函数，包装成Bundle对象。

「效果图：」

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传 「多个共享元素过渡」

多个共享元素过渡也很简单，只需要调用makeSceneTransitionAnimation()函数的另外一个重载函数即可。

在前面XML布局的基础上，给TextView增加transitionName属性:textTransform。

<?xml version="1.0" encoding="utf-8"?>

构建多个Pair对象，并传递给makeSceneTransitionAnimation()函数，启动Activity。

ivImage.setOnClickListener { if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) { val imagePair=Pair<View,String>(ivImage,"activityTransform") val textPair=Pair<View,String>(ivImage,"textTransform") val bundle = ActivityOptions.makeSceneTransitionAnimation(this, imagePair,textPair).toBundle() startActivity(Intent(this, SecondActivity::class.java), bundle) } else { startActivity(Intent(this, SecondActivity::class.java)) } }

这里主要是通过将共享视图和transitionName属性的值包装到Pair对象，其他操作和一个共享元素的操作步骤并无区别。

「效果图：」

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

「深坑提醒」

有时从RecyclerView界面进入到详情页，由于详情页加载延迟，可能出现没有效果。例如ImageView从网络加载图片，可能A界面到B界面没效果，B回到A界面有效果。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传解决步骤：

在setContentView后添加下面代码，延迟加载过渡动画。

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) { postponeEnterTransition() }

在共享元素视图加载完毕，或者图片加载完毕后调用下面代码,开始加载过渡动画。

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) { startPostponedEnterTransition() }

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传例如我是在Glide加载完再调用：

Glide.with(mContext) .asBitmap() .load(value?.avatar ?: "") .listener(object : RequestListener<Bitmap> { override fun onResourceReady(resource: Bitmap?, model: Any?, target: Target<Bitmap>?, dataSource: DataSource?, isFirstResource: Boolean): Boolean { animatorCallback?.invoke()//回调开始加载过渡动画 return false } override fun onLoadFailed(e: GlideException?, model: Any?, target: Target<Bitmap>?, isFirstResource: Boolean): Boolean { animatorCallback?.invoke()//回调开始加载过渡动画 return false } }) .apply(RequestOptions.circleCropTransform()) .placeholder(R.mipmap.ic_default) .error(R.mipmap.ic_default) .into(authorBinding!!.ivAvatar)

大家也可以考虑下面代码：

shareElement.viewTreeObserver.addOnPreDrawListener(object : ViewTreeObserver.OnPreDrawListener { override fun onPreDraw(): Boolean { shareElement!!.viewTreeObserver.removeOnPreDrawListener(this) if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) { animatorCallback?.invoke() } return true } })

二)、进入过渡与退出过渡动画

与共享元素相反的，就是Activity进入与退出过渡动画，两个Activity之间在没有共享的视图情况下进行动画切换。下面先看三种动画效果图：「爆炸式效果」和「淡入淡出式效果」、「滑动式效果」。

「爆炸式」：将视图移入场景中心或从中移出；
「滑动式」：将视图从场景的其中一个边缘移入或移出；
「爆炸式」：通过更改视图的不透明度，在场景中添加视图或从中移除视图；

第一个界面采用Fade淡入淡出效果，第二个界面采用了Explode爆炸效果。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传前后两个界面都采用了Slide滑入滑出效果。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传利用Android现有的过渡框架,实现起来是很简单的，步骤如下：

在Activity的onCreate()方法中调用 setContentView()前设置启用窗口过渡属性;

window.requestFeature(Window.FEATURE_CONTENT_TRANSITIONS)

创建过渡效果对象Slide、Explode、Fade;

val slide=Slide() slide.slideEdge=Gravity.START slide.duration=300//效果时长，一般Activity切换时间很短，不建议设置过长

如果是Slide效果，可以设置slideEdge属性来指定滑动方向，默认是Gravity.BOTTOM。

将过渡效果设置给window相关属性，设置；

//退出当前界面的过渡动画 window.exitTransition = slide //进入当前界面的过渡动画 window.enterTransition = slide //重新进入界面的过渡动画 window.reenterTransition = slide

调用第二个Activity界面，使用过渡效果。

startActivity( Intent(this, SecondActivity::class.java), ActivityOptions.makeSceneTransitionAnimation(this).toBundle())

那么Activity的OnCreate()方法看起来是这样子的。

override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) { window.requestFeature(Window.FEATURE_CONTENT_TRANSITIONS) window.allowEnterTransitionOverlap=false Slide().apply { duration = 300 excludeTarget(android.R.id.statusBarBackground, true) excludeTarget(android.R.id.navigationBarBackground, true) }.also { window.exitTransition = it window.enterTransition = it window.reenterTransition = it } } setContentView(R.layout.activity_first) ivContent.setOnClickListener { if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) { startActivity( Intent(this, SecondActivity::class.java), ActivityOptions.makeSceneTransitionAnimation(this).toBundle() ) } } }

上面代码中调用了excludeTarget()方法将状态栏和导航栏排除在过渡动画效果之外。否则会跟着一起起动画效果，不是很美观。

正常情况，退出与进入过渡动画会有一小段交叉的过程，而window.allowEnterTransitionOverlap=false就是禁止交叉，只有退出过渡动画结束后才会再显示进入过渡动画。

如果第二个Activity在finish掉后，回到第一个Activity界面也想有过渡效果，就不要手动调用finish(),可以调用finishAfterTransition ()方法。

三)、兼容Android 5.0前

如果Android 5.0前也想要有切换动画怎么办？

在res/anim文件夹下创建想要的效果：

<alpha xmlns:android="http://schemas.android.com/apk/res/android" android:interpolator="@interpolator/decelerate_quad" android:fromAlpha="0.0" android:toAlpha="1.0" android:duration="@android:integer/config_longAnimTime" />