实战 | 使用揭露动画(Reveal Effect)做一个丝滑的Activity转场动画

Source
版权声明:版权所有,翻版必究,转载请声明作者:https://blog.csdn.net/aaLiweipeng https://blog.csdn.net/aaLiweipeng/article/details/83967315

提笔之际(附总体思路)


最近跟几个小伙伴在实践一个项目,考虑到界面效果,我们决定使用揭露动画作为Activity的转场动画。


9125154-15a9bbcedf17242b.png

这里主要是我负责这部分的实现。
话说之前是没接触过的,关于具体的实现跟大体的思路都不太清楚。于是最先啃官方API,有点难看懂,然后下载了官方的demo,直接看代码,还是有问题,毕竟它规模略大,集成了好多动画效果;
接着就找了很多博文,发现网上真的水文忒多了哎。。

最后找到了这三篇,算是解答了我的疑问:

  1. https://www.jianshu.com/p/b75548e488df
    这篇思路很好,写得也很走心,启发了我设计的思路跟注意到的一些问题,像揭露动画的逻辑放在哪里之类的;正当我要下载demo的时候发现他代码是kotlin来的,好吧,再继续找博文;

  2. https://blog.csdn.net/shedoor/article/details/81251849#5
    这篇就讲得更加详尽,这还看不懂那就有点说不过去了。一开始觉得揭露动画还是挺高大上的样子,结果此博文文首便说很简单,那就很简单吧,后来理解透了之后发觉确实也不难,毕竟只有一个静态方法而已;
    https://github.com/OCNYang/Android-Animation-Set/tree/master/reveal-animation
    这个点进去是他的GitHub,demo下下来,代码看一下,自己写个小demo(我是先在一个activity里面跑通揭露动画,再进一步将揭露动画实现成跳转动画),再加入自己的逻辑,一步一步来算是没有问题了。
    到这里就跑通了一个活动中的Activity了;

    9125154-31a29bd47ce9c934.png
    GitHub中附方法详解图

  1. https://github.com/whyalwaysmea/AndroidDemos
    接下来就进入本文主题了,使用揭露动画作为Activity的转场动画;
    这篇文档跟代码算是帮上大忙了,有较大的参考价值;
    不同的是作者的思路是在跳转的目标活动中,启动做揭露动画的收挽,收挽结束后再finish();
    我这里根据情况修改为跳转的目标活动中按下返回键即finish(),完了之后原始活动中的onReStart()中做揭露动画的收挽;另外我在在跳转的目标活动中完成揭露动画展开的时候,添加了一个AlphaAnimation;
    这边的起始活动用的是button的onClick触发的方式,以及这里对两个活动各自的控件的visible做了细节的把控;

9125154-d5e3214e62ed1ade.gif
最终效果图




引子


使用揭露动画做一个丝滑的Activity转场动画,
关于这个需求,可能不同的同学,会有不同的问题,
我这里把可能遇到的问题跟我在完成这个demo的过程中遇到的问题做一个总结,
然后附上总体的思路,大家可以交流一下~

  1. 什么是揭露动画?
    Material-Animations; 官网有详细的介绍
    揭露动画具有相当丝滑的效果,
    常常可以用与基于一个Activity的碎片切换或者View、控件的切换覆盖铺张,如本文第一个demo;
    或者直接作为两个Activity之间的转场动画,如本文第二个demo;

  2. 揭露动画怎么用?
    官方API封装好了,
    一个类一个静态方法——ViewAnimationUtils.createCircularReveal(),
    传进五个参数,返回一个Animator对象。根据具体情况调用即可。

    详细可见参考文档

  3. “丝滑”之解
    这个转场动画要实现得丝滑,需要注意几个细节:
    活动A跳转到活动B的情况下,
    a.在A点击触发跳转时刻,揭露动画要放在哪个活动展开;
    b.在B按下返回键之后,揭露动画又要放在哪个活动收挽;
    c.揭露动画的展开和收挽,createCircularReveal()分别以谁为操作对象;
    d.这里A通过FloatingActionButton出发,那揭露层View跟FloatingActionButton的visible跟invisible设置的顺序;
    e.关闭android默认的activity转场动画(不然就相当不丝滑了hhh);

