哔哩哔哩动画（b站）弹幕是怎么实现的？

Question

我看了下弹幕的代码，用到了transition和3d加速，只是有些疑惑如下：
1、不太明白弹幕很多的时候是怎么解决卡顿的。
2、transition动画是怎么实现暂停的，弹幕div有个animation pause的属性，但是没有找到keyframe动画。
3、加了will-change: transform属性，动画结束后恢复到auto，但感觉没啥变化……
4、我用的是定时器setInterval，当毫秒数设置的比较低的时候，会出现轻微的卡顿。如果用requestAnimationFrame的话，速度怎么控制呢？

Answer 1

确实是transition动画，没看到3D加速，will-change倒是有

没用annimation动画。
animation-play-state:paused; 没卵用，估计是历史遗留，以前可能是annimation处理的，故有此一举。

也可能是这玩意儿对GPU加速有效果？没测试过。以上只是一个猜测

播放器弹幕的处理方式是：

播放时，设置其translateX和transform。
暂停时，把当前的位置写为translateX，transform为0，这个时候弹幕就保持在那个位置不动了。
再次播放时，重新设置translateX和transform，当然，transform-duration肯定是依据弹幕长度，当前位置和终点位置(播放器宽度)计算出来的。

播放和暂停的逻辑全都由js处理。
弹幕到位了以后，dom会被移除。
再加上will-change的GPU加速，所以不卡

---

去看了一眼style的变化，以上是一点猜测

---

2018年9月5日20:22:23，补充一下。

研究了一下，B站另外还做了一个操作就是复用dom，弹幕走到头以后不会移除，而是在有下一个新弹幕的时候把原来的dom节点复用，修改style，使其重新播放一次，这个也是性能提高的一个处理办法