自定义人脸识别动画效果
目录
![](/assets/blank.gif)
效果展示
![](/assets/blank.gif)
实现步骤
1.绘制圆圈遮罩
这里我们是用了混合模式来实现圆圈部分的扣除,这里我们用到了PorterDuff.Mode.CLEAR。
/*** 绘制圆圈遮罩* @param canvas*/
private void drawCircleMask(Canvas canvas) {canvas.save();//目标图Dstcanvas.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();
}
这时效果如下:
![](/assets/blank.gif)
2.绘制两个动画效果的圆圈
咱们绘制的两个图片如下:
![](/assets/blank.gif)
![](/assets/blank.gif)
我们要做的就是通过计算将Bitmap缩放成与之前遮罩效果的圆圈一样大,因为我们这里用的两张图片是一样大的,因此我们只需要计算出内圆圈图片与遮罩圆圈的缩放比例即可,由于之前咱们给遮罩圆圈设置的半径为:控件宽度 / 3。
![](/assets/blank.gif)
因此我们缩放后的圆圈Bitmap宽高应当是如下图所示的中间红线部分加两边蓝色部分的总长。
![](/assets/blank.gif)
其中中间红线部分就是:控件宽度 / 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);
}
这时效果如下:
![](/assets/blank.gif)
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() {@Overridepublic 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();
}
这时效果如下:
![](/assets/blank.gif)
4.增加提示文字
绘制文字就比较简单了,主要是用于提示用户需要进行的操作,代码如下:
canvas.drawText("请把脸移入圈内",getWidth() / 2, (float) (getWidth() * 1.2),mTextPaint);
最终效果如下:
![](/assets/blank.gif)
案例源码
以上实现步骤中的源码我都是拆分开讲的,详细完整的代码大家可以通过如下地址获取:
https://gitee.com/itfitness/face-check-view
自定义人脸识别动画效果相关推荐
- Android实现人脸识别动画效果
效果展示 实现步骤 1.绘制圆圈遮罩 这里我们是用了混合模式来实现圆圈部分的扣除,这里我们用到了PorterDuff.Mode.CLEAR /*** 绘制圆圈遮罩* @param canvas*/pr ...
- 人脸识别动画实现详解(SurfaceView + ObjectAnimator + 三角函数 = 炫酷动画)
前言 开门见山,先来看下效果吧. 看到这么酷炫的效果图,不得不赞叹一下我们的设计师.然而,站在程序员的角度上看,除了酷炫之外更多的是复杂.但是,上面我们所看到的还只是最简单的一种形态而已.更加复杂的情 ...
- 电脑分屏软件_Fcpx分屏插件 41组视频分割可自定义分屏动画效果插件 可分9屏 Split Pop...
Fcpx分屏插件 41组视频分割可自定义分屏动画效果插件 这是一套目前小编感觉最好用的Fcpx分屏插件,一.支持4K.二.最多可分9屏.三.可微调参数调整最佳展示.四.41种效果简洁大方,涵盖各类流行 ...
- python构造自定义数据包_构建自定义人脸识别数据集的三种训练方法
在接下来的几篇文章中,我们将训练计算机视觉+深度学习模型来进行面部识别.在此之前,我们首先需要收集脸部数据集. 如果你已经在使用预先准备好的数据集,比如Labeled Faces in the Wil ...
- ios 自定义加载动画效果
在开发过程中,可能会遇到各种不同的场景需要等待加载成功后才能显示数据.以下是自定义的一个动画加载view效果. 在UIViewController的中加载等到效果,如下 - (void)vi ...
- android 自定义加载动画效果,Android 自定义View修炼-自定义加载进度动画LoadingImageView...
一.概述 本自定义View,是加载进度动画的自定义View,继承于ImageView来实现,主要实现蒙层加载进度的加载进度效果. 支持水平左右加载和垂直上下加载四个方向,同时也支持自定义蒙层进度颜色. ...
- Android自定义人脸识别框,android自定义虹软人脸识别框/人脸抓拍框/人脸追踪框...
有一两个月没有更新博客了,最近一直在忙人脸识别的项目,先将项目中更改虹软人脸框的方法抽取出来,希望对大家有所帮助. 尊重原创,转载请注明出处: http://blog..net/qq137722697 ...
- android 自定义加载动画效果,Android自定义View实现loading动画加载效果
项目开发中对Loading的处理是比较常见的,安卓系统提供的不太美观,引入第三发又太麻烦,这时候自己定义View来实现这个效果,并且进行封装抽取给项目提供统一的loading样式是最好的解决方式了. ...
- Android仿探探社交自定义闪聊动画效果
需要实现的效果图如探探 ### 主要实现方式 就是一个自定义控件,循环的去画圆,在圆半径增加的时候,找到圆上的3个点,然后把图片画上对应的坐标,半径越大,透明度越高 * 这里用到了一些数学知识* 求圆 ...
最新文章
- XXX管理平台系统——概要
- 【Linux】gcc和g++的区别
- Flink实时计算性能分析
- python 编译procto错误处理
- cp无法创建普通文件权限不够_MAC从管理员变成了普通用户怎么办?
- linux下如何挂载格式化内存卡,Linux下磁盘挂载格式化
- NFS挂载及写入故障
- Python在Linux地址已在使用,python在linux下的使用
- apicloud 微信授权在AppLoader中 包名不一致
- ACL'22 | 陈丹琦提出CoFi模型剪枝,加速10倍,精度几乎无损
- Emlog资源吧V2.0模板
- python代码下出现红线_python踩坑系列之导入包时下划红线及报错“No module named”问题...
- STM32F103VET6——DAC双通道(PA4、PA5)输出不同电压值,串口可控电压输出的大小
- 2017——新的开始,加油!
- 实现屏幕监控的大体思路
- 山东高考六选三学计算机选什么,山东省高中6选3选科数据出炉!和预想完全不一样,其他省区可参考!...
- 关于CH375芯片的简介以及其与51单片机的连接
- 全面揭秘Windows激活原理
- 企业如何选择一个靠谱的培训直播平台呢?
- 靠着这份年终总结,我涨薪8K,成为领导眼中最闪亮的星~
热门文章
- start bluestacks模拟器中文版 v0.8.9 官方PC版
- jmeter基础逻辑控制器之if控制器
- 【pyqt5/pyside2】任务栏图标与应用程序图标的设置
- 【IEEE】IEEE期刊/会议投稿超详细流程官方讲座(2022讲座笔记)
- 苹果iwatch手表_智能手表入坑指南,你需要的是Apple Watch,还是小米手环?
- 硕腾“猫友好在中国”项目正式启动,改善中国猫咪诊疗环境
- 前向传播与反向传播的理解
- 我的ubuntu字体方案
- 巴哈马证券监管机构提出加密代币销售规则
- 前端兼容之360安全浏览器