需要简单的js波形的动画,找了好几个都是画线的,不过需要的是一个画方块的,因此动手写了一个。
首先需要波形符合一个正弦函数的形状,然后再加上点随机变量让他看起来是一个接近真实的状态。
效果如下:
HTML代码部分:
<div class="container">
<div class="item" id="item-0"></div>
<div class="item" id="item-1"></div>
<div class="item" id="item-2"></div>
<div class="item" id="item-3"></div>
<div class="item" id="item-4"></div>
<div class="item" id="item-5"></div>
<div class="item" id="item-6"></div>
<div class="item" id="item-7"></div>
<div class="item" id="item-8"></div>
<div class="item" id="item-9"></div>
</div>
CSS代码部分:
.container {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
height: 100px;
width: 300px;
}
.item {
background-color: blue;
width: 10px;
margin-right: 8px;
}
JS代码部分
setInterval(() => {
for(let i = 0; i < 10; i++) {
let ele = document.getElementById(`item-${
i}`)
let height = 100 * Math.sin(Math.PI / 10 * i) * Math.random()
ele.style = `transition: height 0.15s ease;height:${
height}px;`
}
}, 150);