Android BitmapShader和createCircularReveal结合仿放大镜动画

上篇动画实现方式对比说过要将实现的动画效果在本篇叙述，说着说着这就来总结一下了。先看下图效果：

直接切入正题，本人的实现方式是将其分为两步去实现：

第一步：实现人脸的收缩成为一个圆

第二部：实现圆圈的转动看到相应图片部分，类似放大镜效果

先上布局：

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 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=".image.LoaderActivity">
    <!--底部黑色背景-->
    <ImageView
        android:id="@+id/bg_iv"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@color/black" />
    <!--实现放大镜效果自定义view-->
    <com.xxx.frame.image.BitmapShaderView
        android:id="@+id/iv_shader"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
    <!--收缩人像-->
    <ImageView
        android:id="@+id/iv_crcular_reveal"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scaleType="fitXY"
        android:src="@mipmap/bg_shader" />
</android.support.constraint.ConstraintLayout>

实现第一步：

使用ViewAnimationUtils中的createCircularReveal实现收缩成圆的效果，以下是官网描述：

当您显示或隐藏一组界面元素时，揭露动画可为用户提供视觉连续性。ViewAnimationUtils.createCircularReveal() 方法让您能够为裁剪圆形添加动画以揭露或隐藏视图。此动画在 ViewAnimationUtils 类中提供，适用于 Android 5.0（API 级别 21）及更高版本。

先上代码：

        final DisplayMetrics dm = this.getResources().getDisplayMetrics();
        final int centerX = dm.widthPixels / 2;
        final int centerY = dm.heightPixels / 2;
        iv_circular_reveal.postDelayed(new Runnable() {
            @Override
            public void run() {
                Animator anim = ViewAnimationUtils.createCircularReveal(
                        iv_circular_reveal,
                        centerX,
                        centerY,
                        (float) Math.hypot(dm.widthPixels, dm.heightPixels), 0);
                anim.setDuration(1000);
                anim.setInterpolator(new AccelerateDecelerateInterpolator());
                anim.start();
                anim.addListener(new Animator.AnimatorListener() {
                    @Override
                    public void onAnimationStart(Animator animation) {

                    }

                    @Override
                    public void onAnimationEnd(Animator animation) {
                        iv_circular_reveal.setVisibility(View.GONE);
                    }

                    @Override
                    public void onAnimationCancel(Animator animation) {

                    }

                    @Override
                    public void onAnimationRepeat(Animator animation) {

                    }
                });
            }
        }, 500);

参量
view	View：视图将被剪切到动画圆。
centerX	int：动画圆心相对于的x坐标 view。
centerY	int：动画圆心的y坐标，相对于 view。
startRadius	float：动画圆的起始半径。
endRadius	float：动画圆的结束半径。

 以上就是动画参数的解释，这里我是以屏幕中心为原点收缩，收缩直到消失（这里可以收缩到第二步旋转圆的大小会更好，由于时间问题，当时并没有这样做），第一步就完成了。

实现第二步：

这里使用了BitmapShader（位图着色器），看似比较不好实现的动画，其实就是一只半径比较大的笔在画圈而已，关键代码：

 @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        if (!isDraw) return;
        if (this.bgBitmap == null) {
            this.bgBitmap = Bitmap.createBitmap(getWidth(), getHeight(), Bitmap.Config.RGB_565);//创建一个新空白位图
            Canvas canvasBg = new Canvas(this.bgBitmap);
            canvasBg.drawBitmap(this.bitmap, null, new Rect(0, 0, getWidth(), getHeight()), this.paint);
        }
        this.paint.setShader(new BitmapShader(this.bgBitmap, Shader.TileMode.REPEAT, Shader.TileMode.REPEAT));

        mDst.reset();
        float stop = mLength * mAnimatorValue;
        float start = stop - 1;
        mPathMeasure.getSegment(start, stop, mDst, true);
        canvas.drawPath(mDst, paint);
    }

重点代码： 

 this.paint.setShader(new BitmapShader(this.bgBitmap, Shader.TileMode.REPEAT, Shader.TileMode.REPEAT));

BitmapShader(Bitmap bitmap, Shader.TileMode tileX, Shader.TileMode tileY) 

参量
bitmap	Bitmap：在着色器中使用的位图此值一定不能为null。
tileX	Shader.TileMode：x的平铺模式以绘制位图。此值不得为null。
tileY	Shader.TileMode：y的平铺模式绘制位图。此值不得为null。

这样我们的Paint也就拥有了我们的图，使用这只Paint去画圆也就实现上动画效果。

更多相关知识大家可以看篇末的相关链接，这里就是我实现动画的全部思路，如果大家还有更多更好的实现思路欢迎留言，共同学习。

 

相关链接：

https://developer.android.com/reference/android/view/ViewAnimationUtils.html#createCircularReveal(android.view.View,%20int,%20int,%20float,%20float)

https://developer.android.com/reference/android/graphics/BitmapShader