Android自定义Activity切换动画完全解析

Android自定义Activity切换动画完全解析

在Android开发中，Activity之间的切换是最常见的业务场景了，而且系统默认的Activity之间的切换都是带动画效果的(右进右出)。但是有的时候我们不满足于系统的默认动画效果，想自定义Activity之间的切换动画，这时候我们就要分析分析如何自定义出自己想要的动画效果并给Activity应用上了。

基础概念：

四种基本动画：

想自定义Activity切换动画首相要了解Android系统的4中基本动画：translate（平移动画），rotate（旋转动画），scale（缩放动画），alpha（透明度动画）。因为Activity的切换动画无非就是这四种动画的简单组合。

两种实现方式：

自定义动画有两种实现方式：java代码和xml配置。这两种方式都可以实现Activity自定义切换动画的效果，如果所有的Activity都是一样的效果那么只要在xml中配置即可，但是如果有特殊的Activity需要特殊指定的话那么就在java代码中为其指定。

1.java代码实现：

主要是overridePendingTransition()这个方法，如果想要自定义某次Activity切换的动画效果只需要在完成Activity切换的代码之后加上这一句代码，然后传入两个动画效果的资源即可。

注意:

1. 方法的第一个参数是跳转过程中将要显示的Activity的入场动画，第二个参数是即将隐藏的Activity的退场动画。
2. 这句代码一定要在跳转代码之后加入，一般写在在startActivity()或者finish()调用之后。

2.xml配置：

在你的styles.xml文件中的主题中加入以下四项即可：

<item name="android:activityOpenEnterAnimation">@anim/anim_1</item>
<item name="android:activityOpenExitAnimation">@anim/anim_2</item>
<item name="android:activityCloseEnterAnimation">@anim/anim_3</item>
<item name="android:activityCloseExitAnimation">@anim/anim_4</item>

 
 

 
 
1
2
3
4

解释：

1. activityOpenEnterAnimation：新Activity入栈时新Activity的入场动画
2. activityOpenExitAnimation：新Activity入栈时旧Activity的退场动画
3. activityCloseEnterAnimation：顶部Activity出栈时下面Activity的入场动画
4. activityCloseExitAnimation：顶部Activity出栈时它的退场动画

系统默认Activity动画分析：

首先看一遍系统默认的Activity切换的动画效果：

可以看到这是一个右进右出的动画效果，但是具体的动画过程是怎么样的呢。系统默认的动画速度太快（250ms）不利于我们进行分析,我们打开手机的开发者选项，将“过渡动画缩放”改为x10。


这时候我们再来观察一下系统的默认切换动画效果：


可以看到Activity2入场动画就是简单的从屏幕右侧平移到屏幕中，Activity1退场动画是缩放动画和透明度动画的简单组合，一边缩小一边变透明。而从Activity2到Activity1的过程基本就是反过来而已，并且其动画的插值器都是减速插值器。既然分析过了系统的默认动画效果，那我们就来实现一下和系统默认动画一模一样的效果。这里为了简便我们使用了xml来配置我们的动画效果。

<item name="android:activityOpenEnterAnimation">@anim/anim_1</item>
<item name="android:activityOpenExitAnimation">@anim/anim_2</item>
<item name="android:activityCloseEnterAnimation">@anim/anim_3</item>
<item name="android:activityCloseExitAnimation">@anim/anim_4</item>

 
 

 
 
1
2
3
4

anim_1代码：

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="250"
android:interpolator="@android:interpolator/decelerate_quad">

<translate
android:fromXDelta="100%"
android:toXDelta="0" />

</set>

 
 

 
 
1
2
3
4
5
6
7
8
9
10

anim_2代码

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="250"
android:interpolator="@android:interpolator/decelerate_quint">

<scale
android:fromXScale="1"
android:fromYScale="1"
android:pivotX="50%"
android:pivotY="50%"
android:toXScale="0.9"
android:toYScale="0.9" />

<alpha
android:fromAlpha="1"
android:toAlpha="0.3" />

</set>

 
 

 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

anim_3代码：

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="250"
android:interpolator="@android:interpolator/decelerate_quad">

<scale
android:fromXScale="0.9"
android:fromYScale="0.9"
android:pivotX="50%"
android:pivotY="50%"
android:toXScale="1"
android:toYScale="1" />

<alpha
android:fromAlpha="0.3"
android:toAlpha="1" />

</set>

 
 

 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

anim_4代码：

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="250"
android:interpolator="@android:interpolator/decelerate_quad">
<translate
android:fromXDelta="0"
android:toXDelta="100%" />
</set>

 
 

 
 
1
2
3
4
5
6
7
8

接下来看看我们实现的动画效果吧：


可以看到基本跟系统默认的左进左出的动画效果完全一致了。那么我们按照这个思路来实现一下其他的动画效果。

其他动画效果实现：

1.左进左出

效果：


