仿微信小视频拍照录像

微信原型

微信的拍摄小视频有个功能就是:点击拍照,长按拍摄小视频,我的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