Skip to content

弹幕效果 #86

@coconilu

Description

@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行代码搞定弹幕效果

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions