前端实现弹幕效果的方法总结(包含css3和canvas的实现方式)

greatwhole 发布于2019-08-30 15:54 / 2754人阅读

摘要：之前在一个移动端的抽奖页面中，在抽奖结果的展示窗口需要弹幕轮播显示，之前踩过一些小坑，现在总结一下前端弹幕效果的实现方式。实现弹幕除了通过实现弹幕的方法之外，通过也可以实现弹幕。通过实现弹幕的原理就是时时的重绘文字，下面来一步步的实现。

之前在一个移动端的抽奖页面中，在抽奖结果的展示窗口需要弹幕轮播显示，之前踩过一些小坑，现在总结一下前端弹幕效果的实现方式。

css3实现乞丐版的弹幕

css3弹幕性能优化

canvas实现弹幕

canva弹幕的扩展功能

本文原文地址在我的博客主页：原文地址

1. css3实现乞丐版的弹幕 (1)如何通过css3实现弹幕

首先来看如何通过css的方法实现一个最简单的弹幕：

首先在html中定义一条弹幕的dom结构：

我是弹幕

弹幕的移动可以通过移动这个block来实现，以从右向左移动的弹幕为例，弹幕的初始位置在容器的最左侧且贴边隐藏（弹幕的最左边与容器的最右贴合）,可以通过绝对定位加transform来实现：

.block{
   position:absolute;
}

初始位置：

from{
    left:100%;
    transform:translateX(0)
}

移动到最左边的结束位置为（弹幕的最右边与容器的最左边贴合）：

to{
   left:0;
   transform:translateX(-100%)
}

起始位置和结束位置的具体图示如下所示：

根据起始位置和结束位置可以定义完整的两帧弹幕动画：

@keyframes barrage{
   from{
     left:100%;
     transform:translateX(0);
   }
   to{
     left:0;
     transform:translateX(-100%);
   }
}

给弹幕元素引入这个动画：

.block{
  position:absolute;
  /* other decorate style */
  animation:barrage 5s linear 0s;
}

这样就可以实现一个乞丐版的弹幕效果：

(2)通过绝对定位和left实现弹幕的缺陷

首先明确一下css的渲染过程

I）根据HTML的结构生成DOM树（DOM树中包含了display:none的节点）

II）在DOM树的基础上，根据节点的几何属性（margin/padding/width/height/left等）生成render树

III）在render树的基础上继续渲染color,font等属性

