小程序波浪球动画

先看一下效果，波浪的大小会根据数值的变化而不断变化

html代码（这里只写和波浪球相关的代码）

<view class="charging-ball-container">
    <view class="wave-wrapper" style="bottom:{{percent}}%"></view>
    <view class="percent-txt">{{percent}}%</view>
</view>

css代码

.charging-ball{
  position: relative;
  align-items: center;
  width: 350rpx;
  height: 350rpx;
  border-radius: 50%;
  background-color: #12FFBE;
  overflow: hidden;
  border: 8rpx solid #c6ffed;
  z-index: 100;
}
.wave-wrapper {
  position: absolute;
  left: 50%;
  width: 700rpx;
  height: 700rpx;
  background-color: #fff;
  border-radius: 50%;
   /* 动画完成花费的时间 */
  animation-duration: 5s;
  animation-name: rotate;
  /* 无限次播放动画 */
  animation-iteration-count: infinite;
  /* 动画从头到尾的速度是相同的 */
  animation-timing-function: linear;
}
.percent-txt{
  position: absolute;
  z-index: 200;
  left: 35%;
  top: 40%;
  color: #fff;
  font-size: 76rpx;
  font-weight: 500;
}
/* 过渡动画 */
@keyframes rotate {
  0% {
    transform: translate(-50%, 0) rotateZ(0deg);
  }
  50% {
    transform: translate(-50%, -1%) rotateZ(180deg);
  }
  100% {
    transform: translate(-50%, 0) rotateZ(360deg);
  }
}

js代码

js中的代码很少，就是定义了一个百分比的数字

data: {
    orderId: 0,
    percent: 55
},