有朋友问ColorUI组件里的波浪动画怎么做的,其实很简单。先来看看效果
原理是三张图片通过动画滚动实现的
wxml代码:
<view class="waveWrapper waveAnimation"> <view class="waveWrapperInner bgTop"> <view class="wave waveTop" style="background-image:url('http://image.weilanwl.com/img/wave-top.png')"></view> </view> <view class="waveWrapperInner bgMiddle"> <view class="wave waveMiddle" style="background-image:url('http://image.weilanwl.com/img/wave-mid.png')"></view> </view> <view class="waveWrapperInner bgBottom"> <view class="wave waveBottom" style="background-image:url('http://image.weilanwl.com/img/wave-bot.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; }
基本上就已经实现了动画,改成相应底色就可以了。