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

Posted on

泳道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来显示弹幕了。