关于android:Android实现人脸识别动画效果

成果展现

实现步骤

1. 绘制圆圈遮罩

这里咱们是用了混合模式来实现圆圈局部的扣除，这里咱们用到了PorterDuff.Mode.CLEAR

/**
     * 绘制圆圈遮罩
     * @param canvas
     */
    private void drawCircleMask(Canvas canvas) {canvas.save();
        // 指标图 Dst
        canvas.drawRect(new Rect(0,0,getWidth(),getHeight()), mPaint);
        // 设置混合模式
        mPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.CLEAR));
        // 源图 Src，重叠区域右下角局部
        canvas.drawCircle(getWidth() / 2, getWidth() / 2, getWidth() / 3, mPaint);
        // 革除混合模式
        mPaint.setXfermode(null);
        canvas.restore();}

这时成果如下

2. 绘制两个动画成果的圆圈

咱们绘制的两个图片如下

咱们要做的就是通过计算将 Bitmap 缩放成与之前遮罩成果的圆圈一样大，因为咱们这里用的两张图片是一样大的，因而咱们只须要计算出内圆圈图片与遮罩圆圈的缩放比例即可，因为之前咱们给遮罩圆圈设置的半径为：控件宽度 / 3

因而咱们缩放后的圆圈 Bitmap 宽高该当是如下图所示的两头红线局部加两边蓝色局部的总长

其中两头红线局部就是：控件宽度 / 3，而蓝线局部能够通过 PhotoShop 等工具测量，而后依据与红线局部的比例求出，代码如下，其中 mInnerCircleBitmap 是内圆，mOutCircleBitmap是外圆

/**
     * 画圆圈内部的圆圈图片
     */
    private void drawBitmapCircle(Canvas canvas) {if(mInnerCircleBitmap == null){int dstWidthAndHeight = (int) (getWidth() / 1.5f + getWidth() / 1.5f / 4);
            mInnerCircleBitmap = BitmapFactory.decodeResource(getResources(),R.drawable.ic_checkface_innercircle);
            mInnerCircleBitmap = Bitmap.createScaledBitmap(mInnerCircleBitmap,dstWidthAndHeight,dstWidthAndHeight,true);
        }
        if(mOutCircleBitmap == null){int dstWidthAndHeight = (int) (getWidth() / 1.5f + getWidth() / 1.5f / 4);
            mOutCircleBitmap = BitmapFactory.decodeResource(getResources(),R.drawable.ic_checkface_outcircle);
            mOutCircleBitmap = Bitmap.createScaledBitmap(mOutCircleBitmap,dstWidthAndHeight,dstWidthAndHeight,true);
        }
        int left = (getWidth() - mInnerCircleBitmap.getWidth()) / 2;
        int top = (int) (getWidth() / 2 - getWidth() / 3 - getWidth() / 1.5f / 8);

        canvas.drawBitmap(mInnerCircleBitmap,left,top,mPaint);

        canvas.drawBitmap(mOutCircleBitmap,left,top,mPaint);
    }

这时成果如下

3. 实现旋转动画成果

接下来咱们就能够通过 ValueAnimator 来实现圆圈的旋转成果了，从文章结尾的成果咱们能够看出两个圆圈的旋转方向是不一样的，因而咱们逻辑上也要留神一个是顺时针旋转另一个是逆时针旋转，代码如下

private float mDegress = 0;// 旋转角度
private void init() {
        // 定义动画
        valueAnimator = ValueAnimator.ofFloat(0f, 360f);
        valueAnimator.setRepeatCount(ValueAnimator.INFINITE);
        valueAnimator.setRepeatMode(ValueAnimator.RESTART);
        valueAnimator.setInterpolator(new LinearInterpolator());
        valueAnimator.setDuration(6000);
        valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {mDegress = (float) animation.getAnimatedValue();
                postInvalidate();}
        });
        valueAnimator.start();}
/**
     * 画圆圈内部的圆圈图片
     */
    private void drawBitmapCircle(Canvas canvas) {if(mInnerCircleBitmap == null){int dstWidthAndHeight = (int) (getWidth() / 1.5f + getWidth() / 1.5f / 4);
            mInnerCircleBitmap = BitmapFactory.decodeResource(getResources(),R.drawable.ic_checkface_innercircle);
            mInnerCircleBitmap = Bitmap.createScaledBitmap(mInnerCircleBitmap,dstWidthAndHeight,dstWidthAndHeight,true);
        }
        if(mOutCircleBitmap == null){int dstWidthAndHeight = (int) (getWidth() / 1.5f + getWidth() / 1.5f / 4);
            mOutCircleBitmap = BitmapFactory.decodeResource(getResources(),R.drawable.ic_checkface_outcircle);
            mOutCircleBitmap = Bitmap.createScaledBitmap(mOutCircleBitmap,dstWidthAndHeight,dstWidthAndHeight,true);
        }
        int left = (getWidth() - mInnerCircleBitmap.getWidth()) / 2;
        int top = (int) (getWidth() / 2 - getWidth() / 3 - getWidth() / 1.5f / 8);
        // 顺时针旋转
        canvas.save();
        canvas.rotate(mDegress,getWidth() / 2, getWidth() / 2);
        canvas.drawBitmap(mInnerCircleBitmap,left,top,mPaint);
        canvas.restore();
         // 逆时针旋转
        canvas.save();
        canvas.rotate(-mDegress,getWidth() / 2, getWidth() / 2);
        canvas.drawBitmap(mOutCircleBitmap,left,top,mPaint);
        canvas.restore();}

这时成果如下

4. 减少提醒文字

绘制文字就比较简单了，次要是用于提醒用户须要进行的操作，代码如下

canvas.drawText("请把脸移入圈内",getWidth() / 2, (float) (getWidth() * 1.2),mTextPaint);

最终成果如下

案例源码

以上实现步骤中的源码我都是拆分开讲的，具体残缺的代码大家能够通过如下地址获取 https://gitee.com/itfitness/f…

原文链接：https://www.jianshu.com/p/938…

文末

您的点赞珍藏就是对我最大的激励！
欢送关注我，分享 Android 干货，交换 Android 技术。
对文章有何见解，或者有何技术问题，欢送在评论区一起留言探讨！