Android揭露动画的简单使用

一.什么是揭露动画？

       Circulal Reveal(揭露动画): 官方将这一动画称为揭露效果，它在官网中的描述是这样的：

当您显示或隐藏一组 UI 元素时，揭露动画可为用户提供视觉连续性。[ViewAnimationUtils.createCircularReveal()](https://developer.android.com/reference/android/view/ViewAnimationUtils.html?hl=zh-cn#createCircularReveal(android.view.View, int, int, float, float))
方法让您能够为裁剪区域添加动画以揭露或隐藏视图。

二、使用场景:

      1.从一个活动过渡到另一个活动时，对活动布局内容进行动画处理.

      2.在活动之间的过渡中对共享元素进行动画处理.

      3.对同一活动内的实体更改进行动画处理.

三、揭露动画怎么用?

      官网有一个工具类ViewCenterUtils，本文改成kotlin版本了，毕竟现在google推荐使用kotlin，具体代码如下：

  

/**
 * @author: njb
 * @date: 2020/2/23 0023 20:48
 * @desc:  揭露动画工具类
 */
object ViewCenterUtils {
    private var mX = 0
    private var mY = 0
    
    //得到视图中心
    @JvmStatic
    fun getViewCenter(view: View): IntArray {
        val top = view.top
        val left = view.left
        val bottom = view.bottom
        val right = view.right
        val x1 = (right - left) / 2
        val y1 = (bottom - top) / 2
        val location = IntArray(2)
        view.getLocationOnScreen(location)
        val x2 = location[0]
        val y2 = location[1]
        val x = x2 + x1
        return intArrayOf(x, y2)
    }

    //设置开始动画
    @JvmStatic
    fun setActivityStartAnim(activity: Activity, view: View?, intent: Intent) {
        view!!.post {
            if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
                mX = intent.getIntExtra("x", 0)
                mY = intent.getIntExtra("y", 0)
                //对控件View进行判空，防止后台时间过长activity被回收后启动
                val animator = createRevealAnimator(activity, view, false, mX, mY)
                animator.start()
            }
        }
    }

    /**
     * 此方法让您能够为裁剪区域添加动画以揭露或隐藏视图
     *  参数主要是涉及到了动画开始的x，y坐标，以及圆形揭露的半径变化startRadius->endRadius。
     */
    @RequiresApi(api = Build.VERSION_CODES.LOLLIPOP)
    private fun createRevealAnimator(activity: Activity, view: View, reversed: Boolean, x: Int, y: Int): Animator {
        var a = x
        var b = y
        val measuredHeight = view.measuredHeight
        val screenWidth = activity.windowManager.defaultDisplay.width
        val screenHeight = activity.windowManager.defaultDisplay.height
        if (screenWidth - x > x) {
            a = screenWidth - x
        }
        if (screenHeight - y > y) {
            b = screenHeight - y
        }
        val hypot = Math.hypot(a.toDouble(), b.toDouble()).toFloat()
        val startRadius: Float = if (reversed) hypot else 0F
        val endRadius: Float = if (reversed) 0F else hypot
        val animator = ViewAnimationUtils.createCircularReveal(view, x, y, startRadius, endRadius)
        animator.duration = 800
        animator.interpolator = AccelerateDecelerateInterpolator()
        if (reversed) {
            animator.addListener(object : Animator.AnimatorListener {
                override fun onAnimationStart(animation: Animator) {}
                override fun onAnimationEnd(animation: Animator) {
                    view.visibility = View.INVISIBLE
                    activity.finish()
                }

                override fun onAnimationCancel(animation: Animator) {}
                override fun onAnimationRepeat(animation: Animator) {}
            })
        }
        return animator
    }
}

四、简单使用:

public class MainActivity extends AppCompatActivity {
    private ImageView imageView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initView();
        //getSupportFragmentManager().beginTransaction().replace(R.id.fl_container, RvFrag.newInstance()).commitAllowingStateLoss();
    }

    private void initView() {
        imageView = findViewById(R.id.tv_go);
        //点击跳转到下一个页面
        imageView.setOnClickListener(v -> {
            int[] viewCenter = ViewCenterUtils.getViewCenter(imageView);
            Intent intent = new Intent(MainActivity.this, SecondActivity.class);
            intent.putExtra("x", viewCenter[0]);
            intent.putExtra("y", viewCenter[1]);
            startActivity(intent);
        });
    }
}
activity_main:布局代码

<?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"
    tools:context=".MainActivity"
    android:background="@color/white"
    android:orientation="vertical"
    android:gravity="center">

    <FrameLayout
        android:id="@+id/fl_container"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_constraintTop_toTopOf="parent"/>
    <ImageView
        android:id="@+id/tv_go"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:src="@mipmap/b1"
        app:layout_constraintTop_toBottomOf="@+id/fl_container"/>

</LinearLayout>

五、第二个页面

/**
 * @author: njb
 * @date: 2020/2/23 0023 20:50
 * @desc:
 */
public class SecondActivity extends AppCompatActivity {
    private LinearLayout constraintLayout;

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

    private void initView() {
        constraintLayout = findViewById(R.id.cl_input);
        if (getIntent() != null && getIntent().getExtras() != null) {
            ViewCenterUtils.setActivityStartAnim(this, constraintLayout, getIntent());
        }
    }
}

activity_second布局代码:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/cl_input"
    android:background="@mipmap/b1">

</LinearLayout>

最后完成的效果图如下:

以上就是揭露动画的简单使用，后面会加上点击返回按钮也有动画效果，欢迎大家讨论，如有问题，及时指正.