weapp-v2/components/sound-wave.vue

<template>
	<view class="SoundWave">
		<view
			v-for="i in 20"
			:key="i"
			class="Wave-line"
			:class="isPlay ? 'active' : ''"
		/>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				isPlay: false
			}
		},
		methods: {
			play() {
				this.isPlay = true
			},
			pause() {
				this.isPlay = false
			}
		}
	}
</script>

<style lang="scss" scoped>
.SoundWave {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	.Wave-line {
		width: 4rpx;
		background: #FFFFFF;
		border-radius: 4rpx;
		@for $i from 1 through 20 {
			&:nth-of-type(#{$i}) {
				height: #{random(40)}rpx;
			}
		}
		&.active {
			@for $i from 1 through 20 {
				&:nth-of-type(#{$i}) {
					animation: load 2.5s #{(random(10)*0.2)+ 1}s infinite linear;
				}
			}
		}
	}
}
@keyframes load {
	0% {
		height: 100%;
	}
	30% {
		height: 20%;
	}
	60% {
		height: 60%;
	}
	100% {
		height: 10%;
	}
}
</style>