嗶哩嗶哩動(dòng)畫(huà)（b站）彈幕是怎么實(shí)現(xiàn)的？

我看了下彈幕的代碼，用到了transition和3d加速，只是有些疑惑如下：
1、不太明白彈幕很多的時(shí)候是怎么解決卡頓的。
2、transition動(dòng)畫(huà)是怎么實(shí)現(xiàn)暫停的，彈幕div有個(gè)animation pause的屬性，但是沒(méi)有找到keyframe動(dòng)畫(huà)。
3、加了will-change: transform屬性，動(dòng)畫(huà)結(jié)束后恢復(fù)到auto，但感覺(jué)沒(méi)啥變化……
4、我用的是定時(shí)器setInterval，當(dāng)毫秒數(shù)設(shè)置的比較低的時(shí)候，會(huì)出現(xiàn)輕微的卡頓。如果用requestAnimationFrame的話，速度怎么控制呢？

回答

編輯回答

痞性

確實(shí)是transition動(dòng)畫(huà)，沒(méi)看到3D加速，will-change倒是有

沒(méi)用annimation動(dòng)畫(huà)。
animation-play-state:paused; 沒(méi)卵用，估計(jì)是歷史遺留，以前可能是annimation處理的，故有此一舉。

也可能是這玩意兒對(duì)GPU加速有效果？沒(méi)測(cè)試過(guò)。以上只是一個(gè)猜測(cè)

播放器彈幕的處理方式是：

播放時(shí)，設(shè)置其translateX和transform。
暫停時(shí)，把當(dāng)前的位置寫(xiě)為translateX，transform為0，這個(gè)時(shí)候彈幕就保持在那個(gè)位置不動(dòng)了。
再次播放時(shí)，重新設(shè)置translateX和transform，當(dāng)然，transform-duration肯定是依據(jù)彈幕長(zhǎng)度，當(dāng)前位置和終點(diǎn)位置(播放器寬度)計(jì)算出來(lái)的。

播放和暫停的邏輯全都由js處理。
彈幕到位了以后，dom會(huì)被移除。
再加上will-change的GPU加速，所以不卡

去看了一眼style的變化，以上是一點(diǎn)猜測(cè)

2018年9月5日20:22:23，補(bǔ)充一下。

研究了一下，B站另外還做了一個(gè)操作就是復(fù)用dom，彈幕走到頭以后不會(huì)移除，而是在有下一個(gè)新彈幕的時(shí)候把原來(lái)的dom節(jié)點(diǎn)復(fù)用，修改style，使其重新播放一次，這個(gè)也是性能提高的一個(gè)處理辦法

2017年6月4日 04:22