Activity跳转的过渡动画全解析

ActivityOptionsCompat

前因:

//在旧版本里面，我们切换Activity大多都是使用的apioverridePendingTransition(enterAnim, exitAnim);但是,这个效果显得太过生硬

引出:

google在V4 support包内提供了一个向下兼容的类，供我们使用，ActivityOptionsCompat，我们可以使用这个类开发出很绚丽的跳转效果。

API:

//类似于overridePendingTransition的功能，为两个activity设置了过渡动画;ActivityOptionsCompat.makeCustomAnimation (Context context, int enterResId, int exitResId)//新的activity产生一个缩放的动画,后两个参数是被打开的act的初始宽度和高度ActivityOptionsCompat.makeScaleUpAnimation(View source, int startX,int startY, int width,int height)//利用传入了view开启一个缩放动画ActivityOptionsCompat.makeThumbnailScaleUpAnimation(View source,Bitmap thumbnail, int startX, int startY)//共享元素动画,api>=21可以使用

Demo:

public class MainActivity extends AppCompatActivity {    @BindView(R.id.old)    Button mOld;    @BindView(R.id.btn_custom)    Button mBtnCustom;    @BindView(R.id.btn_scaleup)    Button mBtnScaleup;    @BindView(R.id.btn_ThumbnailScaleUp)    Button mBtnThumbnailScaleUp;    @BindView(R.id.btn_Scene)    Button mBtnScene;    @BindView(R.id.btn_Scenes)    Button mBtnScenes;    @BindView(R.id.imageView_right)    ImageView mImageViewRight;    @BindView(R.id.imageView_left)    ImageView mImageViewLeft;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        if (Build.VERSION.SDK_INT >= 21) {            //共享元素动画只支持5.0以后的版本            getWindow().requestFeature(Window.FEATURE_CONTENT_TRANSITIONS);        }        setContentView(R.layout.activity_main);        ButterKnife.bind(this);    }    @OnClick({R.id.old, R.id.btn_custom, R.id.btn_scaleup, R.id.btn_ThumbnailScaleUp, R.id.btn_Scene, R.id.btn_Scenes})    public void onClick(View view) {        switch (view.getId()) {            case R.id.old: {                Intent intent = new Intent(this, TargetActivity.class);                startActivity(intent);                overridePendingTransition(R.anim.in, R.anim.out);            }            break;            case R.id.btn_custom: {                ActivityOptionsCompat activityOptionsCompat = ActivityOptionsCompat.makeCustomAnimation(this, R.anim.in, R.anim.out);                Intent intent = new Intent(this, TargetActivity.class);                ActivityCompat.startActivity(this, intent, activityOptionsCompat.toBundle());            }            break;            case R.id.btn_scaleup: {                ActivityOptionsCompat activityOptionsCompat = ActivityOptionsCompat.makeScaleUpAnimation(mBtnScaleup, 0, 0, 200, 200);                Intent intent = new Intent(this, TargetActivity.class);                ActivityCompat.startActivity(this, intent, activityOptionsCompat.toBundle());            }            break;            case R.id.btn_ThumbnailScaleUp: {                Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.mipmap.ic_launcher_round);                ActivityOptionsCompat activityOptionsCompat = ActivityOptionsCompat.makeThumbnailScaleUpAnimation(mBtnThumbnailScaleUp, bitmap, 0, 0);                Intent intent = new Intent(this, TargetActivity.class);                ActivityCompat.startActivity(this, intent, activityOptionsCompat.toBundle());            }            break;            case R.id.btn_Scene: {                //                ActivityOptionsCompat activityOptionsCompat = ActivityOptionsCompat                .makeSceneTransitionAnimation(this, mImageViewLeft, "element");                Intent intent = new Intent(this, TargetActivity.class);                ActivityCompat.startActivity(this, intent, activityOptionsCompat.toBundle());            }            break;            case R.id.btn_Scenes: {                Pair<View, String> element = Pair.create((View)mImageViewLeft, "element");                Pair<View, String> element2 = Pair.create((View)mImageViewRight, "element2");                ActivityOptionsCompat activityOptionsCompat = ActivityOptionsCompat                .makeSceneTransitionAnimation(this, element, element2);                Intent intent = new Intent(this, TargetActivity.class);                ActivityCompat.startActivity(this, intent, activityOptionsCompat.toBundle());            }            break;        }    }}

被打开的activity的布局

<?xml version="1.0" encoding="utf-8"?><android.support.constraint.ConstraintLayout    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"    tools:context="com.junx.activitytransitionanimation.TargetActivity">    <Button        //类型不重要,只要android:transitionName相同就会被关联到一起        android:transitionName="element2"        android:layout_width="wrap_content"        android:layout_height="wrap_content" android:layout_marginBottom="8dp"        android:layout_marginLeft="8dp"        android:layout_marginRight="8dp"        android:layout_marginTop="8dp"         app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintLeft_toLeftOf="parent"        app:layout_constraintRight_toRightOf="parent"        app:layout_constraintTop_toTopOf="parent" app:layout_constraintVertical_bias="0.13"        app:srcCompat="@mipmap/ic_launcher_round"/>    <Button        android:layout_width="200dp" android:layout_height="200dp"        android:layout_marginBottom="8dp"        android:layout_marginLeft="8dp"        android:layout_marginRight="8dp" android:layout_marginTop="8dp"        android:transitionName="element" app:layout_constraintBottom_toBottomOf="parent"        app:layout_constraintHorizontal_bias="0.5" app:layout_constraintLeft_toLeftOf="parent"        app:layout_constraintRight_toRightOf="parent" app:layout_constraintTop_toTopOf="parent"        app:srcCompat="@mipmap/ic_launcher_round"/></android.support.constraint.ConstraintLayout>

Scene动画

什么叫做场景(Scene)？场景就是一个布局或部分布局，我们可以使用场景来创建动画。google 在旧版本的系统中提供了View Animation与Propery Animator,两套动画系统能够使开发者方便的完成动画的显示，但是为了实现一些效果，开发者仍需要编写大量的代码进行完成。因为我们常常使用的位移、隐藏等动画，在5.0版本以后，开发人员只要写好布局，动画系统会自动的把相应的动画显示出来，大大的减少重复的代码开发的工作量。

场景需要api19(android4.4)以上版本才能使用

demo

布局一

<android.support.constraint.ConstraintLayout    android:id="@+id/layout"    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"    tools:context="com.junx.activitytransitionanimation.Transition.Scene.SceneActivity">    <ImageView        android:id="@+id/imageView4"        android:layout_width="50dp"        android:layout_height="50dp"        android:layout_marginBottom="0dp"        android:src="@mipmap/ic_launcher_round"        app:layout_constraintBottom_toTopOf="@+id/imageView3"        app:layout_constraintTop_toTopOf="parent"        app:layout_constraintVertical_bias="1.0"        android:layout_marginLeft="8dp" app:layout_constraintLeft_toLeftOf="parent"        app:layout_constraintRight_toLeftOf="@+id/imageView3" android:layout_marginRight="0dp"        app:layout_constraintHorizontal_bias="1.0"/>    <ImageView        android:src="@mipmap/ic_launcher_round"        android:id="@+id/button"        android:layout_width="50dp"        android:layout_height="50dp"        app:layout_constraintRight_toRightOf="parent"        app:layout_constraintTop_toTopOf="parent"        android:layout_marginBottom="0dp" app:layout_constraintBottom_toTopOf="@+id/imageView3"        app:layout_constraintVertical_bias="1.0"        app:layout_constraintLeft_toRightOf="@+id/imageView3" android:layout_marginLeft="0dp"        app:layout_constraintHorizontal_bias="0.0"/>    <ImageView        android:id="@+id/imageView3"        android:layout_width="50dp"        android:layout_height="50dp"        android:layout_marginBottom="0dp"        android:src="@mipmap/ic_launcher_round" app:layout_constraintBottom_toTopOf="@+id/imageView2"        app:layout_constraintLeft_toLeftOf="parent"        app:layout_constraintRight_toRightOf="parent" app:layout_constraintTop_toTopOf="parent"        app:layout_constraintVertical_bias="1.0"/>    <ImageView        android:id="@+id/imageView2"        android:layout_width="50dp"        android:layout_height="50dp"        android:layout_marginBottom="0dp"        android:src="@mipmap/ic_launcher_round" app:layout_constraintBottom_toTopOf="@+id/imageView"        app:layout_constraintLeft_toLeftOf="parent"        app:layout_constraintRight_toRightOf="parent" app:layout_constraintTop_toTopOf="parent"        app:layout_constraintVertical_bias="1.0"/>    <ImageView        android:id="@+id/imageView"        android:layout_width="50dp"        android:layout_height="50dp"        android:src="@mipmap/ic_launcher_round"        app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintLeft_toLeftOf="parent"        app:layout_constraintRight_toRightOf="parent" app:layout_constraintTop_toTopOf="parent"        app:layout_constraintVertical_bias="1.0"/>    <Button        android:id="@+id/btn"        android:onClick="go"        android:layout_width="wrap_content"        android:layout_height="wrap_content" android:text="Button"        app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintLeft_toLeftOf="parent"        app:layout_constraintRight_toRightOf="parent" app:layout_constraintTop_toTopOf="parent"/></android.support.constraint.ConstraintLayout>

布局二,跟布局一的区别只有控件的位置和大小

<android.support.constraint.ConstraintLayout    android:id="@+id/layout"    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"    tools:context="com.junx.activitytransitionanimation.Transition.Scene.SceneActivity">    <ImageView        android:id="@+id/imageView4"        android:layout_width="50dp"        android:layout_height="50dp"        android:layout_marginBottom="0dp"        android:src="@mipmap/ic_launcher_round"        app:layout_constraintBottom_toTopOf="@+id/imageView3"        app:layout_constraintTop_toTopOf="parent"        app:layout_constraintVertical_bias="1.0"        android:layout_marginLeft="8dp" app:layout_constraintLeft_toLeftOf="parent"        app:layout_constraintRight_toLeftOf="@+id/imageView3" android:layout_marginRight="0dp"        app:layout_constraintHorizontal_bias="0.0"/>    <ImageView        android:src="@mipmap/ic_launcher_round"        android:id="@+id/button"        android:layout_width="50dp"        android:layout_height="50dp"        app:layout_constraintRight_toRightOf="parent"        app:layout_constraintTop_toTopOf="parent"        android:layout_marginBottom="0dp" app:layout_constraintBottom_toTopOf="@+id/imageView3"        app:layout_constraintVertical_bias="1.0"        app:layout_constraintLeft_toRightOf="@+id/imageView3" android:layout_marginLeft="0dp"        app:layout_constraintHorizontal_bias="1.0"/>    <ImageView        android:id="@+id/imageView3"        android:layout_width="50dp"        android:layout_height="50dp"        android:src="@mipmap/ic_launcher_round"        app:layout_constraintLeft_toLeftOf="parent"        app:layout_constraintRight_toRightOf="parent" app:layout_constraintTop_toTopOf="parent"        android:layout_marginBottom="8dp" app:layout_constraintBottom_toTopOf="@+id/button2"/>    <ImageView        android:id="@+id/imageView2"        android:layout_width="50dp"        android:layout_height="50dp"        android:src="@mipmap/ic_launcher_round"        app:layout_constraintLeft_toLeftOf="parent"        app:layout_constraintRight_toRightOf="parent" app:layout_constraintTop_toTopOf="parent"        app:layout_constraintHorizontal_bias="0.0" app:layout_constraintBottom_toBottomOf="parent"        android:layout_marginBottom="0dp" app:layout_constraintVertical_bias="1.0"/>    <ImageView        android:id="@+id/imageView"        android:layout_width="50dp"        android:layout_height="50dp"        android:src="@mipmap/ic_launcher_round"        app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintLeft_toLeftOf="parent"        app:layout_constraintRight_toRightOf="parent" app:layout_constraintTop_toTopOf="parent"        app:layout_constraintVertical_bias="1.0" app:layout_constraintHorizontal_bias="1.0"/>    <Button        android:onClick="go"        android:id="@+id/btn"        android:layout_width="wrap_content"        android:layout_height="wrap_content" android:text="Button"        app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintLeft_toLeftOf="parent"        app:layout_constraintRight_toRightOf="parent" app:layout_constraintTop_toTopOf="parent"/></android.support.constraint.ConstraintLayout>

代码

public class SceneActivity extends AppCompatActivity {    @BindView(R.id.btn)    Button mButton;    @BindView(R.id.layout)    ConstraintLayout mLayout;    Scene mScene1;    Scene mScene2;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        getWindow().requestFeature(Window.FEATURE_CONTENT_TRANSITIONS);        setContentView(R.layout.activity_scene);        ButterKnife.bind(this);        //通过该方法获取布局中的scene,第一个参数是根布局        mScene1 = Scene.getSceneForLayout(mLayout, R.layout.activity_scene2, this);        mScene2 = Scene.getSceneForLayout(mLayout, R.layout.activity_scene, this);    }    int x = 0;    public void go(View view) {        if (x % 2 == 0) {            //第二个参数是动画类型,默认是淡入淡出效果            TransitionManager.go(mScene1,new Slide());        } else {            TransitionManager.go(mScene2, new ChangeBounds());        }        x++;    }}

修改参数的动画效果

