Html仿QQ音乐小节奏音浪动效
前言：想仿一下QQ音乐PC端上面的小节奏音浪动效，如果用Gif动图来实现，画图太耗时间，而且拉伸图片容易失真，所以就直接用Html和JavaScript来实现了。
效果对比：
QQ音乐上的效果：
用Html和JavaScript来实现的效果：
实现代码：
rhythm.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>仿QQ音乐小节奏音浪动效</title>
<link rel="stylesheet" type="text/css" href="./css/rhythm.css" />
<script src="./js/jquery-3.5.0.min.js" type="text/javascript" charset="utf-8"></script>
<script src="./js/rhythm.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<!-- 在需要这个小节奏音浪的地方粘贴以下代码即可，要多少个就粘贴多少次 -->
<span class="rhythm"></span>
<span class="rhythm"></span>
<span class="rhythm"></span>
<span class="rhythm"></span>
<span class="rhythm"></span>
<span class="rhythm"></span>
</body>
</html>
rhythm.css
* {
padding: 0;
margin: 0;
}
body {
background-color: #171718;
}
.rhythm {
width: 14px;
height: 11px;
display: inline-block;
}
.rhythmItem {
display: flex;
align-items: flex-end;
height: 100%;
}
.rhythmItem>div {
/* 不放大、缩小 */
flex-grow: 0;
flex-shrink: 0;
width: 2px;
margin-right: 2px;
height: 11px;
background-color: #fff;
}
.rhythmItem :nth-child(4) {
margin-right: 0;
}
rhythm.js
function randNum(min, max) {
return min + Math.floor(Math.random() * (max - min + 1));
}
function randBoolean() {
return randNum(0, 1) == 1 ? true : false;
}
$(document).ready(function() {
//该函数负责创建音频柱子和为音频柱子添加特效
function rhythemCreator() {
//为class为rhythm的元素里面添加rhythmItem
$(".rhythm").append("<div class=\"rhythmItem\"></div>");
// 为class为rhythmItem的元素里面添加四根音频柱子
$(".rhythmItem").append("<div></div>");
$(".rhythmItem").append("<div></div>");
$(".rhythmItem").append("<div></div>");
$(".rhythmItem").append("<div></div>");
// 为class为rhythmItem的4个div子元素（4根音频柱子）分别添加随机升降特效（随机的高度初始值和是否递增布尔值的初始值）
rhythemChanger(".rhythmItem div:nth-child(1)", randNum(2, 11), randBoolean());
rhythemChanger(".rhythmItem div:nth-child(2)", randNum(2, 11), randBoolean());
rhythemChanger(".rhythmItem div:nth-child(3)", randNum(2, 11), randBoolean());
rhythemChanger(".rhythmItem div:nth-child(4)", randNum(2, 11), randBoolean());
}
//该函数为定时设置音频柱子的高度（动效）
async function rhythemChanger(obj, start, addRhythem) {
//音频柱子的高度最小值
let minHeight = 2;
//音频柱子的高度最大值
let maxHeight = 11;
$(obj).height(start);
let nowHeight = start;
//每75ms设置一次音频柱子高度
setInterval(function() {
let nowHeight = $(obj).height();
//达到最高高度则开始递减高度
addRhythem = nowHeight == maxHeight ? false : addRhythem;
//达到最低高度则开始递增高度
addRhythem = nowHeight == minHeight ? true : addRhythem;
if (addRhythem == true) {
let newHeight = nowHeight + randNum(1, 2);
$(obj).height(newHeight > maxHeight ? maxHeight : newHeight);
} else {
let newHeight = nowHeight - randNum(1, 2);
$(obj).height(newHeight < minHeight ? minHeight : newHeight);
}
}, 75);
}
//让节奏音浪动起来
rhythemCreator();
});
备注：
- 不知道为什么有时候音频柱子会出现粗细不一的情况
- 这个小音浪是行内块元素，w:14px，h:11px
如文章表述有不足之处还请斧正，如果有更好的实现方法请大佬留言一下
本文章为本博客原创，转载请标明来源于本站，谢谢