相关解答详解下方第二个demo的思路总结,请移步到正文中的第二个demo;

了解本文的两个demo之后,我相信以这个两个demo为模板,结合笔者之前关于Material Design做的诸多笔记,应该是可以做出不少很有趣的东西来的~

再附上在做本demo的过程中一些debugExperience:




正文


1.先在一个activity里面跑通揭露动画

首先新建一个空项目,接着走三步即可:

1)更改styles.xml,改成NoActionBar,去掉标题栏,待会儿调试可以观察:

9125154-cf2181ecf4237b61.png

2)书写activity_main.xml:

  • 这里对子空间的布局范围要求并不多,直接简单用FrameLayout即可;
  • 然后是Textview放在最前面,最先渲染,以为至底层;
  • 接着我们这里使用一个View原生控件来作为揭露动画的操作对象,即通过对View控件的显示和隐藏以及动画操作来具体实现揭露动画;
  • 最后放置一个悬浮按钮,用于启动点击事件,这里响应的事件是启动揭露动画:

另外说一下,关于FloatingActionButton,
android:backgroundTint可以设置其背景色,
android:src则给按钮设置图标,
这里用的图标资源来自于阿里的矢量图标库

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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.lwp.justtest.MainActivity">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!"
        android:layout_gravity="center"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <View
        android:id="@+id/view_puppet"
        android:background="@color/colorPrimaryDark"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:visibility="gone"/>

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|end"
        android:layout_margin="16dp"
        android:backgroundTint="@color/colorPrimary"
        android:src="@drawable/map"
        app:pressedTranslationZ="10dp" />

</FrameLayout>

3)书写MainActivity.java:

  • 实例化各个组件之后,实现FloatingActionButton的onClick(),
  • onClick()中我们调用一个自定义方法,在里面启动揭露动画;
  • 这里通过变量flag实现点击按钮时揭露动画的交替开启显示以及关闭隐藏,效果图在下方代码之后;
  • 关于揭露动画的逻辑以及具体实现的语法,
    其实核心就是ViewAnimationUtils.createCircularReveal()这个方法以及其五个参数的意义,
    详细地可以参考前面提到的参考文章链接:
package com.lwp.justtest;

import android.animation.Animator;
import android.animation.AnimatorListenerAdapter;
import android.support.design.widget.FloatingActionButton;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.util.Log;
import android.view.View;
import android.view.ViewAnimationUtils;

public class MainActivity extends AppCompatActivity implements View.OnClickListener {

    boolean flag = false;
    FloatingActionButton fab;
    private View mPuppet;

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

        mPuppet = findViewById(R.id.view_puppet);
        fab = (FloatingActionButton)findViewById(R.id.fab);
        fab.setOnClickListener(this);
    }

    @Override
    public void onClick(View v) {
        doRevealAnimation();
    }

    private void doRevealAnimation() {
        int[] vLocation = new int[2];
        fab.getLocationInWindow(vLocation);
        int centerX = vLocation[0] + fab.getMeasuredWidth() / 2;
        int centerY = vLocation[1] + fab.getMeasuredHeight() / 2;

        int height = mPuppet.getHeight();
        int width = mPuppet.getWidth();
        int maxRradius = (int) Math.hypot(height, width);
        Log.e("hei", maxRradius + "");

        if (flag) {
            Animator animator = ViewAnimationUtils.createCircularReveal(mPuppet, centerX, centerY, maxRradius, 0);
            animator.setDuration(1000);
            animator.addListener(new AnimatorListenerAdapter() {
                @Override
                public void onAnimationEnd(Animator animation) {
                    super.onAnimationEnd(animation);
                    mPuppet.setVisibility(View.GONE);
                }
            });
            animator.start();
            flag = false;
        } else {
            Animator animator = ViewAnimationUtils.createCircularReveal(mPuppet, centerX, centerY, 0, maxRradius);
            animator.setDuration(1000);
            animator.addListener(new Animator.AnimatorListener() {
                @Override
                public void onAnimationStart(Animator animation) {
                    mPuppet.setVisibility(View.VISIBLE);
                }

                @Override
                public void onAnimationEnd(Animator animation) {
                }

                @Override
                public void onAnimationCancel(Animator animation) {

                }

                @Override
                public void onAnimationRepeat(Animator animation) {

                }
            });
            animator.start();
            flag = true;
        }
    }

}

