使用transition实现弹幕滚动效果

       想要实现比较理想的弹幕滚动效果还是有一定难度的。这里以vue为基础,讲一种实现弹幕滚动的方法,不考虑重叠,弹幕过长或其他问题
       一个弹幕即为一个组件,所以要实现设计此子组件,即弹幕组件,这里属性要包含该弹幕的位置(随机、定端、底端),大小,颜色,内容等等,由父组件循环渲染并赋值。
       生成一个弹幕并不难,难就难在如何让其移动,第一个想到的点就是设其position为relative或是absolute,通过修改left或right使其移动。那么选择relative还是absolute呢?他们的效果是否一样呢?

1.弹幕的position为relative还是absolute

       这里我推荐使用absolute,而且效果是不一样的,如果使用relative,将会导致新div(弹幕)每次生成时的位置会受前面的div或组件影响到,这时修改位置就会不准确,即使使其float,也会受前面弹幕堆叠的影响而不能准确使其生成在固定的某一位置。
       如果使用absolute,就可以保证每次生成的横向位置是固定的,不会收到前面的div/组件的影响,进而准确的调整其left/right(但是重叠无法避免)。
       接下来是第二个问题:

2.弹幕的left/right通过js修改与通过css的transition过渡比较

       要实现弹幕匀速平稳的移动,首先当然可以使用js来操作,通过设置定时器,不停地一点一点地修改弹幕地位置来实现肉眼上弹幕地匀速滚动,但我想说这样太麻烦了。
       你需要考虑不同div大小导致地弹幕移动速度地变化,这时你需要通过计算来获取每次弹幕移动地增量(即速度),你还要调试定时器地时间,你还要遍历每一条弹幕一次进行修改,十分繁琐。
       但是,如果你使用transition地过度来实现,就十分地简单:

transition-property: left;
transition-duration: 6s;
transition-timing-function: linear;

       这里对随机滚动地弹幕做过度处理,注意这里特指随机,因为固定定端和固定底端是瞬间出现而且没有变化,不应该有次样式,所以因该通过class绑定来解决。
       当你使用了transition之后你只用关心几个数值即可:

  • 弹幕的初始位置(left & top)
  • 弹幕的结束位置(left & top)
  • 弹幕的过度属性 transition-property(一般以x轴做匀速运动,就只有left,当然b站有斜的弹幕)
  • 弹幕的运动时间 transition-duration (当使用transition时就不考虑速度了,只用考虑运动时间即可)
  • 弹幕运动的方式 transition-timing-function(一般为linear,即线性)

       这里最强大的样式即为transition-duration,它使你不用再去关注弹幕具体的移动速度,在不同宽度的div下重新计算弹幕的速度,以免弹幕消失过快或者过早。而transition-duration会智能的调节移动的速度,保证这个弹幕一定会在此div移动固定的时间。当div长时,移动加快,当短时,移动变慢,但时间是一致的,而且你也不用再去写新的js方法,十分的方便。
       这里,我将我写的弹幕的核心移动算法列出来:

created() {
            // console.log(this.position)
            var _self = this;
            var danWidth;
            var danHeight;
            //弹幕生成速度需时间,以免ref获取为undefined
            window.setTimeout(function() {
                danWidth = _self.$refs.dan.offsetWidth    //弹幕的宽
                danHeight = _self.$refs.dan.offsetHeight  //弹幕的高
                if (_self.position == 0) {  //0指弹幕位置随机
                    _self.top = Math.ceil(Math.random() * (_self.top - 60 - danHeight)); //纵向随机高度
                    _self.left = - danWidth  //目标移动位置
                } else if (_self.position == 1) {    //1为固定顶部居中
                    _self.top = 5
                    _self.left = (_self.width-danWidth)/2     //居中
                } else {  //2为固定底部居中
                    _self.top = _self.top - 60 - danHeight
                    _self.left = (_self.width-danWidth)/2     //居中
                }
            }, 100);
            //6秒移动,7秒后删除
            window.setTimeout(function() {
                _self.$emit('deletedan', _self.id)  //调用父级方法去除该弹幕
            }, 7000);
        }

       其中_self.top即为弹幕上偏移量,_self.left为左偏移量,_self.width为父div(弹幕框)的宽,_self.height为父div的高。
       首先要熟悉style绑定,这里首先把弹幕的left调整为父div(弹幕框)的宽度,正好右侧溢出。此时延迟了100ms后将其移动到left=负的弹幕的宽度,正好到左侧溢出,这里之所以做延迟处理首先是保证先后顺序要正确,其次弹幕(该组件)生成需要时间,要获取弹幕宽高不能立马通过ref属性获取,否则为undefined。
       通过position(0,1,2)进行相应移动处理后,再调用延迟进行删除处理,这个就比较简单了,直接在父级写一个方法,将弹幕id传过去,删除即可:

deleteDanmu(ids) {
                this.danmus = this.danmus.filter(danmu => danmu.id != ids)
            },

       而且并不会影响其他弹幕,但需要注意的是该删除时间延迟最小为6100.(本例)
       最后需要注意的是要给该组件的根div加上

white-space:nowrap;

       这个可以避免弹幕内容(数字、英文、中文等)在溢出时被折叠,而导致出现的异常问题。
       以上说的即是使用transition实现弹幕滚动效果时的核心问题,当这些实现后,剩下弹幕的美化就都是比较一般的问题了,当然本文并没有指出弹幕重叠的解决方法。

你可能感兴趣的:(使用transition实现弹幕滚动效果)