这两天看到有人问vue怎么制作弹幕效果。刚好我过年的时候做了一个活动，用户可以抽签，然后C位悬浮屏展示。vue版效果地址：https://www.lilnong.top/static/html/vue-bullet-biubiubiu.html线上原生版：https://www.lilnong.top/stati...实现弹幕原理动画效果动画效果其实很简单，从右到左。一般来说，我们认识的动画流畅度顺序是css(transform)>css(left)>js。css的动画效果有两种实现方式：使用transitioneffects从状态A过渡到状态B。关键是需要触发状态变化，所以我们可以考虑在push之后在$nextTick中改变状态。要设置动画的动画元素。这个比较简单。指的是元素动画变换+动画。我们先来看看css的transform是如何实现动画效果的。@keyframesright2left{0%{transform:translate(100vw)}100%{transform:translate(-100%);}}因为translate的%是基于当前元素的，所以我们可以将起始位置设置在100vw（正好在右侧屏幕外），结束位置为-100%（只需将您自己移出左侧屏幕）left+animation@keyframesright2left{0%{left:100%}100%{left:-100%}}left的%是基于parent的宽度，所以起始位置可以设置为100%，结束位置不好控制——100%弹幕队列设计因为我的要求是当前登录用户会显示在C位置，所以我设计成三个队列。普通弹幕队列，用于存放其他用户发送的c位弹幕队列，用于存放当前用户发送的页面显示的弹幕队列。//item为当前要显示的弹幕队列varitem=null;//判断是否为c位，如果为c位，先查看c位弹幕队列if(this.idx==3){//c位item=this.clist.shift();}//如果没有弹幕显示，则取普通弹幕队列的弹幕if(!item){item=this.list.shift();}if(item){//如果有弹幕，则放入Displayitem.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;这个.idx=3;this.bulletlist.push(item)}}动画开始和结束逻辑动画开始因为我用的是动画，那么当DOM显示在页面上时，就会执行animation动画。动画结束是监听animationend的回调。因为我的动画时长是固定的，所以每次去掉第一个DOM就够了。如果是过渡怎么办？transition也有对应的结束事件transitionend。但是刚开始比较的时候，他需要的是两帧。这里需要依赖$nextTick来实现弹幕碰撞等问题。设置五个通道，每1000ms渲染一次弹幕，让台词错开。又因为动画有固定的时长，可以人为控制只有一行。微信公众号：前端立农欢迎大家关注我的公众号。有问题也可以加我的微信前端交流群。
