这两天又看到有人问 Vue 如何做弹幕效果。
正好我过年的时候做了个活动,其中用户可以摇签,然后 C 位飘屏展示。
Vue 版本效果地址:https://www.lilnong.top/static/html/vue-bullet-biubiubiu.html
网上原生版本:https://www.lilnong.top/stati...
动画效果其实很简单,从右到左。
一般来说我们认知的动画流畅度顺序是 css(transform) > css(left) > js
。
实现起来有两种方案
我们先来看看 css 的 transform 如何实现动画效果。
@keyframes right2left { 0% {transform: translate(100vw)} 100% {transform: translate(-100%);} }
因为 translate
的 % 是基于当前元素的,所以我们可以设置开始位置在 100vw(正好在右边屏幕外),结束位置在 -100%(正好把自己都挪到左边屏幕外)
@keyframes right2left { 0% {left: 100%} 100% {left: -100%} }
left 的 % 是基于父级的 width,所以这里开始位置可以设置 100%,结束位置不太好控制 -100%
因为我的需求是当前登录用户发出的会在 C 位显示,所以我把他设计成了三个队列
// 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 也有对应的结束事件 transtionend
。
但是开始比较坑,他需要的是两帧。这里我们要依赖 $nextTick
来实现
设置五条航道,每 1000ms 渲染一个弹幕,这样的话就可以错开行。
而且因为动画是固定时长,所以可以人为控制一行只有一个。
欢迎大家关注我的公众号。有疑问也可以加我的微信前端交流群。