微信小程序音频录制---波纹循环动画

实现的效果

第一种方法(利用微信小程序的animation)

wxml部分

<!--pages/myRecode/myRecode.wxml-->
<view class="myRecode">
  <view class="recode" bindtouchstart='recodeClick' bindtouchend='recodeEnd'>
    <text>长按</text>
    <view class="ripple"></view>
    <view class="ripple" animation="{
    {animationData1}}"></view>
    <view class="ripple" animation="{
    {animationData2}}"></view>
  </view>
</view>

wxss部分

/* pages/myRecode/myRecode.wxss */
.myRecode{
   
  padding-top:500rpx;
  text-align: center;
  box-sizing: border-box;
}
.myRecode .recode{
   
  display: inline-block;
  width:200rpx;
  height:200rpx;
  background: #EBB128;
  border-radius: 50%;
  text-align: center;
  color:#fff;
  line-height: 200rpx;
  position: relative;
}
.ripple{
   
  position: absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  border-radius: 50%;
  border:2px solid #F6F1CC;
}

js 部分

// pages/myRecode/myRecode.js
Page({
   

  /**
   * 页面的初始数据
   */
  data: {
   
    animationData1: "",
    animationData2: ""