您好,登錄后才能下訂單哦!
這篇文章主要講解了“JS如何實(shí)現(xiàn)微信播音效果”,文中的講解內(nèi)容簡(jiǎn)單清晰,易于學(xué)習(xí)與理解,下面請(qǐng)大家跟著小編的思路慢慢深入,一起來(lái)研究和學(xué)習(xí)“JS如何實(shí)現(xiàn)微信播音效果”吧!
這個(gè)功能其實(shí)是我剛畢業(yè)的時(shí)候?qū)崿F(xiàn)的,那也是5年前的事情了,受限于當(dāng)時(shí)的水平,僅僅是實(shí)現(xiàn)了,其他啥都不是。相當(dāng)簡(jiǎn)單。
當(dāng)初微信的聲音條還是豎狀的,所以依舊按照但是的樣子來(lái)實(shí)現(xiàn)。
并不是雪碧圖,當(dāng)初不知道雪碧圖是啥玩意兒,就是九張獨(dú)立的圖片。上圖是使用Excalidraw來(lái)繪制。
就是九個(gè)圖片,給它們基本統(tǒng)一的命名,給一個(gè)定時(shí)器進(jìn)行循環(huán)的切換,部分代碼如下:
const voiceBox = document.queryselector(ns.w('voice', 'box')) // 有在改DOM什么顯示音頻的變動(dòng) 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)' // 從頭來(lái)過(guò) if (num >= index.length - 1) { num = 0 } }, 70)
這樣的實(shí)現(xiàn)效果,給9張圖起名字的時(shí)間超過(guò)寫(xiě)代碼的時(shí)間。而且毫無(wú)靈活性,能夠?qū)崿F(xiàn)什么效果全依靠UI人好不好,你和他喝酒的時(shí)候杯子夠不夠底下。
不管是為了性能還是為了擴(kuò)展,使用CSS來(lái)實(shí)現(xiàn)顯然是更好選擇。
使用anmation的steps也可以實(shí)現(xiàn)和上面一模一樣的邏輯。
如下代碼:
<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>
:root { --vv-b-r: 10px; --vv-a-s: 0.1s; } .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.6s 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); } }
關(guān)鍵的屬性就是animation: steps
。 從命名可以看出它是一個(gè)步進(jìn)相關(guān)的東西。每一個(gè).voice-item
的寬度時(shí)80px,那么它的animation的translateX為-240px。
意思就是動(dòng)畫(huà)將.voice-box
節(jié)點(diǎn)從0px位置右移到-240px的位置,steps的動(dòng)畫(huà)效果,讓它移動(dòng)三次完結(jié),一次移動(dòng)80px。
畫(huà)一個(gè)圖來(lái)表示這個(gè)過(guò)程:
可以說(shuō)和輪播圖一摸一樣。
最后給voice-item
節(jié)點(diǎn)中添加樣式:
<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>
.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如何實(shí)現(xiàn)微信播音效果”的內(nèi)容了,經(jīng)過(guò)本文的學(xué)習(xí)后,相信大家對(duì)JS如何實(shí)現(xiàn)微信播音效果這一問(wèn)題有了更深刻的體會(huì),具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是億速云,小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章,歡迎關(guān)注!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。