    public void go(View view) {    //开始动画        TransitionManager.beginDelayedTransition(mLayout);        //参数改变后会自动生成动画        mButton.setHeight(300);        mButton.setWidth(300);    }

//recyclerview也可以                TransitionManager.beginDelayedTransition(recyclerView, explode);                recyclerView.setAdapter(null);

Scene动画也是支持页面跳转der~~~

public class TransitionAndActivity extends AppCompatActivity {    @Override    protected void onCreate(@Nullable Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        if (Build.VERSION.SDK_INT >= 21) {            //1 跳转使用的transition            Explode explode = new Explode();            //            Slide slide = new Slide(Gravity.RIGHT);            //            slide.setDuration(2000);            //让我们的页面支持transition            TransitionInflater inflater = TransitionInflater.from(this);            Transition transition = inflater.inflateTransition(R.transition.over);            getWindow().requestFeature(Window.FEATURE_CONTENT_TRANSITIONS);            //页面退出的tristion            getWindow().setExitTransition(explode);        }        setContentView(R.layout.activity_and_transition);    }    public void explose(View view) {        Intent intent = new Intent();        intent.setClass(this, TestExploseActivity.class);//        startActivity(intent);        startActivity(intent, ActivityOptions.makeSceneTransitionAnimation(this).toBundle());    }}

api:

Transition 与 Activity的跳转动画有以下几个setEnterTransition 进入的动画setExitTransition 退出的动画setReturnTransition 返回的动画setReenterTransition 重入的动画