前言
转场动画在交互上非常有优势，本文从转场动画的使用场景和方法起，最后是实现掘金中用户头像的转场动画。
转场动画适用的版本
Activity transition APIs 只有在Android 5.0（API 21）或者更高的版本上能使用。所以在使用之前需要进行版本判断。当版本API 大于21时使用转场动画，否则不使用。
// Check if we're running on Android 5.0 or higherif (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {// Apply activity transition} else {// Swap without transition}复制代码
还需要配置允许window content transitions 。也就是字段：android:windowActivityTransitions。可以在activity的style文件中进行如下配置。
<style name="BaseAppTheme" parent="android:Theme.Material"><!-- enable window content transitions --><item name="android:windowActivityTransitions">true</item></style>复制代码
也可以在代码中动态的配置如下：
// inside your activity (if you did not enable transitions in your theme)getWindow().requestFeature(Window.FEATURE_CONTENT_TRANSITIONS);// set an exit transitiongetWindow().setExitTransition(new Explode());复制代码
转场动画的使用场景
Android中的转场动画主要有三种场景：
1、在两个activity之间切换时界面的过渡效果。
2、两个activity或者Fragment之间shared elements 切换效果。
3、同一个activity中的view的动画效果。下面分别详细的介绍这三种方式。
1、两个activity之间切换时界面的过渡效果
两个activity切换时的，有两个动画，如下图，从activity A 切换到activity B时，会有A的退出动画和B的进入动画。
activity主要的进场和出场方法：Window.setEnterTransition() 设置进场动画Window.setExitTransition() 设置出场动画Window().setReturnTransition() 设置返回activity时动画Window().setReenterTransition() 设置重新进入时动画 如下图：
在Google提供的android.transition.Transition包中从activity A切换到activity B有三种方式：Explode,Slide和Fade。1、Explode：从屏幕的中间进入或退出。2、Slide：从屏幕的一边向另一边进入或退出。3、Fade：通过改变透明度来出现或消失。
效果如下图所示：
上面的三种动画有两种实现方式：1、通过xml声明。在res目录下新建transition文件夹在transition文件夹下新建activity_fade.xml文件。 res/transition/activity_fade.xml
<?xml version="1.0" encoding="utf-8"?><fade xmlns:android="/apk/res/"android:duration="1000"/>复制代码
res/transition/activity_slide.xml
<?xml version="1.0" encoding="utf-8"?><slide xmlns:android="/apk/res/"android:duration="1000"/>复制代码
ActivityA的代码如下：因为从ActivityA切换到ActivityB,所以ActivityA是退出动画使用的方法是：getWindow().setExitTransition(slide);
@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_transition);setupWindowAnimations();}private void setupWindowAnimations() {Slide slide = TransitionInflater.from(this).inflateTransition(R.transition.activity_slide);getWindow().setExitTransition(slide);}复制代码
ActivityB是进入动画使用方法：getWindow().setEnterTransition(fade);，ActivityB的代码如下
@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_transition);setupWindowAnimations();}private void setupWindowAnimations() {Fade fade = TransitionInflater.from(this).inflateTransition(R.transition.activity_fade);getWindow().setEnterTransition(fade);}复制代码
2、代码方式实现。ActivityA代码如下：实现一个Slide对象并且设置时间为1000毫秒。
@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_transition);setupWindowAnimations();}private void setupWindowAnimations() {Slide slide = new Slide();slide.setDuration(1000);getWindow().setExitTransition(slide);}复制代码
ActivityB中实现一个Fide对象并且设置时间为1000毫秒。
@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_transition);setupWindowAnimations();}private void setupWindowAnimations() {Fade fade = new Fade();fade.setDuration(1000);getWindow().setEnterTransition(fade);}复制代码
上面两种方式最终的实现效果如下：
上面的动画过程分析： 1、Activity A 启动Activity B 2、Transition FrameWork层得到Activity A的退出动画slide并且应用到全部可见的view中。 3、Transition FrameWork层得到Activity B的进入动画fade并且应用到全部可见的view中。 4、当从Activity B返回到Activity A的时候会分别执行Enter和Exit相反的动画（没有设置returnTransition，和reenterTransition时）。
ReturnTransition & ReenterTransitionReturn 和Reenter Transition是enter 和exit相反的过程。当从Activity A进入到Activity B时会执行 exit和enter当从Activity B退回到Activity A时会执行Return Transition和Reenter Transition。
EnterTransition <--> ReturnTransition
ExitTransition <--> ReenterTransition 如果没有定义Return 或者 Reenter，那么Android会反向执行Enter和Exit变换。如下图从Activity B退回到Activity A：
给Activity A增加了ReturnTransition的代码如下：
@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_transition);setupWindowAnimations();}private void setupWindowAnimations() {Fade fade = new Fade();fade.setDuration(1000);getWindow().setEnterTransition(fade);Slide slide = new Slide();slide.setDuration(1000);getWindow().setReturnTransition(slide); }复制代码
增加了返回动画和没有增加返回动画的对比效果如下：
2、 Shared elements between Activities
Shared elements转换确定两个Activity之间共享的视图如何在这两个Activity之间转换。例如，如果两个Activity在不同的位置和大小中具有相同的图像，则通过Shared elements转换会在这两个Activity之间平滑地转换和缩放图像。主要方法
如下图，当从Activity A跳转到Activity B时，ActivityA， ActivityB中的两个item有动画变化，但是要注意的时ActivityA ，ActivityB中的item是两个独立的item。
shared elements转换包括以下几种：
changeBounds 改变目标布局中view的边界changeClipBounds 裁剪目标布局中view的边界changeTransform 实现旋转或者缩放动画changeImageTransform 实现目标布局中ImageView的旋转或者缩放动画
实现上面的效果需要三个步骤：1、 Enable Window Content Transition设置styles.xml文件，允许windowContentTransitions如下： value/style.xml
<style name="MaterialAnimations" parent="@style/Theme.AppCompat.Light.NoActionBar">...<item name="android:windowContentTransitions">true</item...</style>复制代码
2、定义一个相同的transition名称分别在Activity A 和Activity B的布局文件中定义item，这两个item的属性可以不一样，但是android:transitionName必须一样。如下： layout/activity_a.xml
<ImageViewandroid:id="@+id/small_blue_icon"style="@style/MaterialAnimations.Icon.Small"android:src="@drawable/circle"android:transitionName="@string/blue_name" />复制代码
layout/activity_b.xml
<ImageViewandroid:id="@+id/big_blue_icon"style="@style/MaterialAnimations.Icon.Big"android:src="@drawable/circle"android:transitionName="@string/blue_name" />复制代码
3、在activity中启动shared element使用ActivityOptions.makeSceneTransitionAnimation()方法 ActivityA.java
blueIconImageView.setOnClickListener(new View.OnClickListener() {@Overridepublic void onClick(View v) {Intent i = new Intent(MainActivity.this, SharedElementActivity.class);View sharedView = blueIconImageView;String transitionName = getString(R.string.blue_name);ActivityOptions transitionActivityOptions = ActivityOptions.makeSceneTransitionAnimation(MainActivity.this, sharedView, transitionName);startActivity(i, transitionActivityOptions.toBundle());}});复制代码
效果如下：
未完待续.......
如果觉得《高逼格Android转场动画 轻松实现掘金用户头像转场动画》对你有帮助，请点赞、收藏，并留下你的观点哦！
