Html仿QQ音乐小节奏音浪动效

前言:想仿一下QQ音乐PC端上面的小节奏音浪动效,如果用Gif动图来实现,画图太耗时间,而且拉伸图片容易失真,所以就直接用Html和JavaScript来实现了。

效果对比:

QQ音乐上的效果:

1606102862

用Html和JavaScript来实现的效果:

1606102951

实现代码:

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();
});

备注:

  1. 不知道为什么有时候音频柱子会出现粗细不一的情况
  2. 这个小音浪是行内块元素,w:14px,h:11px

如文章表述有不足之处还请斧正,如果有更好的实现方法请大佬留言一下

本文章为本博客原创,转载请标明来源于本站,谢谢

最后修改:2020 年 11 月 23 日 02 : 01 PM
如果觉得我的文章对你有用,请随意赞赏