最近在做一款类似FaceU的App，需要做短按拍照，长按录像功能，虽然长按只需要LongClickListener就好了，但是要同时做出动画效果。
在网上转了一圈，发现仿微信长按录像的不少，例如这个，但是仿FaceU的好像还没有，所以决定自己写一个。
先放一张效果图：
仿FaceU录像按钮.gif
一、实现流程分析
按钮要实现类似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中，只需要改主色调，其他不变即可。
改成橙色试试？
FaceU_orange.gif
网友评论