请问这个怎么做微信小程序动画？

Question

请问怎么在微信小程序里作出动画，就是从

这样动画成

然后能够不断运行

Answer 1

代码片段：https://developers.weixin.qq.com/s/4hSavxmS7mvq

<view class="wave">
  <image src="./contact.png" mode="cover"></image>
</view>

.wave {
  width: 200rpx;
  height: 200rpx;
  margin: 40rpx auto;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  overflow: hidden;
  position: relative;
}
.wave::before,
.wave::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
}
.wave::before {
  background-color: rgba(100, 134, 178, .4);
  animation: wave 2s infinite;
  z-index: 1;
}
.wave::after {
  background-color: rgba(100, 134, 178, .4);
  animation: wave 2s infinite;
  animation-delay: .3s;
  z-index: 2;
}
.wave image {
  width: 60rpx;
  height: 60rpx;
  position: absolute;
  border-radius: 50%;
  z-index: 3;
}
@keyframes wave {
  0% {
    opacity: 1;
    transform: scale(0);
  }
  100% {
    opacity: 0;
    transform: scale(1);
  }
}