微信小程序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.1 推荐博客:https://blog.csdn.net/vinos_toby/article/details/90669260

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 仅做学习笔记使用,如果有侵权问题请联系博主删除。

发布了152 篇原创文章 · 获赞 31 · 访问量 27万+
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 技术黑板 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览