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

回到目录

最近需要做短按拍照，长按录像功能，虽然长按只需要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)

回到目录