前端弹幕设计实现
什么是弹幕
弹dàn幕mù（日语：弾幕だんまく）本义是指战场上由密集子弹形成的火力网（子弹密集得像幕一样），相当于中文的“枪林弹雨”。同时还可用于代指密集移动的事物，现今多用于视频网站中飞过的即时评论字幕（用于这种用法时，在日语中称为コメント，评论之意）。
技术选择
要实现弹幕，很容易就能想到两种方式：
- 使用 Canvas 绘制一个个字幕，生成动画
- 纯 HTML 元素制作字幕，使用 css 移动字幕
比较这两种方式，canvas 方案只需要一个 canvas 元素即可，所有字幕动画都是通过 js 代码生成，更加简洁，但是 canvas 中要高频的重复绘制相似的内容，不够经济。纯 HTML 元素方案中，每一条弹幕就是一个元素节点，可以 css transform 属性来实现流畅的动画，当弹幕移出可视区域时，即可移除节点，性能更好。
约定
- 弹幕的容器即可视区域，称作 Canvas
- 每一条字幕称作 Msg
- Msg 是匀速运动的，所以 transition 中的 timing-function 应使用 linear
- Msg 的移动速度和 Msg 的长度有关，长度越长速度越快，同时应有最大值与最小值：
- Msg 应从 Canvas 的右侧外部移动到 Canvas 中，再从左侧移出：
思路
由约定，可得：
- Msg 的速度：$v = \alpha * msg_width$
- Msg 需要运动的位移：$s = canvas_width + msg_width$
- Msg 需要运动的时间：$duration = \frac{s}{v}$
即，在 Msg 长度、Canvas 长度已知的情况下，位移、速度和时间都是确定的，所以，只需记录下 Msg 运动的初始时间，即可计算出 Msg 在任意时刻的位置。
实现
TBC…