Android开发（13）——转场动画

本节内容

1.简介

2.overPaddingTransition动画

3.共享元素切换

4.多个共享动画

一、简介

1.在两个activity之间切换时界面的过渡效果。

2.两个activity或者Fragment之间shared elements切换效果。

3.转场动画的两种常用方式：

• overridePendingTransition

• ActivityOptions

二、overPaddingTransition动画

1.假如有A和B两个页面进行切换，A：从屏幕中间往左边移，直至消失。B：从右边出现，移动到屏幕中间，直至与屏幕重合。

2.新建一个anim包，在里面创建几个资源文件。

• left_exit.xml：从左边消失的动画，移动距离为一个屏幕的宽度。所以为-100%p（相当于A页面的动画，从屏幕中消失）

<translate xmlns:android="http://schemas.android.com/apk/res/android"
     android:fromXDelta="0"
     android:toXDelta="-100%p"
     android:duration = "500"
    >
</translate>

• left_enter.xml：从右边进入的动画。（相当于B页面的动画，从右侧进入屏幕）

<translate xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromXDelta="100%p"
    android:toXDelta="0"
    android:duration = "500"
    >
</translate>

3.任意搭建两个界面，添加两个按钮，然后修改一下背景颜色即可。先实现第一个next按钮的点击事件。

next.setOnClickListener {
     startActivity(Intent(this,DetailActivity::class.java))
     overridePendingTransition(R.anim.left_enter_anim,R.anim.left_exit_anim)
}

4.跳转过去之后，如果又要跳回去，那么在另外一个Activity里面实现一下back按钮的点击事件即可

back.setOnClickListener{
            finish()
        }

• 如果只调用finish()函数的话，那么它只会没有任何动画效果地跳转回去，一点都不美观。

5.如果想让它也有一点动画效果，那么再添加两个资源文件即可。这一次是从右边推过去。

• right_enter.xml：从最左边进入屏幕中间。

<translate xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromXDelta="-100%p"
    android:toXDelta="0"
    android:duration = "500">
</translate>

• right_exit.xml：从屏幕中间移动到最右边。

<translate xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromXDelta="0"
    android:toXDelta="100%"
    android:duration = "500">
</translate>

6.在back按钮的监听事件中添加这个动画效果

overridePendingTransition(R.anim.right_enter_anim,R.anim.right_exit_anim)

7.左右都可以，那么上下切换也可以。我们添加两个从底部出现和消失的资源文件

• bottom_enter.xml：从底部进入屏幕，这一回只用修改y坐标。

<translate xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromYDelta="100%p"
    android:toYDelta="0"
    android:duration = "500">
</translate>

• top_exit.xml：从屏幕中向上移动，直至消失。

<translate xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromYDelta="0"
    android:toYDelta="-100%p"
    android:duration = "500">
</translate>

8.在MainActivity里面设置一下就可以使用，从另外一个页面切换回来的动画又要重新设置一下。

overridePendingTransition(R.anim.botton_enter_anim,R.anim.top_exit_anim)

9.除了推动，还可以设置透明度动画。

• alpha_enter.xml：进入的动画。

<alpha xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromAlpha="0"
    android:toAlpha="1"
    android:duration = "500">
</alpha>

• alpha_exit.xml：消失的动画。

<alpha xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromAlpha="1"
    android:toAlpha="0"
    android:duration = "500">
</alpha>

overridePendingTransition(R.anim.alpha_enter_anim,R.anim.alpha_exit_anim)

同理，缩放，旋转那些动画都是可以自己做的。

三、共享元素切换

1.界面切换时 需要有共享元素切换效果。比如A和B页面都有两张图片，那么我们想让A页面的图片和B页面的图片作为共享元素，让它们的转换更平滑一点。

• 1.在界面A和B中 为共享控件设置相同的transitionName

android:transitionName="picture2"

• 2.创建ActivityOptions对象

val options = ActivityOptions.makeSceneTransitionAnimation(this,imageView,"picture2")

• 3.启动界面

startActivity(Intent(this,DetailActivity::class.java),options.toBundle())

四、多个共享动画

1.有共享元素时，切回去的方法就可以使用以下函数，这样切回去也会有一定的动画效果。

finishAfterTransition()

2.如果有多个共享元素，那么给其他元素也设置相同的transitionName，使用Pair将它们联系在一起

                val options=
                ActivityOptions.makeSceneTransitionAnimation(
                    this,
                    Pair<View,String>(imageView,"picture1"),
                    Pair<View,String>(imageView2,"picture2")
                    )

3.还有很多其他的动画，比如以下：

val options = ActivityOptions.makeScaleUpAnimation(
            imageView,0,0,imageView.width,imageView.height

4.还有其他方法来处理共享动画

         window.requestFeature(Window.FEATURE_ACTIVITY_TRANSITIONS)
        window.exitTransition = Slide(Gravity.END).setDuration(1000)
        window.enterTransition= Slide(Gravity.END).setDuration(1000)