【Vue-baberrage弹幕插件重制(4)】泳道Track与弹幕

泳道track显示弹幕的时机

根据上一篇 Vue-baberrage弹幕插件重制(3)】中心分派和竞争获取的思考
的设计,泳道分为两条track且每条track固定的宽度(等于弹幕舞台可视宽度)。

因为弹幕放置到Track上的时候,位置必须是在舞台外面的,不然就会有突然出现类似跳帧感觉。所以我们必须要知道当前要进入舞台的track是哪条。

因此这里使用了一个新的Web API:

Intersection Observer API

按照规范文档的说法,Intersection observer API提供了一种方法,可以异步观察目标元素与祖先元素或顶层文件的交集变化。也就是说,我们以后的滚动加载、lazyload等等的功能都能通过Intersection Observer API来实现,虽然这个还是实验中的功能,但是除了IE的浏览器基本都很早就支持了。

那么有了这个API,我们就可以用它来做判断,哪条track出现在舞台。
举个简单的例子:

1
2
3
4
5
6
7
8
9
var options = {
root: document.querySelector('#stage'),
rootMargin: '0px',
threshold: 0
}
var callback = function(entries, observer) {
/* Content excerpted, show below */
};
var observer = new IntersectionObserver(callback, options);

其中threshold代表当目标元素与我们stage的交集多少才会触发事件,0 代表一出现就马上触发。可以设为 1 ,代表要完整出现了,才会触发。当时也接受数组形式,代表可以有多次的触发时机。

1
2
3
4
var track1 = document.querySelector('#track');
var track2 = document.querySelector('#track2');
observer.observe(track1);
observer.observe(track2);

这里只做简单的使用演示,实际项目中考虑的东西还要许多。
那么这样监听之后,当达到了触发条件的时候,我们就可以修改当前track的状态,来判断哪条track来显示弹幕了。