上面三步走完,即可运行程序,揭露动画随即实现,效果如下:

9125154-189f71cc2dbc1f14.gif

接着后面就进入本文主题了;



2.使用揭露动画作为Activity的转场动画

思路总结:

1. MainActivity.java:
    1.1.   实例化、声明各种对象,注意:
            根布局对象(用来控制整个布局),
            揭露层对象指的是用于作揭露操作的纯色的match_parent的View控件;

    1.2.  onCreate():完成findViewById()以及intent的构建,FloatingActionButton的setOnClickListener;

    1.3.  onClick():计算fab的中心坐标,用于作为揭露动画的圆心;同时把这对坐标put进intent中,然后startActivity(intent);跳转到下一个活动,同时把坐标对传过去;

    1.4. createRevealAnimator():计算startRadius、endRadius,调用核心方法createCircularReveal()构建出animator并做相关配置后return之;
          注意:
            这里的createCircularReveal()操作对象用的是揭露层纯色View对象mPuppet0;
            以及配置中用了animator.addListener(animatorListener0);添加一个动画监听器;--->> 1.5.

    1.5.  Animator.AnimatorListener animatorListener0 

 注意这里的思路:
          !!!
          onAnimationStart():收挽揭露动画开启时,揭露层setVisibility(View.VISIBLE);fab.setVisibility(View.INVISIBLE);
          onAnimationEnd():收挽版揭露动画结束时,mPuppet0.setVisibility(View.INVISIBLE);fab.setVisibility(View.VISIBLE);
          !!!
    
    1.6. onRestart():回调方法,计算fab的中心坐标,用于作为揭露动画的圆心;
         调用createRevealAnimator()创建并配置一个animator(--->> 1.4.),
         然后开启收挽版揭露动画,即animator.start();

2. next.java:
    2.1.   实例化、声明各种对象,注意:
            根布局对象(用来控制整个布局),
            揭露层对象指的是用于作揭露操作的纯色的match_parent的View控件;

    2.2.  onCreate():完成findViewById(),
        这里注意:
            动画需要依赖于某个视图才可启动,这里依赖于根布局对象并且开辟一个子线程,
            在子线程中get坐标对,调用createRevealAnimator()创建并配置一个animator;--->> 2.3.
            然后开启展开版揭露动画,即animator.start();
    2.3. createRevealAnimator():计算startRadius、endRadius,调用核心方法createCircularReveal()构建出animator并做相关配置后return之;

          注意这里的思路:

            !!!这里的createCircularReveal()操作对象用的是根布局对象content;

            !!!!!
            (即先加载好整个布局,再把整个布局作为揭露对象从0径到屏幕对角线径揭露展开,
              展开过程中揭露层纯色view在最顶层,所以感觉是View在做展开而已,
              而实际上并不是;展开完毕后,再把view层去掉,去掉之后下层的活动内容自然就显示出来了。)
            !!!!!

            以及配置中用了animator.addListener(animatorListener0);添加一个动画监听器;--->> 2.4.
    2.4. Animator.AnimatorListener animatorListener1 

          注意这里的思路:
          !!!
          onAnimationEnd():展开版揭露动画结束时,            
            mPuppet.startAnimation(createAlphaAnimation());//调用透明度动画,丝滑效果-->>2.5.
            mPuppet.setVisibility(View.INVISIBLE);//动画结束时,揭露动画设置为不可见
          !!!

    2.5. createAlphaAnimation():定义透明度动画,返回一个AlphaAnimation对象;

    3. 两个布局xml没什么特别需要说的地方,
        注意第一个xml的view要android:visibility="gone",以及按照渲染先后层次关系按序书写控件即是;

    4. styles.xml:android:windowAnimationStyle属性置为null,取消掉Android默认的转场动画
    <style name="noAnimTheme" parent="AppTheme">
        <item name="android:windowAnimationStyle">@null</item>
    </style>
    
    5. AndroidManifest.xml:为参与的活动添加刚刚设置好的主题;
      <activity
            android:name=".MainActivity"
            android:theme="@style/noAnimTheme">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
        <activity
            android:name=".next"
            android:theme="@style/noAnimTheme">
        </activity>

