项目需求讨论 — 用Transition做一个漂亮的登录界面，android开发者周报

飞奔的炮台

大家也可以看看下面的相关文章链接：
[Activity和Fragment Transition介绍]( )
[深入理解Content Transition]( )
[深入理解共享元素变换（Shared Element Transition）-上]( )

正文
我们先准备第一个Activity，界面如下：

Activity 1
第一步：fab按钮的移动：
我们让那个按钮"+"能移动到顶部：

我们由前面的demo说明已经知道了，启动第二个Activity，我们我们先让第二个Activity的界面如下所示：

我们设置第二个Activity的主题为：
<style name="Translucent" parent="Theme.AppCompat.Light.NoActionBar">
//第一个activity的状态栏颜色为#0288D1
<item name="colorPrimaryDark">#0288D1</item>
//第二个activity的背景为透明，
//这样可以看得到第一个Activity的界面
<item name="android:windowBackground">@android:color/transparent</item>
<item name="android:windowIsTranslucent">true</item>
</style>
没错，我们在第二个界面先写上一个按钮"X"，这样我们启动第二个Activity的时候就盖在了第一个Activity的上面，同时这个fab按钮也有了动画的效果：

代码很简单，只要让第一个Activity的按钮的android:transitionName与第二个Activity的按钮的android:transitionName一样就可以。我们称这个为共享元素。
FloatingActionButton btn = findViewById(R.id.fab);;
ActivityOptionsCompat optionsCompat
= ActivityOptionsCompat.makeSceneTransitionAnimation(LoginMainActivity.this,btn,btn.getTransitionName());
startActivity(new Intent(LoginMainActivity.this,RegisterMainActivity.class),optionsCompat.toBundle());
然后通过ActivityOptionsCompat来记录当前这个Activity的这个fab按钮的状态。然后在startActivity的时候，通过optionsCompat.toBundle()把内容带到了第二个Activity中。第二个Activity就会让现在的相同trasitionName的fab按钮，以传过来的第一个Activity的按钮相同位置的为起始点，然后通过动画到了最终的地方。（所以动画是在第二个Activity中完成的，只是按钮的起始状态是以第一个Activity传过来的按钮的状态信息相同，然后到最终用户设置的位置。）

我们可以看到，共享元素变换并不是真正实现了两个activity或者Fragment之间元素的共享，实际上我们看到的几乎所有变换效果中（不管是B进入还是B返回A）,共享元素都是在B中绘制出来的。Framework没有真正试图将A中的某个元素传递给B，而是采用了不同的方法来达到相同的视觉效果。A传递给B的是共享元素的状态信息。B利用这些信息来初始化共享View元素，让它们的位置、大小、外观与在A中的时候完全一致。当变换开始的时候，B中除了共享元素之外，所有的其他元素都是不可见的。随着动画的进行，framework 逐渐将B的activity窗口显示出来，当动画完成，B的窗口才完全可见。

并且其实动画是绘制在ViewOverlay上面，可以看看这篇文章：[ViewOverlay与animation介绍]( )
第二步让fab按钮通过曲线路径变化：
我们直接不做任何处理，默认是fab按钮的位置变化是直线。我们更希望是：

我们可以设置共享元素的进入动画：

<?xml version="1.0" encoding="utf-8"?><transitionSet
xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="@android:interpolator/linear_out_slow_in"br/>@Override

[Hbase] 项目需求讨论 — 用Transition做一个漂亮的登录界面，android开发者周报

飞奔的炮台 LV3