Vue 实现弹幕效果
2020/5/17 14:26:24
本文主要是介绍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 的动画效果的方式
实现起来有两种方案
- transtion 状态 A 到状态 B 使用过渡效果。
这个重点是需要触发状态变化,所以我们可以考虑 push 之后 $nextTick 中再改变状态。 - 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 位显示,所以我把他设计成了三个队列
- 普通的弹幕队列,里面用来存放其他用户发的
- 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 应该怎么做?
transtion 也有对应的结束事件 transtionend
。
但是开始比较坑,他需要的是两帧。这里我们要依赖 $nextTick
来实现
弹幕碰撞等问题
设置五条航道,每 1000ms 渲染一个弹幕,这样的话就可以错开行。
而且因为动画是固定时长,所以可以人为控制一行只有一个。
微信公众号:前端linong
欢迎大家关注我的公众号。有疑问也可以加我的微信前端交流群。
这篇关于Vue 实现弹幕效果的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-10-05HTML 颜色
- 2024-10-05HTML 颜色名
- 2024-10-01AntDesign-Form-rules学习:轻松入门教程
- 2024-10-01classnames学习:轻松掌握前端中的类名管理
- 2024-09-30前端案例资料:新手入门必读教程
- 2024-09-30前端编程资料:新手入门必备教程
- 2024-09-30前端培训资料:新手入门必读教程
- 2024-09-30滚动吸顶项目实战:从入门到上手
- 2024-09-29HTML学习:span标签教程详解
- 2024-09-29HTML基础:button标签教程