Android Transition 页面过度动画

前言

对于Activity的过度动画都很熟悉了,大多数都是直接使用下面的函数,指定退出的Activity和进入的Activity动画

overridePendingTransition(enterAnim, exitAnim);

这种动画很简单,旋转平移翻转等,这些操作,而且是这个界面的操作。下面介绍一种更加美观的Activity过度动画

Android在新的sdk中给我们提供了另外一种Activity的过度动画——ActivityOptions。并且提供了兼容包——ActivityOptionsCompat。

一、 简介

ActivityOptionsCompat是一个静态类,提供了5个方法,如下:

  1. ActivityOptionsCompat.makeCustomAnimation(Context context, int enterResId, int exitResId)

  2. ActivityOptionsCompat.makeScaleUpAnimation(View source,int startX, int startY, int startWidth, int startHeight)

  3. ActivityOptionsCompat.makeThumbnailScaleUpAnimation(View source,Bitmap thumbnail, int startX, int startY)

  4. ActivityOptionsCompat.makeSceneTransitionAnimation(Activity activity, View sharedElement, String sharedElementName)

  5. ActivityOptionsCompat.makeSceneTransitionAnimation(Activity activity,Pair

二、函数的使用

这里对这些函数的使用进行讲解:

2.1、makeCustomAnimation

makeCustomAnimation和overridePendingTransition非常类似,在实现效果上和overridePendingTransition也是相同的。

在界面A启动界面B
Activity A ——> Activity B

Activity A 中的代码:

public void click(View view) {
      ActivityOptionsCompat compat = ActivityOptionsCompat.makeCustomAnimation(this,
              R.anim.translate_in, R.anim.translate_none);
      ActivityCompat.startActivity(this,
              new Intent(this, Activity2.class), compat.toBundle());
}

三个参数,第一个是指当前activity,第二个和第三个参数分别是进入动画和退出动画,

ActivityCompat.startActivity()最后一个参数我们使用compat.toBundle。

Activity B 中的代码:

    @Override
    public void onBackPressed() {
        super.onBackPressed();
        ActivityCompat.finishAfterTransition(this);
    }

退出的时候调用ActivityCompat.finishAfterTransition(this)进行退出动画。

2.2、makeScaleUpAnimation 比例放大动画

效果就是不断的 ,放大一个view,进而进行activity的过度,

private void launch(View view) {
    ActivityOptionsCompat compat = ActivityOptionsCompat.makeScaleUpAnimation(view,
            view.getWidth() / 2, view.getHeight() / 2, 0, 0);
    ActivityCompat.startActivity(this, new Intent(this, Activity2.class),
            compat.toBundle());
}

第1个参数是scale哪个view的大小,
第2和3个参数是以view为基点,从哪开始动画,这里是该view的中心,
第4和5参数是新的activity,从多大开始放大,这里是从无到有的过程。

2.3、makeThumbnailScaleUpAnimation

该方法和上面的makeScaleUpAnimation非常相似,只不过,这里是通过放大一个图片,最后过度到一个新的activity,

第2个参数是指那个图片要放大,
3和4参数表示从哪开始动画。

接下来我们要进入两个稍微复杂点的动画,这两个的方法名相同,都是makeSceneTransitionAnimation。

2.4、makeSceneTransitionAnimation 单个view的过度动画

什么是scene? 就是场景动画,在这里就体现在两个activity中的某些view协同去完成过度动画,先来看一个效果吧

Activity A ——> Activity B

Activity A中的代码

private void launch(View view) {
    ActivityOptionsCompat compat =
            ActivityOptionsCompat.makeSceneTransitionAnimation(this,
                    view, getString(R.string.transition));
    ActivityCompat.startActivity(this, new Intent(this,
            Activity2.class), compat.toBundle());
}

第一个参数:当前的activity
第二个参数:对这个view进行动画,来多过度到Activity B
第三个参数:view上指定的动画名称

因为要协作动画的两个view在不同的activity中,为了让这两个view产生关联,在xml配置项android:transitionName用来指定协作的view

<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"
    tools:context=".MainActivity">

    <ImageView
        android:id="@+id/image"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:scaleType="fitXY"
        android:src="@drawable/show"
        android:transitionName="@string/image" />

</RelativeLayout>

看ImageView的android:transitionName属性,为”@string/image”

Activity B中的代码

<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"
    tools:context=".MainActivity">

    <ImageView
        android:id="@+id/image"
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:scaleType="fitXY"
        android:src="@drawable/show"
        android:transitionName="@string/image" />

</RelativeLayout>

也有一个android:transitionName属性,为”@string/image”的view

在makeSceneTransitionAnimation 的第三个参数是getString(R.string.transition)。这样这两个view就可以进行过渡动画了

2.5、makeSceneTransitionAnimation 多个view的协作

既然能指定一个view来进行协作,那肯定也能指定多个view了,来看看效果,

Activity A ——> Activity B

Activity A中的代码

private void launch() {
    Pair<View, String> imagePair = Pair.create(mImageView, getString(R.string.image));
    Pair<View, String> textPair = Pair.create(mTextView, getString(R.string.name));

    ActivityOptionsCompat compat = ActivityOptionsCompat
            .makeSceneTransitionAnimation(this, imagePair, textPair);
    ActivityCompat.startActivity(this, new Intent(this, Activity2.class),
            compat.toBundle());
}
  1. 通过Pair.create静态方法创建了两个Pair对象,这里有两个泛型,分别指定为View和String类型,create方法接受两个参数,第一个是参与动画的View,第二个是该View上的transitionName,和前面单一协作的类似,

  2. 用makeSceneTransitionAnimation方法创建一个compat,第二个参数是Pair类型,并且可以传入多个Pair类型的参数

  3. 最后用ActivityCompat.startActivity启动新的activity。

<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"
    tools:context=".MainActivity">

    <TextView
        android:id="@+id/text"
        android:textSize="20sp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:transitionName="@string/name"
        android:text="LOADER!!" />

    <ImageView
        android:id="@+id/image"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_above="@id/text"
        android:layout_centerHorizontal="true"
        android:src="@drawable/show"
        android:transitionName="@string/image" />

</RelativeLayout>

Activity B中的代码

<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"
    tools:context=".MainActivity">

    <ImageView
        android:id="@+id/image"
        android:layout_width="wrap_content"
        android:layout_height="300dp"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:src="@drawable/show"
        android:scaleType="fitXY"
        android:transitionName="@string/image" />

    <TextView
        android:id="@+id/text"
        android:textSize="20sp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/image"
        android:transitionName="@string/name"
        android:layout_centerHorizontal="true"
        android:text="LOADER!!" />

</RelativeLayout>

点击item ,其中多个元素过度到新的Activity

这里写图片描述

想要点击列表中的item,以过度动画的形式打开新的Activity,不能在item的xml布局文件中指定android:transitionName属性

因为屏幕中显示出来的item都会声明这个属性,只有第一个item的android:transitionName生效,就会导致所以的item的过度动画的开始位置,都是在第一个。

Activity A(列表界面) ——> Activity B(详情界面)

需要为不同的item创建不同的过度动画名称,代码如下:
1、在adapter中为每一个item的共享元素创建动画名称

    class ListViewHolder(view: View) : RecyclerView.ViewHolder(view) {
        fun bind(post: PostWithUser, picasso: Picasso) {
            with(post) {
                itemView.tvTitle.text = postTitle
                itemView.tvBody.text = getFormattedPostBody()
                itemView.tvAuthorName.text = userName
                picasso.load(getAvatarPhoto()).into(itemView.ivAvatar)

                //SharedItem transition
                ViewCompat.setTransitionName(itemView.tvTitle, postTitle)
                ViewCompat.setTransitionName(itemView.tvBody, postBody)
                ViewCompat.setTransitionName(itemView.tvAuthorName, userName)
                ViewCompat.setTransitionName(itemView.ivAvatar, getAvatarPhoto())
            }
        }
    }

2、Activity A中的代码

val intent = Intent(context, DetailsActivity::class.java)
intent.putExtra(SELECTED_POST, post)

//Transitions
intent.putExtra(TITLE_TRANSITION_NAME, ViewCompat.getTransitionName(tvTitle))
intent.putExtra(BODY_TRANSITION_NAME, ViewCompat.getTransitionName(tvBody))
intent.putExtra(AUTHOR_TRANSITION_NAME, ViewCompat.getTransitionName(tvAuthorName))
intent.putExtra(AVATAR_TRANSITION_NAME, ViewCompat.getTransitionName(ivAvatar))

val p1 = Pair.create(tvTitle as View, ViewCompat.getTransitionName(tvTitle))
val p2 = Pair.create(tvBody as View, ViewCompat.getTransitionName(tvBody))
val p3 = Pair.create(tvAuthorName as View, ViewCompat.getTransitionName(tvAuthorName))
val p4 = Pair.create(ivAvatar as View, ViewCompat.getTransitionName(ivAvatar))
val options = ActivityOptionsCompat.makeSceneTransitionAnimation(context as Activity,p1,p2,p3,p4)

context.startActivity(intent, options.toBundle())

3、Activity B 中的代码

可以在xml中,指定共享view的动画名称,也可以通过代码来指定,如下,该函数在onCreate中调用

private fun handleTransition(extras: Bundle?) {
     if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
            tvTitle.transitionName = extras?.getString(TITLE_TRANSITION_NAME)
            tvBody.transitionName = extras?.getString(BODY_TRANSITION_NAME)
            tvAuthorName.transitionName = extras?.getString(AUTHOR_TRANSITION_NAME)
            ivAvatar.transitionName = extras?.getString(AVATAR_TRANSITION_NAME)
        }
}

该代码来自示例:https://github.com/karntrehan/Posts

参考:

这篇文章实现的效果挺不错的 项目需求讨论 — 用Transition做一个漂亮的登录界面

Android自定义Transition动画
你所不知道的Activity转场动画——ActivityOptions
Android Transition(Android过渡动画)

使用Circular Reveal为你的应用添加揭露动画效果

关注我的公众号,轻松了解和学习更多技术
这里写图片描述

©️2020 CSDN 皮肤主题: 撸撸猫 设计师: 设计师小姐姐 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值