react撸一个实时弹幕组件 想实现不重疊和随机高度 目前只实现了第一个
本来我把这事情想得有点简单 每次加入新弹幕的时候随机生成一个高度 然后根据元素尺寸用elementFromPoint看一下左上角和左下角有没有别的弹幕 没有的话就发射有的话就跳过去 然后动画用css3动画 结束事件里面把动画完成的弹幕移出去 然后动画开始的时候设置个定时器 当动画完全进入屏幕后forceUpdate一下 完事
但是。elementFromPoint只返回顶层元素。。这。好吧 只能自己想办法了
现在用的办法是限制弹幕只能出现在几行 每一行维护一个锁 每个弹幕发射的时候加锁 完全进入屏幕了解锁 算是搞定了 不过写起来很麻烦 不知道各位dalao有没有更好的办法
整个弹幕消息的列表要塞进state 为了性能用immutable代替数组 避免每次都复制
随机位置更麻烦一些 保存的锁需要是一个位置范围 然后插入的时候找一个足够大的空位在其中随机选择一个高度发射
css3动画好像性能很成问题?总觉得卡卡的 怪不得b站用的canvas