微信小程序-H5-uniapp css制作上下跳动的柱状图——频谱

当前端开发一些H5或者微信小程序页面的时候，总会遇到一些奇怪的设计，他的音乐关闭按钮不用转圈的音符，那只要加入旋转动画+切换音符图片即可。
那么当要制作一些上下跳动的柱状图（频谱）的话我们需要怎么做呢？

一、微信小程序（uniapp如下）

uniapp与微信小程序的写法类似，小伙伴们自己动动脑哦
效果图如下：

当然这个是会动的，话不多说上代码
在微信小程序wxml中是这样的：

<view class="con-audio"  bindtap="conMusic">
		<section>
			<!--这里是使用三元运算符，感兴趣的小伙伴们可以了解一下**/-->
			<span style="animation-play-state:{{openMusic == true ? 'running' : 'paused'}}"></span>
			<span style="animation-play-state:{{openMusic == true ? 'running' : 'paused'}}"></span>
			<span style="animation-play-state:{{openMusic == true ? 'running' : 'paused'}}"></span>
			<span style="animation-play-state:{{openMusic == true ? 'running' : 'paused'}}"></span>
		</section>
	</view>

在wxss中，的样式

.con-audio {
  animation: backColor 4s infinite;
  z-index: 2;
  position: fixed;
  left: 50rpx;
  width: 50rpx;
  height: 50rpx;
}

.con-audio section {
  position: absolute;
  width: 100%;
  height: 100%;
}



.con-audio span{
	width: 3px;
	height: 30rpx;
	border-radius: 10rpx 10rpx 0rpx 0rpx;
	bottom: 0rpx;
	position: absolute;
	background: #e6c27e;
	color: #e6c27e;
}

.con-audio span:nth-child(1) {
  width: 3px;
  animation: loading 0.4s 0.3s linear infinite alternate;
  animation-play-state: running; 
}
.con-audio span:nth-child(2) {
  left: 13rpx;
  animation: loading 0.5s 0.5s linear infinite alternate;
  animation-play-state: running; 
}
.con-audio span:nth-child(3) {
  left: 25rpx;
  animation: loading 0.6s 0.8s linear infinite alternate;
  animation-play-state: running; 
}
.con-audio span:nth-child(4) {
  left: 37rpx;
  animation: loading 0.4s 0.3s linear infinite alternate;
  animation-play-state: running; 
}


@keyframes loading {
  0% {
    height: 30rpx;
  }
  100% {
    height: 5px;
  }
}

@keyframes loading {
  0% {
    height: 30rpx;
    /* transform: translateY(0); */
  }
  100% {
    height: 5px;
    /* transform: translateY(7.5px); */
  }
}

我这里的css写法比较呆，哈哈哈不要在意哈😳。
bindtap是用来进行绑定点击方法的，我们可以绑定点击方法，来控制音乐暂停与这个柱状图跳动微信js如下：

conMusic(){
	var that = this;
	var music = !that.data.openMusic
	console.log('开始播放111111122222',music)
	if(music){
		that.innerAudioContext.play()
		// this.audioCtx.play()
	}else{
		that.innerAudioContext.pause()
		// this.audioCtx.pause()
	}
	//这里是用来设置值的
	/**用来对wxml的style="animation-play-state:{{openMusic == true ? 'running' : 'paused'}}"
	进行控制的  这里是使用三元运算符，感兴趣的小伙伴们可以了解一下**/
	that.setData({
		openMusic:music
	})
  },

那么我们在微信小程序中就可以跳动起来啦！还可以对它的跳动进行暂停

二、H5

效果图：

html中只需将view改为div即可

<div class="con-audio" onclick="conAudio()">
	<section>
		<span></span>
		<span></span>
		<span></span>
	</section>
</div>

css样式

.con-audio {
  display: flex;
  justify-content: center;
  align-items: center;
  animation: backColor 4s infinite;
  z-index: 100;
  width: 50px;
  height: 18px;
  position: fixed;
  top: 18px;
  right: 15px;
  overflow: hidden;
}
.con-audio section {
  width: max-content;
  height: auto;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.con-audio span:nth-child(1) {
  width: 3px;
  height: 18px;
  /* margin-left: 3px; */
  border-radius: 4px;
  display: inline-block;
  position: relative;
  background: #e6c27e;
  color: #e6c27e;
  animation: loading 0.4s 0.3s linear infinite alternate;
  animation-play-state: running; 
}
.con-audio span:nth-child(2) {
  width: 3px;
  height: 18px;
  margin-left: 4px;
  border-radius: 4px;
  display: inline-block;
  position: relative;
  background: #e6c27e;
  color: #e6c27e;
  animation: loading 0.5s 0.5s linear infinite alternate;
  animation-play-state: running; 
}
.con-audio span:nth-child(3) {
  width: 3px;
  height: 18px;
  margin-left: 4px;
  border-radius: 4px;
  display: inline-block;
  position: relative;
  background: #e6c27e;
  color: #e6c27e;
  animation: loading 0.6s 0.8s linear infinite alternate;
  animation-play-state: running; 
}
@keyframes loading {
  0% {
    height: 18px;
    transform: translateY(0);
  }
  100% {
    height: 5px;
    transform: translateY(7.5px);
  }
}

conAudio()控制方法

function conAudio(){
    var media = document.querySelector('#bg-music');
    if (media.paused) {
        media.play();
        //和微信小程序不一样，可以直接改变样式
		$('.con-audio span').css("animation-play-state",'running');
		
    }else{
        media.pause();
		$('.con-audio span').css("animation-play-state",'paused');
    }
}

这是我的一些思路哦，如果您有更好的方法请在下方评论，让我也学学🤭