小程序圆形进度条 误差解决方案

产品需求

录音功能使用圆形进度条做倒计时

1 常规方案

WXML

<view class="main">
  <view class="circle">
    <view class="circle1">
      <view class="circle1Bar"></view>
    </view>
    <view class="circle2">
      <view class="circle2Bar"></view>
    </view>
  </view>
</view>

WXSS

.circle {
  width: 200rpx;
  height: 200rpx;
  position: relative;
  background-color: blue;
}

.circle1 {
  width: 50%;
  height: 100%;
  position: absolute;
  top: 0;
  right: 0;
  background-color: #999;
  overflow: hidden;
}

.circle1Bar {
  width: 200rpx;
  height: 200rpx;
  position: absolute;
  top: 0;
  right: 0;
  box-sizing: border-box;
  border-radius: 50%;
  border-top: 20rpx solid red;
  border-right: 20rpx solid transparent;
  border-bottom: 20rpx solid transparent;
  border-left: 20rpx solid red;
  animation: circle1BarAni 10s linear infinite;
}

@keyframes circle1BarAni {
  0% {
    transform: rotate(-45deg);
  }

  50%,
  100% {
    transform: rotate(135deg);
  }

}

.circle2 {
  width: 50%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: #999;
  overflow: hidden;
}

.circle2Bar {                                             
  width: 200rpx;
  height: 200rpx;
  position: absolute;
  top: 0;
  left: 0;
  box-sizing: border-box;
  border-radius: 50%;
  border-top: 20rpx solid red;
  border-right: 20rpx solid red;
  border-bottom: 20rpx solid transparent;
  border-left: 20rpx solid transparent;
  animation: circle2BarAni 10s linear infinite;
}

@keyframes circle2BarAni {

  0%,
  50% {
    transform: rotate(45deg);
  }

  100% {
    transform: rotate(225deg);
  }
}

结果不是很满意 在小程序中会出现问题

2 为了解决 中间的线条 那就用四个角来实现

WXML

 <view class="circle">
    <view class="circle1">
      <view class="circle1Bar"></view>
    </view>
    <view class="circle2">
      <view class="circle2Bar"></view>
    </view>
    <view class="circle3">
      <view class="circle3Bar"></view>
    </view>
    <view class="circle4">
      <view class="circle4Bar"></view>
    </view>
 </view>
 
 WXSS
 
 .circle {
  width: 200rpx;
  height: 200rpx;
  position: relative;
  background-color: blue;
}

.circle1 {
  width: 50%;
  height: 52%;
  position: absolute;
  top: 0;
  right: 0;
  background-color: #999;
  overflow: hidden;
}

.circle1Bar {
  width: 200rpx;
  height: 200rpx;
  position: absolute;
  top: 0;
  right: 0;
  box-sizing: border-box;
  border-radius: 50%;
  border-top: 20rpx solid red;
  border-right: 20rpx solid transparent;
  border-bottom: 20rpx solid transparent;
  border-left: 20rpx solid red;
  animation: circle1BarAni 10s linear infinite;
}

@keyframes circle1BarAni {
  0% {
    transform: rotate(-45deg);
  }

  25% {
    transform: rotate(45deg);
  }

  26% {
    transform: rotate(47deg);
  }

  100% {
    transform: rotate(47deg);
  }
}

.circle2 {
  width: 52%;
  height: 50%;
  position: absolute;
  bottom: 0;
  right: 0;
  background-color: #999;
  overflow: hidden;
}

.circle2Bar {
  width: 200rpx;
  height: 200rpx;
  position: absolute;
  bottom: 0;
  right: 0;
  box-sizing: border-box;
  border-radius: 50%;
  border-top: 20rpx solid red;
  border-right: 20rpx solid red;
  border-bottom: 20rpx solid transparent;
  border-left: 20rpx solid transparent;
  animation: circle2BarAni 10s linear infinite;
}

@keyframes circle2BarAni {

  0%,
  25% {
    transform: rotate(-90deg);
  }

  25.1% {
    transform: rotate(-45deg);
  }

  50% {
    transform: rotate(45deg);
  }

  51% {
    transform: rotate(47deg);
  }

  100% {
    transform: rotate(47deg);
  }
}

.circle3 {
  width: 50%;
  height: 52%;
  position: absolute;
  bottom: 0;
  left: 0;
  background-color: #999;
  overflow: hidden;
}

.circle3Bar {
  width: 200rpx;
  height: 200rpx;
  position: absolute;
  bottom: 0;
  left: 0;
  box-sizing: border-box;
  border-radius: 50%;
  border-top: 20rpx solid transparent;
  border-right: 20rpx solid red;
  border-bottom: 20rpx solid red;
  border-left: 20rpx solid transparent;
  animation: circle3BarAni 10s linear infinite;
}

@keyframes circle3BarAni {

  0%,
  50% {
    transform: rotate(-90deg);
  }

  50.1% {
    transform: rotate(-45deg);
  }

  75%{
    transform: rotate(45deg);
  }
  76%{
    transform: rotate(47deg);
  }
  100% {
    transform: rotate(47deg);
  }
}

.circle4 {
  width: 52%;
  height: 50%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: #999;
  overflow: hidden;
}

.circle4Bar {
  width: 200rpx;
  height: 200rpx;
  position: absolute;
  top: 0;
  left: 0;
  box-sizing: border-box;
  border-radius: 50%;
  border-top: 20rpx solid transparent;
  border-right: 20rpx solid transparent;
  border-bottom: 20rpx solid red;
  border-left: 20rpx solid red;
  animation: circle4BarAni 10s linear infinite;
}

@keyframes circle4BarAni {

  0%,
  75% {
    transform: rotate(-90deg);
  }

  75.1% {
    transform: rotate(-45deg);
  }

  100% {
    transform: rotate(47deg);
  }
}

暂时是解决的需求，手机测试 没有问题。

3 CANVAS 还没有尝试

在小程序中 使用px rpx 中是会遇到一些 问题，同样尺寸的 view 结果显示出来 高度不一，坑咱们一点一点填，小马一片一片挖！做个程序员真难。