css+js实现录音环形进度条

在html5或者移动端开发中，如果需要用户录音功能，那么应该是需要用户点击触发动画来实现一个录音的动效或者控制时间

1. 简单实现一个滚动条效果

具体效果如下：

可以自定义圆环的轨道灰色为其他色或者透明，也可以自定义进度条的颜色为别的颜色，中间是一个图片，可以自定义

代码如下：

1. html代码

<div class="record-container">
    <div class="circle_process" @touchstart="startRecord" @touchend="stopRecord" @touchcancel="stopRecord">
      <div class="wrapper right">
        <div class="circle rightcircle" ref="rightCircle"></div>
      </div>
      <div class="wrapper left">
        <div class="circle leftcircle" ref="leftCircle"></div>
      </div>
      <div class="middle-circle">
      	<!--这里不要直接使用图片作为中间的录制图片，ios上按压会默认提示保存图片-->
        <!--<img src="../images/record/record_btn_mini.png" alt="">-->
      </div>
    </div>
  </div>

2. css代码

  .record-container {
    margin-top: 2.5rem;
  }

  .circle_process{
    position: relative;
    width: 200px;
    height : 140px;
    margin: 30px auto 5px;
  }
  .circle_process .wrapper{
    width: 70px;
    height: 140px;
    position: absolute;
    top:0;
    overflow: hidden;
  }

  .circle_process .right{
    right: 31px;
  }
  .circle_process .left{
    left: 30px;
  }
  .circle_process .circle{
    width: 120px;
    height: 120px;
    border: 10px solid #666;
    border-radius: 50%;
    position: absolute;
    top:0;
    transform : rotate(-135deg);
  }
  .circle_process .rightcircle {
    border-top: 10px solid rgb(57, 135, 239);
    border-right: 10px solid rgb(57, 135, 239);
    right:0;
  }

  .circle_process .leftcircle {
    border-bottom: 10px solid rgb(57, 135, 239);
    border-left: 10px solid rgb(57, 135, 239);
    left:0;
  }

  .active-animation-right {
    animation: circle_right 4s linear forwards;
    -webkit-animation: circle_right 4s linear forwards;
  }
  .active-animation-left {
    animation: circle_right 4s linear forwards;
    -webkit-animation: circle_left 4s linear forwards;
  }
  @-webkit-keyframes circle_right{
    0%{
      -webkit-transform: rotate(-135deg);
    }
    50%,100%{
      -webkit-transform: rotate(45deg);
    }
  }
  @-webkit-keyframes circle_left{
    0%,50%{
      -webkit-transform: rotate(-135deg);
    }
    100%{
      -webkit-transform: rotate(45deg);
    }
  }

  .paused-animation {
    animation-play-state: paused;
    -webkit-animation-play-state: paused; /* Safari 和 Chrome */
  }
  .active-animation {
    animation-play-state: running;
    -webkit-animation-play-state: running; /* Safari 和 Chrome */
  }

  .middle-circle {
    width: 30px;
    height: 72px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: url("../images/record/record_btn_mini.png") no-repeat center 100% / 100%;
  }
  .middle-circle img {
    display: block;
    width: 30px;
    height: 72px;
  }

3. js代码，控制触摸进度条就开始增加

js代码是基于vue实现，因为获取dom都是直接使用的jquery获取， 也可以直接使用到js中，基本都差不多

  import $ from 'jquery'

  export default {
    data() {
      return {
        leftCircleAnim: '',
        rightCircleAnim: '',
        startTime: '',
        endTime: '',
        flag: 0
      }
    },
    watch: {
      flag: {
        handler: function(newVal, oldVal){
          if(newVal === -1 && oldVal === 1) {
            // 通过删除增加类名，达到重新开始动画
            $('.rightcircle').removeClass('active-animation-right')
            $('.leftcircle').removeClass('active-animation-left')
          }
        }
      }
    },
    methods: {
      startRecord(e) {
        e.preventDefault() // 在触摸事件执行时阻止鼠标时间的发生
        const _this = this

        this.startTime = new Date().getTime()
        this.flag = -1 // 第二次重洗开始动画，这个触发watch监听

        setTimeout(() => {
          $('.rightcircle').addClass('active-animation-right')
          $('.leftcircle').addClass('active-animation-left')
        }, 100)

        $('.rightcircle').css('-webkit-animation-play-state', 'running')
        $('.leftcircle').css('-webkit-animation-play-state', 'running')

      },
      stopRecord(e) {
        this.flag = -(this.flag) // 判断是否是手动停止、5秒自动停止或者是满1分钟后自动停止但是还在触摸状态
        if(this.flag > 0) {
          this.endTime = new Date().getTime()


          $('.rightcircle').css('-webkit-animation-play-state', 'paused')
          $('.leftcircle').css('-webkit-animation-play-state', 'paused')
			
		  // 如果录音时间小于500ms 则重置动画，不录音
          if(this.endTime - this.startTime < 500){
            this.startTime = 0
            this.endTime = 0

            // 重置动画
            $('.rightcircle').removeClass('active-animation-right')
            $('.leftcircle').removeClass('active-animation-left')

            return false
          }
        }
      }
    }
  }

js代码就是主要控制进度条的开始和结束，就是给对应的元素加上动画和移除动画，达到动画可以反复使用，watch监听主要是用在第一次录音完成，第二次还想要重新再录一次，那么动画就要重头开始，就使用watch来完成是否重新开始运行动画。
并且在录音时间小于500ms，动画就会自动重置。

注意：
中间的图片需要使用背景图片来做，否则ios上长按系统会提示保存图片，设置为背景图片就正常