近接到公司小程序项目首页迭代改版的工作,涉及到文章图文布局改版。主要是精选文章,在首页推广入口增加评论弹幕效果,后端弹幕数据是随文章列表接口一次性返回给前端,由前端来处理弹幕数据及相关弹幕交互效果。
随后,简单分析了一下后端接口的数据结构,以及查询了一些传统web端弹幕的js实现方式。
鉴于我们当前业务的后端弹幕数据非动态持续发送,而是固定的评论条目,前端处理也仅仅是把文章评论渲染成弹幕并循环滚动,于是我采用的解决方案是通过css3的Animation动画属性来实现。
下面是拆分出来的部分代码demo实现效果的动画演示效果。
左边的视频演示:有序弹幕(固定轨道式,弹幕数据划分为三条固定轨道进行滚动显示)
右边的视频演示:无序弹幕(每条弹幕的出现位置随机性);
如果视频无法播放的话,可以查看下方对比图:
当前代码逻辑比较适合一些展示型的前端交互效果,比如:资讯类栏目、社交属性图文栏目、推广类广告位等。
# 无序弹幕 wxml #
<view class='dmGroup' wx:for="{{ dmData }}" wx:key="{{ item.id }}" style="top:{{ item.top }}%; animation: dmAnimation {{item.time}}s linear {{ index*3 }}s infinite; "> <view class='dmItem'> <view class='dm'> <view class='avatarBox'> <image src='{{ item.sex == 0 ? avatarBoy : avatarGirl }}' class='avatar' mode='aspectFit'></image> <image src='{{ item.sex == 0 ? iconBoy : iconGirl }}' class='sex' mode='aspectFit'></image> </view> <text class='content'>{{ item.content }}</text> <image src='{{ iconGood }}' class='icon good' mode='aspectFill'></image> <text>{{ item.zanNumber }}</text> </view> </view> </view>
# 无序弹幕 wxss #
@keyframes dmAnimation{ from{ left: 100%; } to{ left: -100%; } }
# 有序弹幕(轨道式) wxml #
<!-- top --> <view class='dmGroup top' style="animation: dmAnimation2 35s linear infinite; "> <view class='dmItem' wx:for="{{ dmData }}" wx:if="{{ index < 6 }}" wx:key="{{ item.id }}"> <view class='dm'> <view class='avatarBox'> <image src='{{ item.sex == 0 ? avatarBoy : avatarGirl }}' class='avatar' mode='aspectFit'></image> <image src='{{ item.sex == 0 ? iconBoy : iconGirl }}' class='sex' mode='aspectFit'></image> </view> <text class='content'>{{ item.content }}</text> <image src='{{ iconGood }}' class='icon good' mode='aspectFill'></image> <text>{{ item.zanNumber }}</text> </view> </view> </view> <!-- mid --> <view class='dmGroup mid' style="animation: dmAnimation2 30s linear 1s infinite; "> <view class='dmItem' wx:for="{{ dmData }}" wx:if="{{ index > 5 && index < 10 }}" wx:key="{{ item.id }}"> <view class='dm'> <view class='avatarBox'> <image src='{{ item.sex == 0 ? avatarBoy : avatarGirl }}' class='avatar' mode='aspectFit'></image> <image src='{{ item.sex == 0 ? iconBoy : iconGirl }}' class='sex' mode='aspectFit'></image> </view> <text class='content'>{{ item.content }}</text> <image src='{{ iconGood }}' class='icon good' mode='aspectFill'></image> <text>{{ item.zanNumber }}</text> </view> </view> </view> <!-- btm --> <view class='dmGroup btm' style="animation: dmAnimation2 45s linear infinite; "> <view class='dmItem' wx:for="{{ dmData }}" wx:if="{{ index > 9 }}" wx:key="{{ item.id }}"> <view class='dm'> <view class='avatarBox'> <image src='{{ item.sex == 0 ? avatarBoy : avatarGirl }}' class='avatar' mode='aspectFit'></image> <image src='{{ item.sex == 0 ? iconBoy : iconGirl }}' class='sex' mode='aspectFit'></image> </view> <text class='content'>{{ item.content }}</text> <image src='{{ iconGood }}' class='icon good' mode='aspectFill'></image> <text>{{ item.zanNumber }}</text> </view> </view> </view>
# 有序弹幕 wxss #
@keyframes dmAnimation2{ 0% { transform: translateX(0); } 100% { transform: translateX(-130%); } }
# 查看线上项目弹幕效果 #
# 详细代码片段及详解,请私信哟#
者:Panda Shen
转发链接:https://www.overtaking.top/2018/06/21/20180621113025/
聊时看了下斗鱼直播,突然灵感乍现,想做出这个弹幕效果,于是有了下文
这里还是要说一下我的前端学习群:594959296,从我一个到现在的都是看我每一篇文章来的,可以说都是我们大前端的学霸啊,不定期分享干货。想学到东西的都可以来,欢迎初学和进阶中的小伙伴
1、像优酷、爱奇艺等,记录用户发送弹幕时该视频播放的位置,其他人播放这个视频时到了这个点就显示弹幕。
2、像斗鱼、熊猫这样的直播网站,用户发送弹幕直接显示在屏幕上,以后不需要再显示了。
我们就来做第二种!!!
实现效果
项目分析
1、获取用户输入信息;
2、在页面中创建一个 <span></span>来放获取到的文本,并添加一些样式(字体大小、颜色等);
3、给这个 span添加一个从右向左移动的动画;
4、动画结束后,移除这个 <span>。
思路很清楚了,就来动手实现一下。。
布局
页面中要有一个输入框让用户输入信息,还要一个盒子用来显示弹幕。为了美观,我多加了一些东西。
1、#dm 是显示弹幕的区域,input供用户输入信息(其中 placeholder 属性规定输入框中默认显示内容)。
2、其它元素都是为了美观和布局。
样式
跟以前一样,先给出代码然后再讲解。
1、首先还是格式化浏览器默认的 margin和 padding。overflow属性设置超出屏幕的部分隐藏,这样就不会出现下拉和水平的滚动条了。
2、#dm用来显示弹幕,我们把它的高度设置为 90vh。vh 是 CSS3 中新增的长度单位,表示相对于视口的高度。视口高度被均分为100单位的vh,90vh 就表示当前浏览器可视区域高度的 90%。(vw 就是视口宽度)
3、#dm span是每条弹幕的样式。你可以修改为你喜欢的样子,不过一定要设置 position
定位属性。
4、然后就是下面的输入部分了。使用了 flex布局 (也是CSS3 中新增的内容,太方便了)。只需要 align-items:center;justify-content:center; 这两句就可以使其中的子元素在水平和垂直方向居中。所以 #idDom 和 #content都使用了。
5、然后就是 输入框、按钮的样式了,没什么好说的,应该都能看懂。
JS部分
先看看代码吧。。
1、说明:向页面添加弹幕使用 addBarrage() 函数,添加动画用 move()函数。(把一种功能封装为一个函数是一个好习惯)
2、首先思考一下弹幕的触发事件。应该有两个:点击“发射”按钮、按下 Enter按键。所以分别监听点击 和 键盘事件。
3、然后就要思考怎么向页面添加弹幕了?
先得到用户输入的信息
然后在页面中创建一个
<span></span>
把得到的文本放进去添加到 #dm这个盒子中:
这样就可以了吗?? 当然不是的。。
4、每条弹幕应该有不同的颜色,这样才炫酷。思路就是把预先的颜色放进一个数组,使用的时候用随机的下标,这样就获得了随机颜色。(借鉴斗鱼的 7 中颜色)
这样每条弹幕就有不同的颜色了。
5、每条弹幕在页面上还要有不同的位置(高度),也就是不同的 top 值。我的想法是,虽然要有不同的 top ,但也不能太随意。就像下面这样:(一行是一行的)
我的思路是:先判断页面可以放多少行?
然后计算可以有的 top 值:(加 10 是为了不至于紧挨着屏幕顶部,最后的 -1 是为了不至于太靠下 )
你可以自己理解一下我的这种计算方式。。
然后应用给
<span>
即可:
6、对了,弹幕应该添加到页面的什么位置呢?因为弹幕要从右往左移动,所以应该添加到屏幕的右侧,left 值为浏览器页面的宽度。这时候就知道为什么前面要设置 body 的 overflow: hidden;了吧!!
动画
弹幕(也就是<span>)被添加到页面中了,我们要让他动起来。思路就是写一个函数,减少 <span>
的 left 值。每隔几毫秒执行一次这个函数,我们看起来这个 <span>元素就动起来了。
7、但是有几个问题:
页面中有多少个弹幕(<span>)?因为页面中只有 弹幕 使用的是 <span> 标签,所以这样就可以获取所有 <span>的 nodeList(类似数组但不是数组,可以使用下标索引访问):
怎样记录每条弹幕的 left 值?获取到所有的 <span>后,用一个 for 循环将每一个 <span> 的 left 值放进一个数组:
这样 arr[] 就保存了所有弹幕的 left 值。
8、接下来我们就逐个减少每条弹幕的 left 值:
9、最后判断如果弹幕已经移出了页面的左边,就把这条弹幕删除了吧。
我们可以在开发工具中看一下这个过程:
弹幕的 left 一直减小,移出页面后 #dm中就没有这个 <span>了。
10、最后处理一个小细节吧!当我们点击按钮或按回车后,输入框中的文字会保留,影响我们下次输入,所以只要获取到了用户输入的内容,就把输入框清空吧!
到此,弹幕就实现了。。。
学习javascript也是有门槛的,就是你的html和css至少还比较熟练,您不能连html这东东是干啥的都不知道就开始学javascript了,学乘除前,学好加减法总是有益无害的。
*请认真填写需求信息,我们会在24小时内与您取得联系。