【Android -- 动画】Activity 转场动画

一、前言

在 Android 5.0 以后，Google 为 Activity 的转场设计了更加友好的动画效果。

转场动画(Activity Transition)基本介绍
Android 5.0 提供了三种 Transition 类型

进入：决定Activity中的所有的视图怎么进入屏幕。
退出：决定一个Activity中的所有视图怎么退出屏幕。
共享元素：决定两个activities之间的过渡，怎么共享(它们)的视图。

进入和退出包含如下动画效果

explode(分解) – 从屏幕中间进或出
slide(滑动) - 从屏幕边缘进或出地
fade(淡出) –通过改变屏幕上视图的不透明度达到添加或者移除视图的效果

共享元素包含如下动画效果

changeBounds - 改变目标视图的布局边界
changeClipBounds - 裁剪目标视图边界
changeTransform - 改变目标视图的缩放比例和旋转角度
changeImageTransform - 改变目标图片的大小和缩放比例

二、传统转场动画

1. 效果图

2. 实现代码

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

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

startActivity(new Intent(this, Activity2.class));
overridePendingTransition(R.anim.slide_right_in, R.anim.slide_left_out);

三、新转场动画

5.0 新的转场动画分为 4 种，Explode、Slide、Fade、Share。
1. 效果图

Explode
Explode 的效果是下一个页面的元素从四面八方进入，最终形成完整的页面。代码如下：

// 跳转
Intent intent = new Intent(this, CActivity.class);
startActivity(intent, ActivityOptions.makeSceneTransitionAnimation(this).toBundle());// 跳转的Activity
public class CActivity extends AppCompatActivity {@Overrideprotected void onCreate(@Nullable Bundle savedInstanceState) {super.onCreate(savedInstanceState);getWindow().setEnterTransition(new Explode());setContentView(R.layout.activity_c);}
}

在跳转时就要注意一点，intent 后面还要再传一个参数 bundle，固定写法ActivityOptions.makeSceneTransitionAnimation(this).toBundle()，下一个 Activity 根据这个就能识别出使用 5.0 新转场动画。

Slide
Slide 就是下一个页面元素从底部依次向上运动，最终形成完整的页面。代码如下：

// 跳转
Intent intent = new Intent(this, CActivity.class);
startActivity(intent, ActivityOptions.makeSceneTransitionAnimation(this).toBundle());// 跳转的Activity
public class CActivity extends AppCompatActivity {@Overrideprotected void onCreate(@Nullable Bundle savedInstanceState) {super.onCreate(savedInstanceState);getWindow().setEnterTransition(new Slide());setContentView(R.layout.activity_c);}
}

Fade
Fade 就是下一个页面元素渐变出现，最终形成完整的页面。代码如下：

// 跳转
Intent intent = new Intent(this, CActivity.class);
startActivity(intent, ActivityOptions.makeSceneTransitionAnimation(this).toBundle());// 跳转的Activity
public class CActivity extends AppCompatActivity {@Overrideprotected void onCreate(@Nullable Bundle savedInstanceState) {super.onCreate(savedInstanceState);getWindow().setEnterTransition(new Fade());getWindow().setExitTransition(new Fade());setContentView(R.layout.activity_c);}
}

同样，就是跳转的 Activity 在 onCreate 方法中设置 transition 为 Fade 即可，只不过这里要最好要同时设置 Enter 和 Exit 。

Share
Share 是最复杂的一种转场方式，在跳转的两个 Activity 之间，如果有相同的 View 元素，那么，两个元素就可以设置成共享状态，在跳转时，这个 View 就会从第一个 Activity 的显示状态过渡到第二个 Activity 的显示状态，给用户的感觉仿佛是两个 Activity 共享一个 View 。

效果图
布局文件

<!-- 首先，两个Activity共享的元素需要设置相同的transitionName： android:transitionName="fab" -->
<Buttonandroid:id="@+id/fab_button"android:layout_width="56dp"android:layout_height="56dp"android:background="@mipmap/ic_launcher"android:elevation="5dp"android:onClick="explode"android:transitionName="fab" /><Buttonandroid:id="@+id/fab_button"android:layout_width="160dp"android:layout_height="160dp"android:layout_alignParentEnd="true"android:layout_below="@id/holder_view"android:layout_marginTop="-80dp"android:background="@mipmap/ic_launcher"android:elevation="5dp"android:transitionName="fab" />

实例代码

// 跳转时，要为每一个共享的view设置对应的transitionName
View fab = findViewById(R.id.fab_button);
View txName = findViewById(R.id.tx_user_name);
intent = new Intent(this, CActivity.class);
startActivity(intent, ActivityOptions.makeSceneTransitionAnimation(this,Pair.create(view, "share"),Pair.create(fab, "fab"),Pair.create(txName, "user_name")).toBundle());

// 跳转的Activity在onCreate方法中开启Transition模式
public class CActivity extends AppCompatActivity {@Overrideprotected void onCreate(@Nullable Bundle savedInstanceState) {super.onCreate(savedInstanceState);getWindow().requestFeature(Window.FEATURE_CONTENT_TRANSITIONS);setContentView(R.layout.activity_c);}
}