Android平台美颜相机/Camera实时滤镜/视频编解码/影像后期/人脸技术探索——4.1高仿FaceU长按录像按钮
2017-05-30 07:09
585 查看
回到目录
最近需要做短按拍照,长按录像功能,虽然长按只需要LongClickListener就好了,但是要同时做出动画效果。
在网上转了一圈,发现仿微信长按录像的不少,例如这个,但是仿FaceU的好像还没有,所以决定自己写一个。
先放一张效果图:
按照时间顺序,按钮的动画效果大概是这样:
还没有到达LongClick的时间阈值,没有任何反应,静态的画面为中间一个半透明白色圆形,外面一个白色圆环
动画开始,中间的圆形消失,变成一个逐渐扩大的绿色圆形
在绿色圆形扩大的同时,外面的圆环扩大,同时进度条开始移动
绿色圆形和圆环扩大到最大值
进度条满,达到录像的时间阈值或用户手指离开(ACTION_UP)
此外,还有两个黑色半透明的圆环作为描边,但是效果不是很明显,略去不表。
我们可以监听用户的触摸事件,设定一个超时的阈值,如果用户按下超过这个时间,那么就是长按,否则就是单击。
超时判断可以采用一个定时的消息,或者每隔一小段时间检查一下。
可以考虑设定一个比例10%,表示如果录制视频的时限为5秒,那么圆形在0.5秒时缩放到最大。
设定一个这样的监听器:
当用户ACTION_DOWN没有超过阈值时,onClick被调用
当用户ACTION_DOWN刚好超过阈值时,onLongClickStart被调用
当用户ACTION_DOWN超过阈值后离开或者录制时间达到限制时onLongClickEnd被调用
改成橙色试试?
最后给出Demo和示例代码(RecordButton)
回到目录
最近需要做短按拍照,长按录像功能,虽然长按只需要LongClickListener就好了,但是要同时做出动画效果。
在网上转了一圈,发现仿微信长按录像的不少,例如这个,但是仿FaceU的好像还没有,所以决定自己写一个。
先放一张效果图:
一、实现流程分析
按钮要实现类似ClickListener和LongClickListener的功能,因此需要监听触控事件按照时间顺序,按钮的动画效果大概是这样:
还没有到达LongClick的时间阈值,没有任何反应,静态的画面为中间一个半透明白色圆形,外面一个白色圆环
动画开始,中间的圆形消失,变成一个逐渐扩大的绿色圆形
在绿色圆形扩大的同时,外面的圆环扩大,同时进度条开始移动
绿色圆形和圆环扩大到最大值
进度条满,达到录像的时间阈值或用户手指离开(ACTION_UP)
此外,还有两个黑色半透明的圆环作为描边,但是效果不是很明显,略去不表。
二、代码实现
这种效果,拿自定义View来做再合适不过了,整个动画不需要任何素材,可以直接通过重写View的draw函数实现。分配率无关的尺寸获取
我们希望绘制出的图形在不同屏幕上都显示类似的效果,所以要获取一个像素密度相关的尺寸public int getRefLength(float len) { return (int) (mContext.getResources().getDisplayMetrics().density * len + 0.5F); }
圆形/圆环的绘制
圆形/圆环的绘制比较简单,只需要设定Paint的属性,然后在onDraw里面交给canvas即可。如果是圆环,那么类型就是Style.STROKE,实心圆是
Style.FILL_AND_STROKE
centerCirclePaint = new Paint(); centerCirclePaint.setColor(colorWhiteP60); centerCirclePaint.setAntiAlias(true); centerCirclePaint.setStyle(Style.FILL_AND_STROKE); canvas.drawCircle(centerX, centerY, innerCircleRadiusToDraw, centerCirclePaint);
圆弧的绘制
圆弧的绘制比较类似,但是调用的是不同的函数,给定的是圆弧的包围矩形,另外我们希望进度条从最上面开始,所以我们的起始角度是270度(0度是右边)canvas.drawArc(outMostCircleRect, startAngle270, 360.0F, false, outMostWhiteCirclePaint);
LongClick状态判断
如何判断用户是单击还是长按呢?我们可以监听用户的触摸事件,设定一个超时的阈值,如果用户按下超过这个时间,那么就是长按,否则就是单击。
超时判断可以采用一个定时的消息,或者每隔一小段时间检查一下。
public boolean onTouchEvent(MotionEvent e) { switch (e.getAction()) { case MotionEvent.ACTION_DOWN: Log.d(TAG, "onTouchEvent: down"); startTicking(); break; case MotionEvent.ACTION_MOVE: Log.d(TAG, "onTouchEvent: move"); break; case MotionEvent.ACTION_UP: Log.d(TAG, "onTouchEvent: up"); reset(); break; } return true; }
动画时限
中间圆形的缩放时间和录制时间是不一样的,我们要分开处理进度条的动画和中间圆形按钮的动画。可以考虑设定一个比例10%,表示如果录制视频的时限为5秒,那么圆形在0.5秒时缩放到最大。
事件回调
在获取到点击和长按的动作并且显示对应的动画以后,我们需要将这个消息传出去。设定一个这样的监听器:
public interface ClickListener { void onClick(); void onLongClickStart(); void onLongClickEnd(); }
当用户ACTION_DOWN没有超过阈值时,onClick被调用
当用户ACTION_DOWN刚好超过阈值时,onLongClickStart被调用
当用户ACTION_DOWN超过阈值后离开或者录制时间达到限制时onLongClickEnd被调用
三、为不同配色的App定制
根据前面的分析,我们的按钮主色调是绿色,如果应用在其他App中,只需要改主色调,其他不变即可。改成橙色试试?
最后给出Demo和示例代码(RecordButton)
回到目录
相关文章推荐
- Android平台美颜相机/Camera实时滤镜/视频编解码/影像后期/人脸技术探索——2.3 仿制Snow相机和FaceU的边框/小脸模式
- Android平台美颜相机/Camera实时滤镜/视频编解码/影像后期/人脸技术探索——2.1 GPUImage结构简析
- Android平台美颜相机/Camera实时滤镜/视频编解码/影像后期/人脸技术探索——参考资料
- Android平台美颜相机/Camera实时滤镜/视频编解码/影像后期/人脸技术探索——2.1 GPUImage结构简析
- Android平台美颜相机/Camera实时滤镜/视频编解码/影像后期/人脸技术探索——1.2 GPGPU解决方案简述
- Android平台美颜相机/Camera实时滤镜/视频编解码/影像后期/人脸技术探索——2.4 滤镜以及配套代码的制作方法
- Android平台美颜相机/Camera实时滤镜/视频编解码/影像后期/人脸技术探索——1.1 工程思路与难点
- Android平台美颜相机/Camera实时滤镜/视频编解码/影像后期/人脸技术探索——目录
- Android平台美颜相机/Camera实时滤镜/视频编解码/影像后期/人脸技术探索——2.2 来一份LOMO滤镜
- 【OpenGL】 Android平台美颜相机、实时滤镜、人脸技术探秘
- Android平台Camera实时滤镜实现方法探讨(三)--通过Shader实现YUV转换RBG
- Android平台Camera实时滤镜实现方法探讨(八)--滤镜基本制作方法(二)简单美颜滤镜
- [Android-Camera开发]Android平台Camera实时预览数据处理即实时滤镜实现方法探讨(三)--通过Shader实现YUV转换RBG
- Android平台Camera实时滤镜实现方法探讨(九)--磨皮算法探讨(一)
- Android平台Camera实时滤镜实现方法探讨(八)--滤镜基本制作方法(二)简单美颜滤镜
- Android平台Camera实时滤镜实现方法探讨(四)--以Hefe滤镜为例
- Android多媒体技术(二)浅析Camera视频实时采集中涉及的参数配置
- Android平台Camera实时滤镜实现方法探讨(三)--通过Shader实现YUV转换RBG
- Android平台Camera实时滤镜实现方法探讨(九)--磨皮算法探讨(一)
- 【Camera】Android平台Camera实时滤镜实现方法