使用css绘制弹幕,实现弹幕效果的方法总结(css和canvas)
这篇文章主要介绍了关于实现弹幕效果的方法总结(css和canvas) ,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下
之前在一个移动端的抽奖页面中,在抽奖结果的展示窗口需要弹幕轮播显示,之前踩过一些小坑,现在总结一下前端弹幕效果的实现方式。
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
numArrL[j]-=speedArr[j];
ctx.fillStyle = colorArr[j]
ctx.fillText(barrageList[j],numArrL[j],numArrT[j]);
ctx.restore();
},16.7);
实现的效果为:
4. canva弹幕的扩展功能
通过canvas实现弹幕的方式,很方便做比如暂停弹幕滚动等扩展功能,此外,也可以给弹幕增加头像,给每条弹幕增加边框等等功能,以后再补充。
相关推荐:
H5微信支付之引入微信的js-sdk包失败的解决方法
使用h5 canvas实现时钟的动态效果
使用css绘制弹幕,实现弹幕效果的方法总结(css和canvas)相关推荐
- html绘制叶子形状,css实现叶子形状loading效果的方法
本文实例讲述了css实现叶子形状loading效果的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: body{ background: #000;} .color1{ backg ...
- 用纯css实现优雅的tab页,纯CSS实现Tab页切换效果的方法
纯CSS实现Tab页切换效果的方法 发布时间:2020-10-26 09:30:20 来源:亿速云 阅读:104 作者:小新 小编给大家分享一下纯CSS实现Tab页切换效果的方法,希望大家阅读完这篇文 ...
- css切割图片是什么,两种方法实现css切割图片,只取图片中一部分
参考地址:http://www.jb51.net/css/150036.html 场景:如果一个页面有个img小图标,那么访问浏览器的时候会因为加载图片导致浏览速度放慢.这个时候将这么多的小图标放在一 ...
- html绘制叶子形状,css实现叶子形状loading效果
本文实例讲述了css实现叶子形状loading效果的方法.分享给大家供大家参考.具体实现方法如下: 复制代码代码如下: body{ background: #000;} .color1{ backgr ...
- html css右下角三角形,纯CSS绘制三角形(各种角度)
CSS/HTML 的 纯CSS绘制三角形(各种角度) 我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 C ...
- CSS绘制三角形图标
CSS绘制三角形图标目录 1CSS绘制三解形图标原理 2 页面效果 3 HTML结构 4 CSS样式 1CSS绘制三解形图标原理 对内容容器进行相对定位,对内容容器的伪元素:before和:after ...
- 如何用css绘制一个五角星并添加旋转动画
关于三角形的绘制,大家已经贡献过诸如将五角星切割成三个三角形来绘制等的更加标准简洁的画法,这篇文章权当抛砖引玉,为大家贡献一些不一样的思路吧,当然这个五角星的完成度也不是特别完美,有任何意见也欢迎大佬 ...
- 干货分享|纯CSS绘制电池充电水波纹动效(uni-app|view组件版)
前言 依托于CSS3提供的强大功能,我们可以充分发挥自己的想象力,制作出许多非常惊艳的动效,比如:接下来我要跟大家分享的一个完全用CSS绘制出来的电池充电水波纹动效,还是老规矩,小凡我依然分享的是un ...
- Css实现刘海,纯CSS样式写刘海屏效果
1. 效果: 2. 代码: 刘海? :root { --bg--color: #ed4014; } body { background: var(--bg--color); } .top_bar_di ...
最新文章
- 人工智能如何驱动实体经济?六大领域展望
- sublime text 3设置快捷键让html文件在浏览器打开
- python开始print_当你使用print时,Python是怎么运行的
- 链路层 ---《TCP/IP协议》卷一
- pdfbox、icepdf工具实现pdf转图片
- chm电子书字体大小的调整
- wps excel 表格给一列数据添加相同的内容的方法
- 数据分析真题日刷 | 招商银行信用卡中心2019秋招IT笔试(数据挖掘方向第二批)
- 经验分享-iMX8MQ设计底板硬件指南-第一章
- Pytest 如何组织冒烟测试及执行冒烟用例
- 2019高中数学联赛备考手册(预赛试题集锦)
- 【LiteApp系列】爱奇艺小程序架构浅析
- php新闻删除功能设计,PHP开发 新闻发布系统之新闻删除页面
- 正点原子linux串口驱动下载,「正点原子Linux连载」第六十三章Linux RS232/485/GPS驱动实验...
- 机器人课程反馈中如何面对批评和负面消息
- 电荷泵自制MOS管高压驱动电源
- 苹果手机用哪款耳机音质最好?平价好用的蓝牙耳机
- Spring MVC参数处理--gzip和deflate的几点区别
- 产品经理应该做些什么
- 微信小程序直播安装和开发指南
热门文章
- RK3399平台开发系列讲解(硬件波形解析篇)10.1、USB2.0相关硬件波形(实图)解析
- 修改Mathon为默认浏览器
- 一些简单的shell实例
- 浅谈Zebra斑马打印机三种打印方式的利弊
- BERT模型从训练到部署
- 关于docker 意外停止,重新快速启动措施
- yolo模型(四)绘制PR曲线所用到的reval_voc_py.py代码
- 通过USB连接越狱iPhone,SSH进入设备
- 苹果耳机可以用在安卓手机上吗_安卓手机连接Airpods也可以有弹窗了,可以放心入手华强北的airpids啦...
- 力扣 656.金币路径