微信小程序css方式animation动画弹幕实现

1.背景：

背景一：

在某些场景下需要用到弹幕，例如视屏直播网站等等需要用到弹幕，视屏直播等平台会用到输入发送弹幕，这个可以参考小程序的视屏播放部分video传送门，在video组件中直接有弹幕配置方式，详细参考官方文档，这里不做赘述。

场景二：

有些场景只需要播放弹幕（例如在重大节日里，需要烘托节日气氛，后台填写几条，然后接口返给前端，前端在屏幕固定范围内播放即可，这里无需用户手动输入）。后文只围绕这种情况做说明。

2.思路：

思路一：

此时就只是一个图片展示，不涉及video部分（想偷懒，就没法偷懒了，只能自己实现了）。通过setinterval计时器来实现，没问题，当然可以，每条弹幕开通一个计时器，播放结束后把计时器清除。这种思路简单清晰，会js的都能想到，实现起来就不是那么好了。（须考虑：1.计时器创建；2.计时器清除；3.当页面弹幕比较多时，页面有好多计时器在跑，不利于性能考虑），所以我认为这种方式不怎么友好。

思路二：

因为只是弹幕播放，从一个方向往另一个方向运动即可，方式很多呀（例如：1.通过left值；2.通过translatex来控制），此时只需要控制其位置变化，通过css的animate动画来实现即可，css的方式不会用到计时器，动画循环往复即可。

3.代码实现：（我的项目中用的百分比布局的方式，所以都通过了计算，包括字体大小都计算后获得）

3.1 代码实现思路

3.1.1 创建一个播放的可视区域（可视区域固定高度，宽度百分百），即弹幕最外层容器；

3.1.2 每一条弹幕的播放时间，延迟播放时间，距离顶部定位的top距离，通过js生成计算所得，在结构中渲染展示；

3.1.3 动画播放，从左往右（left:100%到left:-100%）运动；

3.2wxml

<view class='danmu' wx:if="{{danmu}}" style='background-color:rgba(0,0,0,0.5)'>
  <view wx:for="{{danmu}}" class='danmu-li rowAndColCenter' style="top:{{ item.top }}%;border-radius: {{window_h*0.18601*0.16}}px;font-size: {{window_h*0.18601*0.12}}px; animation: dmAnimation {{item.time}}s linear {{ index*3 }}s infinite;">{{item.title}}</view>
</view>

3.3css

.danmu {
  width: 100%;
  height: 18.601%;
  position: absolute;
  bottom: 0;
  left: 0;
  overflow: hidden;
}

.danmu-li {
  height: 17%;
  padding: 0 20rpx;
  color: #fff;
  background-color: rgba(0, 0, 0, 0.5);
  position: absolute;
  left: 100%;
  top: 0;
  word-break: keep-all;
  white-space: nowrap;
}

/* 弹幕动画 */

@keyframes dmAnimation {
  from {
    left: 100%;
  }

  to {
    left: -100%;
  }
}

3.4js

Page({
  /**
   * 页面的初始数据
   */
  data: {
    danmu: []
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function(options) {
    var that = this;
    // 系统宽高
    wx.getSystemInfo({
      success(res) {
        that.setData({
          window_w: res.windowWidth,
          window_h: res.windowHeight
        }, () => {
          var infor = [
            "用霸王防脱生发",
            "幸运的我中奖了！",
            "这么多奖品好多啊",
            "美好的活动真棒",
            "多好哇一二三四五六七八九十",
            "不怕秃"
          ];
          var danmu = []
          for (var i = 0; i < infor.length; i++) {
            const time = Math.floor(Math.random() * 10);
            const _time = time < 6 ? 6 + i : time + i;
            const top = Math.floor(Math.random() * 80) + 2;
            danmu.push({
              title: infor[i],
              top: top,
              time: _time,
            });
          }
          that.setData({
            danmu: danmu
          });
        });
      }
    });
  },
})

3.5 效果

4.说明：

4.2 animate文档：https://www.w3school.com.cn/cssref/pr_animation.asp

4.3 资源下载：https://www.duoguyu.com/smart/14.html

4.4 百度云下载：https://pan.baidu.com/s/1YtsI3vh-SXOS5CoTOf66VQ （提取码：q21u）

4.5 转载地址：https://blog.csdn.net/vinos_toby/article/details/90669260

4.6 仅做学习笔记使用，如果有侵权问题请联系博主删除。

微信小程序css方式animation动画弹幕实现

猜你喜欢