微信小程序ColorUl组件中波浪动画的实现

波浪动画的实现"/>

微信小程序ColorUl组件中波浪动画的实现

ColorUI组件里的波浪动画怎么做的，其实很简单。先来看看效果

原理是三张图片通过动画滚动实现的
wxml代码：

  <view class="waveWrapper waveAnimation"><view class="waveWrapperInner bgTop"><view class="wave waveTop" style="background-image:url('.png')"></view></view><view class="waveWrapperInner bgMiddle"><view class="wave waveMiddle" style="background-image:url('.png')"></view></view><view class="waveWrapperInner bgBottom"><view class="wave waveBottom" style="background-image:url('.png')"></view></view></view>

图片只能是网络图片

wxss代码：

@keyframes move_wave {0% {transform: translateX(0) translateZ(0) scaleY(1);}50% {transform: translateX(-25%) translateZ(0) scaleY(1);}100% {transform: translateX(-50%) translateZ(0) scaleY(1);}
}.waveWrapper {overflow: hidden;position: relative;height: 50rpx;width: 100%;background: #39b54a;
}.waveWrapperInner {position: absolute;width: 100%;overflow: hidden;height: 100%;bottom: -1px;
}
.bgTop {z-index: 15;opacity: 0.5;height: 24px;
}.bgMiddle {z-index: 10;opacity: 0.75;height: 19px;
}.bgBottom {z-index: 5;height: 14px;
}.wave {position: absolute;left: 0;width: 2160px;height: 100%;background-repeat: repeat no-repeat;background-position: 0 bottom;transform-origin: center bottom;
}
.wave image {width: 100%;position: absolute;bottom: 0;
}.waveTop {background-size: 540px 25px;
}.waveAnimation .waveTop {animation: move_wave 30s linear infinite;
}.waveMiddle {background-size: 1080px 20px;
}.waveAnimation .waveMiddle {animation: move_wave 24s linear infinite;
}.waveBottom {background-size: 540px 15px;
}.waveAnimation .waveBottom {animation: move_wave 12s linear infinite;
}

基本上就已经实现了动画，改成相应底色就可以了。