android开发--activity间的转场动画示例

先上一个效果图：

如何所示的动画效果示意图，经常在某些app上会遇到吧，这就是activity间的转场动画，下面贴出代码：

看图就知道这里有两个activity，以及对应的两个布局文件，第一个布局文件及activity如下：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    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=".activity.FirstActivity">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <ImageView
            android:id="@+id/iv1"
            android:layout_width="0dp"
            android:layout_height="160dp"
            android:layout_weight="1"
            android:background="?attr/selectableItemBackground"
            android:onClick="onClick"
            android:src="@drawable/pic1" />

        <ImageView
            android:id="@+id/iv2"
            android:layout_width="0dp"
            android:layout_height="160dp"
            android:layout_weight="1"
            android:background="?attr/selectableItemBackground"
            android:onClick="onClick"
            android:src="@drawable/pic2"/>
    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <ImageView
            android:id="@+id/iv3"
            android:layout_width="0dp"
            android:layout_height="160dp"
            android:layout_weight="1"
            android:background="?attr/selectableItemBackground"
            android:onClick="onClick"
            android:src="@drawable/pic3" />

        <ImageView
            android:id="@+id/iv4"
            android:layout_width="0dp"
            android:layout_height="160dp"
            android:layout_weight="1"
            android:background="?attr/selectableItemBackground"
            android:onClick="onClick"
            android:src="@drawable/pic4" />

    </LinearLayout>

</LinearLayout>

import android.app.ActivityOptions;
import android.content.Intent;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.transition.Explode;
import android.transition.Transition;
import android.util.Pair;
import android.view.View;

import com.example.animation.R;

public class FirstActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_first);
    }

    public void onClick(View view) {
        int resId = -1;
        switch (view.getId()) {
            case R.id.iv1:
                resId = R.drawable.pic1;
                break;
            case R.id.iv2:
                resId = R.drawable.pic2;
                break;
            case R.id.iv3:
                resId = R.drawable.pic3;
                break;
            case R.id.iv4:
                resId = R.drawable.pic4;
                break;
        }
        Intent intent = new Intent(this,SecondActivity.class);
        intent.putExtra("resId",resId);
        Transition transition = new Explode();
        transition.excludeTarget(android.R.id.statusBarBackground,true);

        getWindow().setEnterTransition(transition);
        getWindow().setExitTransition(transition);
        getWindow().setReenterTransition(transition);

        Pair<View,String> shareElement = Pair.create(view,"img");
        ActivityOptions options = ActivityOptions.makeSceneTransitionAnimation(this,shareElement);
        startActivity(intent,options.toBundle());
    }
}

布局也不复杂，就是四张图，当点击对应图的时候需要设置resId，这个resId会传到下一个activity中用于把对应的图片展示出来，excludeTarget()方法用于把状态栏排除在动画效果之外，就是让状态栏固定，不跟着整个画面一起变动；Pair的那行代码就是设置共享元素，让点击的那张图和对应放大了的图之间的过渡有个视觉连续性

接下来是第二个activity和布局文件：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    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=".activity.SecondActivity">

    <ImageView
        android:id="@+id/iv"
        android:transitionName="img"
        android:layout_centerInParent="true"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

</RelativeLayout>

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.transition.Explode;
import android.transition.Transition;
import android.widget.ImageView;

import com.example.animation.R;

public class SecondActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_second);
        int resId = getIntent().getExtras().getInt("resId");
        ImageView iv = (ImageView) findViewById(R.id.iv);
        iv.setImageResource(resId);

        Transition transition = new Explode();
        transition.excludeTarget(android.R.id.statusBarBackground,true);
        getWindow().setEnterTransition(transition);
        getWindow().setExitTransition(transition);
    }

}

代码很简单，没啥需要说的，就这么轻轻松松的就实现了这个转场动画的效果