写在前面:尝试做了一下弹幕的实例,欢迎提出并指正问题
问题说明:
Demo中页面展示如下图所示:
如果图片挂了,请看文字说明:
简单的说弹幕只完成了一个功能,从右向左缓慢移动
Demo中所涉及到的文字参数说明如下:
- 行走translateX= 屏幕宽度+弹幕宽度 + 70
- 行走时间:屏幕宽度/50(初始时间)+弹幕宽度/500
- 批次间隔时间:Math.min(初始时间/2,4200)
- 移除条件:left<-(70+20)
ps:以上数字为自定的,无组织无规律,也可在对话框中设定更加无组织无纪律的数字,设定时请不要带单位,并没有做正则匹配~也没有做兼容~
未解决问题:
- 弹幕重叠问题:当弹幕不定长时,弹幕是按照一定时间通过
setInterval
来批次放出,而不是当前一个结束划入屏幕之后,后一个再出现,如果可以判定当前什么时候在屏幕内滑到什么位置,就可以准确放出后一个弹幕,这样避免了弹幕重叠,如果给弹幕设定长则可一定程度上避免重叠。 - 批次时间间隔设定问题:时间间隔设定较长,则避免长弹幕重叠,但短弹幕空白太大,时间