弹幕效果

[coconilu]

概述

弹幕效果是现在很多视频平台、直播平台的必备功能，正是因为它如此重要，所以我们对它的性能要求很苛刻。

原始阶段

实现弹幕效果并不难，只需要设置弹幕容器的position属性为relative，然后每一个弹幕的position属性设置为absolute，并通过动画去移动它们就可以了。

我们还可以定制一些特别的弹幕效果。比如速度、大小、颜色。

进阶阶段

为了优化弹幕显示效果，我们可以添加一个弹幕池，它负责接收来自服务器和本地的弹幕，然后通过定时器不停地去生成一条条弹幕，并显示在弹幕容器里。

改革阶段

使用canvas代替实现弹幕效果。

实现原理：

1. 制作弹幕就是绘制文字，主要用API：canvas.fillText(text, x, y)
2. 设置一个定时器去刷新canvas，每次刷新需要清屏一次：ctx.clearRect(0,0,canvas.width,canvas.height);
3. 由于canvas丰富的API，我们可以很方便定制不同的弹幕特效

第三方库

Android端的有：DanmakuFlameMaster（Bilibili开源）

参考

前端实现弹幕效果的方法总结(包含css3和canvas的实现方式)
50行代码搞定弹幕效果