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上長按系統會提示保存圖片，設置爲背景圖片就正常