微信原型
微信的拍摄小视频有个功能就是:点击拍照,长按拍摄小视频,我的demo没有用第三方,都是用一些系统自带的相机和录制功能,总体来说适配还不是很好,有些东西还不是很完美,希望看到文章的人能给我一些好的改建进建议.总体就是文章 人畜无害,忘了这句话是哪个说的,看看效果先!很模糊凑合看看来!
单击拍照.gif
长按录视频.gif
实现步骤一:
首先我们先做那个白色圆圈和绿色圆形进度条,自定义一个RingView继承View
拍摄按钮手指放上去,里面的白色内圈会变小,外圈会变大,我们就硬编码吧!初始化外圈半径为50dp,内圈半径为40dp,外面圆形绿色进度条的半径是68,进度条的宽度是4dp,外圈放大值为20,内圈缩小值为10,好了看看改怎么画吧:
画笔初始化
//内圆画笔
mInCirPaint = new Paint();
mInCirPaint.setColor(Color.WHITE);
mInCirPaint.setStyle(Paint.Style.FILL);//填充模式
//外圆画笔
mOutCirPaint = new Paint();
mOutCirPaint.setColor(Color.parseColor("#999999"));
mOutCirPaint.setStyle(Paint.Style.FILL);//填充模式
//进度条画笔
mArcPaint = new Paint();
mArcPaint.setColor(Color.GREEN);//画笔颜色
mArcPaint.setAntiAlias(true);//抗锯齿
mArcPaint.setStyle(Paint.Style.STROKE);//空心
mArcPaint.setDither(true);//防抖动
mArcPaint.setStrokeCap(Paint.Cap.SQUARE);//在画笔的起始处是平的
mArcPaint.setPathEffect(new CornerPathEffect(2));//画笔效果
画这三部分
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
drawOutCircle(canvas);
drawInCircle(canvas);
drawRingCircle(canvas);
}
private void drawOutCircle(Canvas canvas) {
canvas.drawCircle(mWidth / 2, mHeight / 2, outRadius + outChange * percentCircle, mOutCirPaint);
}
private void drawInCircle(Canvas canvas) {
canvas.drawCircle(mWidth / 2, mHeight / 2, inRadius - inChange * percentCircle, mInCirPaint);
}
private void drawRingCircle(Canvas canvas) {
canvas.drawArc(rectFRing, 270, percentRing * 360, false, mArcPaint);
}
手指监听
@Override
public boolean onTouchEvent(MotionEvent event) {
int action = event.getAction();
float x = event.getX();
float y = event.getY();
switch (action) {
case MotionEvent.ACTION_DOWN:
//如果处于拍照时就不能在进行点击
if (isTakePhoto) {
return false;
}
//要保证按的是在按钮之上
if (mWidth / 2 - inRadius > x || x > mWidth / 2 + inRadius || mHeight / 2 - inRadius > y || y > mHeight / 2 + inRadius) {
return false;
}
//设置录像状态
isRecord = true;
//设置抬起状态
isTouchup = false;
//绘制内圆和外圆的变化
setCircleAni();
//按下时间
downTimeMillisme = System.currentTimeMillis();
break;
case MotionEvent.ACTION_UP:
uPTimeMillis = System.currentTimeMillis();
//如果手指按下到抬起时间小于1秒就是拍照
if (uPTimeMillis - downTimeMillisme <= 1000) {
isRecord = false;
//拍照
}
//手指抬起事件取消
isTouchup = true;
break;
case MotionEvent.ACTION_CANCEL:
break;
}
return true;
}
更新内圆外圆大小
private void setCircleAni() {
//圆环动画
final ValueAnimator cirlPercentAnimator = ValueAnimator.ofFloat(0, 1);
cirlPercentAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
//手指抬起取消录制,一秒之内就是拍照
if (isTouchup) {
//内圆外圆重置
if (null != onRecordListener) {
//这个时候就是拍照
isTakePhoto = true;
onRecordListener.takePhoto();
}
percentCircle = 0;
//这个地方是去更新内圆外圆的大小变化,重置内圆外圆原来大小
invalidate();
cirlPercentAnimator.cancel();
} else {
percentCircle = (float) animation.getAnimatedValue();
//更新外圆内圆大小
invalidate();
if (percentCircle == 1) {//长按到了一分钟(这个时间都是自己控制的),说明动画结束了,就要开始录制视频
startRecord();
}
}
}
});
cirlPercentAnimator.setDuration(1000);
cirlPercentAnimator.start();
}
设置进度条
private void getAngle() {
//圆环动画
final ValueAnimator percentRingAnimator = ValueAnimator.ofFloat(0, 1);
percentRingAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
//手指抬起取消录制
if (isTouchup) {
percentRingAnimator.cancel();
//内圆外圆重置
percentCircle = 0;
percentRing = 0;
invalidate();
//停止录制
stopRecordVideo();
} else {
percentRing = (float) animation.getAnimatedValue();
invalidate();
if (percentRing == 1) {//停止录制
stopRecordVideo();
//内圆外圆重置
percentCircle = 0;
percentRing = 0;
invalidate();
}
}
}
});
percentRingAnimator.setDuration(10000);
percentRingAnimator.start();
}
以上都是自定义View部分,主界面录像调用相机和录制部分,就不贴上来了,直接方式源码
demo