最后上代码了,不同的功能基本上都放在了不同的方法内实现,结合注释应该不难理解了~

MainActivity.java:

package com.lwp.justtest;

import ...

public class MainActivity extends AppCompatActivity implements View.OnClickListener {

    FloatingActionButton fab;
    Intent intent;
    private View content;//根布局对象(用来控制整个布局)
    private View mPuppet0;//揭露层对象
    private int centerX;
    private int centerY;

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

        content = findViewById(R.id.reveal_content0);
        mPuppet0 = findViewById(R.id.view_puppet);
        intent = new Intent(MainActivity.this, next.class);
        fab = (FloatingActionButton)findViewById(R.id.fab);
        fab.setOnClickListener(this);
    }

    @Override
    public void onClick(View v) {
        int[] vLocation = new int[2];
        fab.getLocationInWindow(vLocation);
        centerX = vLocation[0] + fab.getMeasuredWidth() / 2;
        centerY = vLocation[1] + fab.getMeasuredHeight() / 2;
        intent.putExtra("cx",centerX);
        intent.putExtra("cy",centerY);
        startActivity(intent);
    }

    private Animator createRevealAnimator(int x, int y) {
        float startRadius = (float) Math.hypot(content.getHeight(), content.getWidth());
        float endRadius = fab.getMeasuredWidth() / 2 ;

        //注意揭露动画开启时是用根布局作为操作对象,关闭时用揭露层作为操作对象
        Animator animator = ViewAnimationUtils.createCircularReveal(
                mPuppet0, x, y,
                startRadius,
                endRadius);
        animator.setDuration(500);
        animator.setInterpolator(new AccelerateDecelerateInterpolator());//设置插值器
        animator.addListener(animatorListener0);
        return animator;
    }

    //定义动画状态监听器_按下返回键版
    private Animator.AnimatorListener animatorListener0 = new Animator.AnimatorListener() {
        @Override
        public void onAnimationStart(Animator animation) {
            mPuppet0.setVisibility(View.VISIBLE);//按下返回键时,动画开启,揭露层设置为可见
            fab.setVisibility(View.INVISIBLE);
        }
        @Override
        public void onAnimationEnd(Animator animation) {
            mPuppet0.setVisibility(View.INVISIBLE);
            fab.setVisibility(View.VISIBLE);
        }
        @Override
        public void onAnimationCancel(Animator animation) {
        }
        @Override
        public void onAnimationRepeat(Animator animation) {
        }
    };

    //第二个活动退回来时,回调本方法
    @Override
    protected void onRestart() {
        super.onRestart();

        //动画需要依赖于某个视图才可启动,
        // 这里依赖于根布局对象,并且开辟一个子线程,充分利用资源
        content.post(new Runnable() {
            @Override
            public void run() {
                int[] vLocation = new int[2];
                fab.getLocationInWindow(vLocation);
                centerX = vLocation[0] + fab.getMeasuredWidth() / 2;
                centerY = vLocation[1] + fab.getMeasuredHeight() / 2;
                Animator animator = createRevealAnimator(centerX, centerY);
                animator.start();
            }
        });
    }
}

