数码控科技猎奇Iphone动漫星座游戏电竞lolcosplay王者荣耀攻略allcnewsBLOGNEWSBLOGASKBLOGBLOGZSK全部技术问答问答技术问答it问答代码软件新闻开发博客电脑/网络手机/数码笔记本电脑互联网操作系统软件硬件编程开发360产品资源分享电脑知识文档中心IT全部全部分类全部分类技术牛文全部分类教程最新网页制作cms教程平面设计媒体动画操作系统网站运营网络安全服务器教程数据库工具网络安全软件教学vbscript正则表达式javascript批处理更多»编程更新教程更新游戏更新allitnewsJava新闻网络医疗信息化安全创业站长电商科技访谈域名会议专栏创业动态融资创投创业学院 / 产品经理创业公司人物访谈营销开发数据库服务器系统虚拟化云计算嵌入式移动开发作业作业1常见软件all电脑网络手机数码生活游戏体育运动明星影音休闲爱好文化艺术社会民生教育科学医疗健康金融管理情感社交地区其他电脑互联网软件硬件编程开发360相关产品手机平板其他电子产品摄影器材360硬件通讯智能设备购物时尚生活常识美容塑身服装服饰出行旅游交通汽车购房置业家居装修美食烹饪单机电脑游戏网页游戏电视游戏桌游棋牌游戏手机游戏小游戏掌机游戏客户端游戏集体游戏其他游戏体育赛事篮球足球其他运动球类运动赛车健身运动运动用品影视娱乐人物音乐动漫摄影摄像收藏宠物幽默搞笑起名花鸟鱼虫茶艺彩票星座占卜书画美术舞蹈小说图书器乐声乐小品相声戏剧戏曲手工艺品历史话题时事政治就业职场军事国防节日风俗法律法规宗教礼仪礼节自然灾害360维权社会人物升学入学人文社科外语资格考试公务员留学出国家庭教育学习方法语文物理生物工程学农业数学化学健康知识心理健康孕育早教内科外科妇产科儿科皮肤科五官科男科整形中医药品传染科其他疾病医院两性肿瘤科创业投资企业管理财务税务银行股票金融理财基金债券保险贸易商务文书国民经济爱情婚姻家庭烦恼北京上海重庆天津黑龙江吉林辽宁河北内蒙古山西陕西宁夏甘肃青海新疆西藏四川贵州云南河南湖北湖南山东江苏浙江安徽江西福建广东广西海南香港澳门台湾海外地区

排列三投资计划:前端实现弹幕效果的方法总结(包含css3和canvas的实现方式)

来源:脚本之家  责任编辑:小易  

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

  • css3实现乞丐版的弹幕
  • css3弹幕性能优化
  • canvas实现弹幕
  • canva弹幕的扩展功能

1. css3实现乞丐版的弹幕

(1)如何通过css3实现弹幕

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

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

<div class="block">我是弹幕</div>

弹幕的移动可以通过移动这个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<barrageList.length;j++){
      numArrL[j]-=speedArr[j];
      ctx.fillStyle = colorArr[j]
      ctx.fillText(barrageList[j],numArrL[j],numArrT[j]);
      ctx.restore();
 },16.7);

实现的效果为:

 

4. canva弹幕的扩展功能

通过canvas实现弹幕的方式,很方便做比如暂停弹幕滚动等扩展功能,此外,也可以给弹幕增加头像,给每条弹幕增加边框等等功能,以后再补充。

最后给一个简单的react弹幕组件;https://github.com/forthealllight/react-barrage

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。


  • 本文相关:
  • html5使用canvas实现弹幕功能示例
  • html使用canvas实现弹幕功能
  • 免责声明 - 关于我们 - 联系我们 - 广告联系 - 友情链接 - 河北20选五开奖结果 - 频道导航
    Copyright © 2017 河北20选五开奖结果 www.vhmyd.cn All Rights Reserved
  • 共产主义社会,马克思主义对未来的科学预测。对于共产党人来说,是自己的信仰,对于相信这种科学预测者来说,是一种价值追求。至于未来的共产主义实行什么样的分配方式,马 2018-12-14
  • “网络党课”第二课 杨禹《为美好生活而奋斗》 2018-12-14
  • DJ音乐绽放江西之巅 萍乡武功山帐篷节成功举办 2018-12-14
  • 巫山县大峡村:深度贫困村的脱贫之变 2018-12-13
  • 【上海天气】最新上海今天天气,实时提供上海气温、空气质量、24小时天气预报、生活指数查询 2018-12-13
  • VRAR从热转凉 追风上市公司“跌落神坛”追风上市公司“跌落神坛”-手机行情 2018-12-13
  • 招聘启事丨西部网诚聘新媒体编辑记者、实习编辑等人员 2018-12-12
  • 开奖时刻 5箱可乐免费送出 今日活动持续进行开奖时刻-等级 2018-12-12
  • 阜阳五中成功举办第四届社团文化艺术节文艺汇演 2018-12-12
  • 和谐号动车将开放企业冠名 沪铁路485个车次开始招商 2018-12-11
  • 好战的北约应该负责打扫战场,包括难民安置、战后重建…… 2018-12-10
  • 很容易让人联想到是这个女人的错,而杨杨忽视其背后有很复杂的原因。 2018-12-10
  • 广东金林村:农民爱写诗 2018-12-10
  • 世界最大纸飞机亮相美国 长达19.5米气势十足 2018-12-09
  • 2017年全国“创新社会治理典型案例”征集活动专家评审结果 2018-12-09
  • 838| 88| 824| 60| 187| 738| 492| 526| 581| 879|