需要实现的效果
图片切换轮播法
这个功能其实是我刚毕业的时候实现的,那也是5年前的事情了,受限于当时的水平,仅仅是实现了,其他啥都不是。相当简单。
当初微信的声音条还是竖状的,所以依旧按照但是的样子来实现。
看下面的这个图片就知道了,甚至于代码都不用贴:
并不是雪碧图,当初不知道雪碧图是啥玩意儿,就是九张独立的图片。上图是使用Excalidraw来绘制。
就是九个图片,给它们基本统一的命名,给一个定时器进行循环的切换,部分代码如下:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
const voiceBox = document.queryselector(ns.w( 'voice' , 'box' )) // 有在改DOM什么显示音频的变动 const index = [9, 8, 7, 6, 5, 4, 3, 2, 1, 2, 3, 4, 5, 6, 7, 8, 9] const num = index.length const startVoice = () => { timer = setInterval(() => { num++ const _curBg = require(`@/assets/images/record_ripple-${index[num]}`.png) voiceBox.style.background = `url( '${_curBg}' ) no-repeat 111.2px 32px/28.8px 88px` voiceBox.style.backgroundColor = ' rgba(0,0,0,.7)' // 从头来过 if (num >= index.length - 1) { num = 0 } }, 70) |
这样的实现效果,给9张图起名字的时间超过写代码的时间。而且毫无灵活性,能够实现什么效果全依靠UI人好不好,你和他喝酒的时候杯子够不够底下。
不管是为了性能还是为了扩展,使用CSS来实现显然是更好选择。
CSS实现
使用anmation的steps也可以实现和上面一模一样的逻辑。
如下代码:
1
2
3
4
5
6
7
8
9
10
|
< div class = "voice-wrap" > < div class = "voice-box" > < div class = "voice-item one" > </ div > < div class = "voice-item two" > </ div > < div class = "voice-item tree" > </ div > </ div > </ div > |
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
|
:root { --vv-b-r: 10px ; --vv-a-s: 0.1 s; } .voice-wrap { background-color : rgba( 111 , 111 , 111 , 0.5 ); border-radius: var(--vv-b-r); width : 80px ; height : 80px ; overflow : hidden ; } .voice-box { display : flex; align-items: center ; width : fit-content; animation: sprite 0.6 s steps( 3 , end) infinite; } .voice-item { height : 10px ; border-radius: var(--vv-b-r); width : 80px ; height : 80px ; display : flex; flex- direction : column; justify- content : space-around; align-items: center ; } @keyframes sprite { 0% { transform: translateX( 0 ); } 100% { transform: translateX( -240px ); } } |
关键的属性就是animation: steps
。 从命名可以看出它是一个步进相关的东西。每一个.voice-item
的宽度时80px,那么它的animation的translateX为-240px。
意思就是动画将.voice-box
节点从0px位置右移到-240px的位置,steps的动画效果,让它移动三次完结,一次移动80px。
画一个图来表示这个过程:
可以说和轮播图一摸一样。
最后给voice-item
节点中添加样式:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
|
< div class = "voice-item one" > < div class = "line-item" ></ div > < div class = "line-item" ></ div > < div class = "line-item" > < div class = "line-item line-one" ></ div > </ div > </ div > < div class = "voice-item two" > < div class = "line-item" ></ div > < div class = "line-item" > < div class = "line-item line-one" ></ div > </ div > < div class = "line-item" > < div class = "line-item line-one" ></ div > </ div > </ div > < div class = "voice-item tree" > < div class = "line-item" > < div class = "line-item line-one" ></ div > </ div > < div class = "line-item" > < div class = "line-item line-one" ></ div > </ div > < div class = "line-item" > < div class = "line-item line-one" ></ div > </ div > </ div > |
1
2
3
4
5
6
7
8
9
|
.line-item { height : 10px ; width : 60px ; background-color : rgba( 111 , 111 , 111 , 0.6 ); border-radius: var(--vv-b-r); } .line-one { background-color : black ; } |
最终实现效果如下:
以上就是JS实现微信播音效果示例详解的详细内容,更多关于JS微信播音效果的资料请关注服务器之家其它相关文章!
原文链接:https://juejin.cn/post/7202238261640822845