Vue 实现弹幕效果

linong

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

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

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

image.png

实现原理

弹幕动画效果

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

一般来说我们认知的动画流畅度顺序是 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

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

阅读 10.6k

javascript-lNong
只此一生,何必从众

Read-Search-Ask

22.7k 声望
4.8k 粉丝
0 条评论

Read-Search-Ask

22.7k 声望
4.8k 粉丝
文章目录
宣传栏