anim_1代码：

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="250"
android:interpolator="@android:interpolator/decelerate_quad">

<translate
android:fromXDelta="-100%"
android:toXDelta="0" />

</set>

 
 

 
 
1
2
3
4
5
6
7
8
9
10

anim_2代码

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="250"
android:interpolator="@android:interpolator/decelerate_quint">

<scale
android:fromXScale="1"
android:fromYScale="1"
android:pivotX="50%"
android:pivotY="50%"
android:toXScale="0.9"
android:toYScale="0.9" />

<alpha
android:fromAlpha="1"
android:toAlpha="0.3" />

</set>

 
 

 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

anim_3代码：

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="250"
android:interpolator="@android:interpolator/decelerate_quad">

<scale
android:fromXScale="0.9"
android:fromYScale="0.9"
android:pivotX="50%"
android:pivotY="50%"
android:toXScale="1"
android:toYScale="1" />

<alpha
android:fromAlpha="0.3"
android:toAlpha="1" />

</set>

 
 

 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

anim_4代码：

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="250"
android:interpolator="@android:interpolator/decelerate_quad">
<translate
android:fromXDelta="0"
android:toXDelta="-100%" />
</set>

 
 

 
 
1
2
3
4
5
6
7
8

上进上出：

效果：


anim_1代码：

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="250"
android:interpolator="@android:interpolator/decelerate_quad">

<translate
android:fromYDelta="-100%"
android:toYDelta="0" />

</set>

 
 

 
 
1
2
3
4
5
6
7
8
9
10

anim_2代码

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="250"
android:interpolator="@android:interpolator/decelerate_quint">

<scale
android:fromXScale="1"
android:fromYScale="1"
android:pivotX="50%"
android:pivotY="50%"
android:toXScale="0.9"
android:toYScale="0.9" />

<alpha
android:fromAlpha="1"
android:toAlpha="0.3" />

</set>

 
 

 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

anim_3代码：

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="250"
android:interpolator="@android:interpolator/decelerate_quad">

<scale
android:fromXScale="0.9"
android:fromYScale="0.9"
android:pivotX="50%"
android:pivotY="50%"
android:toXScale="1"
android:toYScale="1" />

<alpha
android:fromAlpha="0.3"
android:toAlpha="1" />

</set>

 
 

 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

anim_4代码：

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="250"
android:interpolator="@android:interpolator/decelerate_quad">
<translate
android:fromYDelta="0"
android:toYDelta="-100%" />
</set>

 
 

 
 
1
2
3
4
5
6
7
8

下进下出：

效果：


anim_1代码：

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="250"
android:interpolator="@android:interpolator/decelerate_quad">

<translate
android:fromYDelta="100%"
android:toYDelta="0" />

</set>

 
 

 
 
1
2
3
4
5
6
7
8
9
10

anim_2代码

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="250"
android:interpolator="@android:interpolator/decelerate_quint">

<scale
android:fromXScale="1"
android:fromYScale="1"
android:pivotX="50%"
android:pivotY="50%"
android:toXScale="0.9"
android:toYScale="0.9" />

<alpha
android:fromAlpha="1"
android:toAlpha="0.3" />

</set>

 
 

 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

anim_3代码：

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="250"
android:interpolator="@android:interpolator/decelerate_quad">

<scale
android:fromXScale="0.9"
android:fromYScale="0.9"
android:pivotX="50%"
android:pivotY="50%"
android:toXScale="1"
android:toYScale="1" />

<alpha
android:fromAlpha="0.3"
android:toAlpha="1" />

</set>

 
 

 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

anim_4代码：

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="250"
android:interpolator="@android:interpolator/decelerate_quad">
<translate
android:fromYDelta="0"
android:toYDelta="100%" />
</set>

 
 

 
 
1
2
3
4
5
6
7
8

特殊的动画效果实现：

从上边的代码可以看出，其实以上四种动画其实都是系统的默认动画效果在不同方向上的重新实现而已。
那接下来实现一些与系统的默认动画不一样的切换动画效果！

平移效果：

anim_1代码：

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="250"
android:interpolator="@android:interpolator/decelerate_quad">

<translate
android:fromXDelta="100%"
android:toXDelta="0" />

</set>

 
 

 
 
1
2
3
4
5
6
7
8
9
10

anim_2代码

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="250"
android:interpolator="@android:interpolator/decelerate_quad">

<translate
android:fromXDelta="0"
android:toXDelta="-100%" />

</set>

 
 

 
 
1
2
3
4
5
6
7
8
9
10

anim_3代码：

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="250"
android:interpolator="@android:interpolator/decelerate_quad">

<translate
android:fromXDelta="-100%"
android:toXDelta="0" />

</set>

 
 

 
 
1
2
3
4
5
6
7
8
9
10

anim_4代码：

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="250"
android:interpolator="@android:interpolator/decelerate_quad">