其中如果I）中和II）中的属性发生变化会发生reflow(回流)，如果仅仅III）中的属性发生改变，只会发生repaint（重绘）。显然从css的渲染过程我们也可以看出来：reflow(回流）必伴随着重绘。

reflow(回流)：当render树中的一部分或者全部因为大小边距等问题发生改变而需要重建的过程叫做回流
repaint(重绘)：当元素的一部分属性发生变化，如外观背景色不会引起布局变化而需要重新渲染的过程叫做重绘

reflow（回流）会影响浏览器css的渲染速度，因此在做网页性能优化的时候要减少回流的发生。

在第一节，我们通过left属性，实现了弹幕的效果，left会改变元素的布局，因此会发生reflow(回流)，表现在移动端页面上会造成弹幕动画的卡顿。

2. css3弹幕性能优化

我们直到了第一节中的弹幕动画存在卡顿的问题，下面我们看看如何解决动画的卡顿。

(1)CSS开启硬件加速

在浏览器中用css开启硬件加速，使用GPU（Graphics Processing Unit）可以提升网页性能。鉴于此，我们可以发挥GPU的力量，从而使我们的网站或应用表现的更为流畅。

CSS animations, transforms 以及 transitions 不会自动开启GPU加速，而是由浏览器的缓慢的软件渲染引擎来执行。那我们怎样才可以切换到GPU模式呢，很多浏览器提供了某些触发的CSS规则。

比较常见的方式是，我们可以通过3d变化（translate3d属性）来开启硬件加速，鉴于此，我们修改动画为：

@keyframes barrage{
   from{
     left:100%;
     transform:translate3d(0,0,0);
   }
   to{
     left:0;
     transform:translate3d(-100%,0,0);
   }
}

这样就可以通过开启硬件加速的方式，优化网页性能。但是这种方式没有从根本上解决问题，同时使用GPU增加了内存的使用，会减少移动设备的电池寿命等等。

(2)不改变left属性

第二种方法，就是想办法在弹幕动画的前后不改变left属性的值，这样就不会发生reflow。

我们想仅仅通过translateX来确定弹幕节点的初始位置，但是translateX(-100%)是相对于弹幕节点本身的，而不是相对于父元素，因此我们耦合js和css，在js中获取弹幕节点所在的父元素的宽度，接着根据宽度来定义弹幕节点的初始位置。

以父元素为body时为例：

//css
 .block{
  position:absolute;
  left:0;
  visibility:hidden;
  /* other decorate style */
  animation:barrage 5s linear 0s;
}
//js
let style = document.createElement("style");
document.head.appendChild(style);
let width = window.innerWidth;
let from = `from { visibility: visible; -webkit-transform: translateX(${width}px); }`;
let to = `to { visibility: visible; -webkit-transform: translateX(-100%); }`;
style.sheet.insertRule(`@-webkit-keyframes barrage { ${from} ${to} }`, 0);

除了耦合js计算了父元素的宽度，从而确定弹幕节点的初始位置之外，这里在弹幕节点中我们为了防止初始位置就有显示，增加了visibility:hidden属性。防止弹幕节点在未确定初始位置时就显示在父容器内。只有弹幕开始从初始位置滚动，才会变得可见。

但是这种css的实现方式，在实现弹幕的扩展功能方面比较麻烦，比如如何控制弹幕暂停等等。

3. canvas实现弹幕

除了通过css实现弹幕的方法之外，通过canvas也可以实现弹幕。

通过canvas实现弹幕的原理就是时时的重绘文字，下面来一步步的实现。

获取画布

let canvas = document.getElementById("canvas");
let ctx = canvas.getContext("2d");

绘制文字

ctx.font = "20px Microsoft YaHei";          
ctx.fillStyle = "#000000";                
ctx.fillText("canvas 绘制文字", x, y);

上面的fillText就是实现弹幕效果的主要api，其中x表示横方向的坐标，y表示纵方向的坐标，只要时时的改变x，y进行重绘，就可以实现动态的弹幕效果。

清除绘制内容

ctx.clearRect(0, 0, width, height);

具体实现

通过定时器，定时改变x,y,每次改变之前先进性清屏，然后根据改变后的x,y进行重绘。当存在多条弹幕的情况下,定义：

let colorArr=_this.getColor(color);  弹幕数组多对应的颜色数组
let numArrL=_this.getLeft();  弹幕数组所对应的x坐标位置数组
let numArrT=_this.getTop();  弹幕数组所对应的y坐标位置数组
let speedArr=_this.getSpeed(); 弹幕数组所对应的弹幕移动速度数组

定时的重绘弹幕函数为：

_this.timer=setInterval(function(){
    ctx.clearRect(0,0,canvas.width,canvas.height);
    ctx.save();
    for(let j=0;j
实现的效果为：

4. canva弹幕的扩展功能
通过canvas实现弹幕的方式，很方便做比如暂停弹幕滚动等扩展功能，此外，也可以给弹幕增加头像，给每条弹幕增加边框等等功能，以后再补充。
最后给一个简单的react弹幕组件；https://github.com/forthealll...

云服务器 GPU云服务器 js实现f11的效果互联网专线的接入实现方式弹幕实现 js css3 canvas

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/116851.html

大前端 - 收藏集 - 掘金

摘要：是目前唯一一个支持同步调用的跨平台年度上最多的个项目前端掘金年接近尾声，在最近的几篇文章中，会整理总结一些年度开源项目。 JS 全栈教程 - 前端 - 掘金本课程是基于阮一峰的 js 全栈教程的视频版本，免费供大家观看... 2016 年 10 个最佳的 CodePen 作品 - 前端 - 掘金说到 CodePen，前端开发者们肯定不会陌生。如果说 Dribbble 是设计师们聚集的圣...

honhon 2019-08-20 17:03 评论0 收藏0
【小案例】基于色键技术的纯客户端实时蒙版弹幕

摘要：组件提供了一系列的操作接口以方便用户对弹幕的相关特性进行定制。对于这种类型的图像，我们可以使用色键的方式进行抠图生成蒙版。其中，用于更新蒙版的接口为。导读：本文内容是笔者最近实现的 web 端弹幕组件—— Barrage UI 的一个延伸。在阅读本文的实例和相关代码之前，不妨先浏览项目文档，对组件的使用方式和相关接口进行了解。各位童鞋如果经常上 B 站（bilibili.com） ...

muzhuyu 2019-08-23 14:50 评论0 收藏0
Canvas + WebSocket + Redis 实现一个视频弹幕

摘要：创建弹幕功能的类及基本参数处理布局时需要注意的默认宽为，高为，我们要保证完全覆盖整个视频，需要让与宽高相等。因为我们不确定每一个使用该功能的视频的宽高都是一样的，所以画布的宽高并没有通过来设置，而是通过在类创建实例初始化属性的时候动态设置。 showImg(https://segmentfault.com/img/remote/1460000018998386); 阅读原文页面布...

WelliJhon 2019-08-29 16:55 评论0 收藏0
Canvas + WebSocket + Redis 实现一个视频弹幕

摘要：创建弹幕功能的类及基本参数处理布局时需要注意的默认宽为，高为，我们要保证完全覆盖整个视频，需要让与宽高相等。因为我们不确定每一个使用该功能的视频的宽高都是一样的，所以画布的宽高并没有通过来设置，而是通过在类创建实例初始化属性的时候动态设置。 showImg(https://segmentfault.com/img/remote/1460000018998386); 阅读原文页面布...

gekylin 2019-08-02 11:41 评论0 收藏0
Canvas + WebSocket + Redis 实现一个视频弹幕

摘要：创建弹幕功能的类及基本参数处理布局时需要注意的默认宽为，高为，我们要保证完全覆盖整个视频，需要让与宽高相等。因为我们不确定每一个使用该功能的视频的宽高都是一样的，所以画布的宽高并没有通过来设置，而是通过在类创建实例初始化属性的时候动态设置。 showImg(https://segmentfault.com/img/remote/1460000018998386); 阅读原文页面布...

wangdai 2019-08-23 12:19 评论0 收藏0