Vue 实现弹幕效果

这两天又看到有人问 Vue 如何做弹幕效果。

正好我过年的时候做了个活动，其中用户可以摇签，然后 C 位飘屏展示。

Vue 版本效果地址：https://www.lilnong.top/static/html/vue-bullet-biubiubiu.html
网上原生版本：https://www.lilnong.top/stati...

实现原理

弹幕动画效果

动画效果其实很简单，从右到左。

一般来说我们认知的动画流畅度顺序是 css(transform) > css(left) > js。

实现 css 的动画效果的方式

实现起来有两种方案

1. transtion 状态 A 到状态 B 使用过渡效果。
   这个重点是需要触发状态变化，所以我们可以考虑 push 之后 $nextTick 中再改变状态。
2. animation 元素做动画。
   这个就比较简单了，他是单指元素动画

transform + animation

我们先来看看 css 的 transform 如何实现动画效果。

@keyframes right2left {
    0% {transform: translate(100vw)}
    100% {transform: translate(-100%);}
}

因为 translate 的 % 是基于当前元素的，所以我们可以设置开始位置在 100vw（正好在右边屏幕外），结束位置在 -100%（正好把自己都挪到左边屏幕外）

left + animation

@keyframes right2left {
    0% {left: 100%}
    100% {left: -100%}
}

left 的 % 是基于父级的 width，所以这里开始位置可以设置 100%，结束位置不太好控制 -100%

弹幕队列设计

因为我的需求是当前登录用户发出的会在 C 位显示，所以我把他设计成了三个队列

1. 普通的弹幕队列，里面用来存放其他用户发的
2. c 位弹幕队列，用来存放当前用户发的
3. 页面中显示的弹幕队列

// item 是当前要显示的弹幕
var item = null;
// 判断一下是否是 c 位，c 位的话要先排查 c 位弹幕队列
if(this.idx == 3){
    // c 位
    item = this.clist.shift();
}
// 如果说没有要显示的弹幕，那么取普通弹幕队列的弹幕
if(!item){
    item = this.list.shift();
}

if(item){
    // 如果有弹幕，那么放到显示队列中
    item.line = this.idx;
    this.idx = (this.idx % 5 + 1);
    this.bulletlist.push(item)
}else{
    // 如果没有弹幕，那么排查一下有没有 c位 弹幕队列
    // 因为我的弹幕做了循环，所以不太可能出现这种情况
    if(this.clist.length){
        item = this.clist.shift();
        item.line = 3;
        this.idx = 3;
        this.bulletlist.push(item)
    }
}

动画开始与结束逻辑

动画开始因为我使用的是 animation，那么当 DOM 显示在页面中他就会执行动画。
动画结束是监视 animationend 的回调，因为我的动画时长是固定，所以每次都移除第一个 DOM 即可。

如果是 transtion 应该怎么做？

transtion 也有对应的结束事件 transtionend。

但是开始比较坑，他需要的是两帧。这里我们要依赖 $nextTick 来实现

弹幕碰撞等问题

设置五条航道，每 1000ms 渲染一个弹幕，这样的话就可以错开行。

而且因为动画是固定时长，所以可以人为控制一行只有一个。

微信公众号：前端linong

欢迎大家关注我的公众号。有疑问也可以加我的微信前端交流群。