Android平台美颜相机/Camera实时滤镜/视频编解码/影像后期/人脸技术探索——4.1高仿FaceU长按录像按钮

时间:2021-03-06 20:28:33

回到目录

最近需要做短按拍照,长按录像功能,虽然长按只需要LongClickListener就好了,但是要同时做出动画效果。
在网上转了一圈,发现仿微信长按录像的不少,例如这个,但是仿FaceU的好像还没有,所以决定自己写一个。
先放一张效果图:
Android平台美颜相机/Camera实时滤镜/视频编解码/影像后期/人脸技术探索——4.1高仿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中,只需要改主色调,其他不变即可。
改成橙色试试?
Android平台美颜相机/Camera实时滤镜/视频编解码/影像后期/人脸技术探索——4.1高仿FaceU长按录像按钮

最后给出Demo示例代码(RecordButton)

回到目录