Android开发之Activity转场动画

引子

相信开发过iOS的程序员都知道iOS ViewController之间的跳转动画非常多，很酷对不对？这让开发Android的羡慕不已，曾几何时，Android中的Activity跳转是何等的生硬，But，在Android 5.0以后，Google也为Activity的转场设计了更加友好的动画效果。

转场动画(Activity Transition)基本介绍

Android 5.0 提供了三种Transition类型
进入：决定Activity中的所有的视图怎么进入屏幕。
退出：决定一个Activity中的所有视图怎么退出屏幕。
共享元素：决定两个activities之间的过渡，怎么共享(它们)的视图。

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

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

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

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

实践

1.准备好2个Activity的布局，弄几个按钮，分别对应几种转场动画。

activity_one.xml ActivityOne的布局，其中最后一个Button是为了做共享元素动画

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#ff0000"
android:gravity="center"
android:orientation="vertical"
tools:context=".MainActivity"> <Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:onClick="explode"
android:text="explode" /> <Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:onClick="slide"
android:text="slide" /> <Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:onClick="fade"
android:text="fade" /> <Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:onClick="share"
android:text="share" /> <Button
android:id="@+id/share"
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_gravity="center_horizontal"
android:background="@drawable/football" />
</LinearLayout>

activity_two.xml ActivityTwo的布局，里面的Button与第一个布局中的最后一个Button呼应，只是大小不一样

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#0000ff"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context=".MainActivity"> <Button
android:id="@+id/share"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:transitionName="shareTransition"
android:layout_gravity="center_horizontal"
android:background="@drawable/football"
android:layout_centerInParent="true"
android:onClick="share" />
</RelativeLayout>


2.ActivityOne 与 ActivityTwo

ActivityOne.java

public class ActivityOne extends Activity { private Intent intent; @Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_one);
intent = new Intent(ActivityOne.this, ActivityTwo.class);
} public void explode(View view) { intent.putExtra("transition", "explode");
//将原先的跳转改成如下方式
startActivity(intent, ActivityOptions.makeSceneTransitionAnimation(ActivityOne.this).toBundle()); } public void slide(View view) { intent.putExtra("transition", "slide");
//将原先的跳转改成如下方式
startActivity(intent, ActivityOptions.makeSceneTransitionAnimation(ActivityOne.this).toBundle()); } public void fade(View view) { intent.putExtra("transition", "fade");
//将原先的跳转改成如下方式
startActivity(intent, ActivityOptions.makeSceneTransitionAnimation(ActivityOne.this).toBundle()); } public void share(View view) { //共享元素
Button share = (Button) findViewById(R.id.share);
intent.putExtra("transition", "share"); //将原先的跳转改成如下方式，注意这里面的第三个参数决定了ActivityTwo 布局中的android:transitionName的值，它们要保持一致
startActivity(intent, ActivityOptions.makeSceneTransitionAnimation(ActivityOne.this, share, "shareTransition").toBundle()); }}

ActivityTwo.java

public class ActivityTwo extends Activity { @Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState); // 允许使用transitions
getWindow().requestFeature(Window.FEATURE_CONTENT_TRANSITIONS); String transition = getIntent().getStringExtra("transition"); switch (transition) {
case "explode":
// 设置进入时进入动画
Explode explode = new Explode();
explode.setDuration(1000);
getWindow().setEnterTransition(explode); break; case "slide":
Slide slide = new Slide();
slide.setDuration(1000);
getWindow().setEnterTransition(slide); break; case "fade":
Fade fade = new Fade();
fade.setDuration(1000);
getWindow().setEnterTransition(fade); break; case "share":
break;
} // 所有操作在设置内容视图之前
setContentView(R.layout.activity_two); }}


说明：
getWindow().setEnterTransition()是进入动画，与之对应的getWindow().setExitTransition()就是退出转场动画，用法和上面一样，就不重复了

3.测试效果
explode

 

explode.gif

slide

 

slide.gif

fade

 

fade.gif

share

 

share.gif

问题

explode效果感觉并没有从中间进，而是从上面下来的，这是为什么呢？欢迎知道的告知，感谢。