<translate
android:fromXDelta="0"
android:toXDelta="100%" />

</set>

 
 

 
 
1
2
3
4
5
6
7
8
9
10

跃动效果：

anim_1代码：

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="250"
android:interpolator="@android:interpolator/decelerate_quad">

<alpha
android:fromAlpha="0.3"
android:toAlpha="1" />

<scale
android:fromXScale="0.5"
android:fromYScale="0.5"
android:pivotX="50%"
android:pivotY="50%"
android:toXScale="1"
android:toYScale="1" />

<translate
android:fromXDelta="100%"
android:toXDelta="0" />

</set>

 
 

 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

anim_2代码

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="250"
android:interpolator="@android:interpolator/decelerate_quad">

<alpha
android:fromAlpha="1"
android:toAlpha="0.3" />

<scale
android:fromXScale="1"
android:fromYScale="1"
android:pivotX="50%"
android:pivotY="50%"
android:toXScale="0.5"
android:toYScale="0.5" />

<translate
android:fromXDelta="0"
android:toXDelta="-100%" />

</set>

 
 

 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

anim_3代码：

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="250"
android:interpolator="@android:interpolator/decelerate_quad">

<alpha
android:fromAlpha="0.3"
android:toAlpha="1" />

<scale
android:fromXScale="0.5"
android:fromYScale="0.5"
android:pivotX="50%"
android:pivotY="50%"
android:toXScale="1"
android:toYScale="1" />

<translate
android:fromXDelta="-100%"
android:toXDelta="0" />

</set>

 
 

 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

anim_4代码：

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="250"
android:interpolator="@android:interpolator/decelerate_quad">

<alpha
android:fromAlpha="1"
android:toAlpha="0.3" />

<scale
android:fromXScale="1"
android:fromYScale="1"
android:pivotX="50%"
android:pivotY="50%"
android:toXScale="0.5"
android:toYScale="0.5" />

<translate
android:fromXDelta="0"
android:toXDelta="100%" />

</set>

 
 

 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

推压效果：

anim_1代码：

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="250"
android:interpolator="@android:interpolator/decelerate_quad">

<scale
android:fromXScale="0"
android:fromYScale="1"
android:pivotX="100%"
android:pivotY="50%"
android:toXScale="1"
android:toYScale="1" />

</set>

 
 

 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14

anim_2代码

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="250"
android:interpolator="@android:interpolator/decelerate_quad">

<scale
android:fromXScale="1"
android:fromYScale="1"
android:pivotX="0"
android:pivotY="50%"
android:toXScale="0"
android:toYScale="1" />

</set>

 
 

 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14

anim_3代码：

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="250"
android:interpolator="@android:interpolator/decelerate_quad">

<scale
android:fromXScale="0"
android:fromYScale="1"
android:pivotX="0"
android:pivotY="50%"
android:toXScale="1"
android:toYScale="1" />

</set>

 
 

 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14

anim_4代码：

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="250"
android:interpolator="@android:interpolator/decelerate_quad">

<scale
android:fromXScale="1"
android:fromYScale="1"
android:pivotX="100%"
android:pivotY="50%"
android:toXScale="0"
android:toYScale="1" />

</set>

 
 

 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14

旋转效果：

anim_1代码：

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="250"
android:interpolator="@android:interpolator/decelerate_quad">

<rotate
android:fromDegrees="90"
android:pivotX="50%"
android:pivotY="130%"
android:toDegrees="0" />

 
 

 
 
1
2
3
4
5
6
7
8
9
10

anim_2代码

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="250"
android:interpolator="@android:interpolator/decelerate_quad">

<rotate
android:fromDegrees="0"
android:pivotX="50%"
android:pivotY="130%"
android:toDegrees="-90" />

</set>

 
 

 
 
1
2
3
4
5
6
7
8
9
10
11
12

anim_3代码：

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="250"
android:interpolator="@android:interpolator/decelerate_quad">

<rotate
android:fromDegrees="-90"
android:pivotX="50%"
android:pivotY="130%"
android:toDegrees="0" />

</set>

 
 

 
 
1
2
3
4
5
6
7
8
9
10
11
12

anim_4代码：

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="250"
android:interpolator="@android:interpolator/decelerate_quad">

<rotate
android:fromDegrees="0"
android:pivotX="50%"
android:pivotY="130%"
android:toDegrees="90" />

</set>

 
 

 
 
1
2
3
4
5
6
7
8
9
10
11
12

总结：

其实实现自己的Activity的切换动画效果非常简单，无非就是四种基本动画的简单组合罢了。除了上面实现的例子效果外，大家也可以自己创造出一些不一样的动画效果。除此之外，在Android5.0之后又加入了共享视图元素的切换动画，这种动画效果可以更加自然地完成Activity之间的过渡。在这里就不展开分享了，感兴趣的同学可以去网上搜索一下类似的文章，也是很简单的就可以完成。