main.xml:

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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:id="@+id/reveal_content0"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.lwp.justtest.MainActivity">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Here is First Activity!"
        android:textColor="@color/colorPrimaryDark"
        android:textSize="30sp"
        android:layout_gravity="center"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <View
        android:id="@+id/view_puppet"
        android:background="@color/colorPrimaryDark"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:visibility="gone"/>

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|end"
        android:layout_margin="16dp"
        android:backgroundTint="@color/colorPrimary"
        android:src="@drawable/map"
        app:pressedTranslationZ="10dp" />

</FrameLayout>

next.java:

package com.lwp.justtest;

import ...

public class next extends AppCompatActivity {

    private View content;//根布局对象(用来控制整个布局)
    private View mPuppet;//揭露层对象
    private int mX ;
    private int mY ;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_next);//先加载好整个布局,后面再用整个布局作为揭露动画的操作对象,揭露完毕后再去掉揭露层
        content = findViewById(R.id.reveal_content);
        mPuppet = findViewById(R.id.view_puppet);

        //动画需要依赖于某个视图才可启动,
        // 这里依赖于根布局对象,并且开辟一个子线程,充分利用资源
        content.post(new Runnable() {
            @Override
            public void run() {
                mX = getIntent().getIntExtra("cx", 0);
                mY = getIntent().getIntExtra("cy", 0);
                Animator animator = createRevealAnimator(mX, mY);
                animator.start();
            }
        });
    }

    private Animator createRevealAnimator(int x, int y) {
        float startRadius = 0;
        float endRadius = (float) Math.hypot(content.getHeight(), content.getWidth());

        Animator animator = ViewAnimationUtils.createCircularReveal(
                content, x, y,
                startRadius,
                endRadius);
        animator.setDuration(660);
        animator.setInterpolator(new AccelerateDecelerateInterpolator());
        //判断标志位reversed,true则为添加返回键版动画监听器,false则为跳转动画开启版
        // if (!reversed)
           animator.addListener(animatorListener1);
        return animator;
    }

    //定义动画状态监听器_跳转动画开启版
    private Animator.AnimatorListener animatorListener1 = new Animator.AnimatorListener() {
        @Override
        public void onAnimationStart(Animator animation) {
//            content.setVisibility(View.VISIBLE);//跳转进来时,(因为finish之前会将之设置为不可见,)
                                                 // 根布局要设置为可见,与finish部分的不可见相对应
//            mPuppet.setAlpha(1);
        }
        @Override
        public void onAnimationEnd(Animator animation) {
            mPuppet.startAnimation(createAlphaAnimation());
            mPuppet.setVisibility(View.INVISIBLE);//动画结束时,揭露动画设置为不可见
        }
        @Override
        public void onAnimationCancel(Animator animation) {
        }
        @Override
        public void onAnimationRepeat(Animator animation) {
        }
    };

    private AlphaAnimation createAlphaAnimation() {
        AlphaAnimation aa = new AlphaAnimation(1,0);
        aa.setDuration(400);
        aa.setInterpolator(new AccelerateDecelerateInterpolator());//设置插值器
        return aa;
    }
}

next.xml:

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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:id="@+id/reveal_content"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.lwp.justtest.next">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Here is Second Activity!"
        android:textColor="@color/colorPrimaryDark"
        android:textSize="30sp"
        android:layout_gravity="center"/>

    <View
        android:id="@+id/view_puppet"
        android:background="@color/colorPrimaryDark"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>


</FrameLayout>

res/values/styles.xml:

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>

    <style name="noAnimTheme" parent="AppTheme">
        <item name="android:windowAnimationStyle">@null</item>
    </style>

</resources>

AndroidManifest.xml:

<application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">
        <activity
            android:name=".MainActivity"
            android:theme="@style/noAnimTheme">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
        <activity
            android:name=".next"
            android:theme="@style/noAnimTheme">
        </activity>
    </application>

最终效果图:

9125154-d5e3214e62ed1ade.gif

本文的两个demo就到此为止了,我相信以这个两个demo为模板,结合笔者之前关于Material Design做的诸多笔记,应该是可以做出不少很有趣的东西来的~