小程序弹幕实现

其实，在微信开放文档中就有关于弹幕的组件。当然，这是在我自己实现了弹幕功能后才发现的，不然我肯定不会自己动手实现，能白嫖绝不动手。

实现弹幕功能最主要的点就是利用CSS3里面的动画效果

/**定义从右边向左边的移动的动画**/@keyframes first {  from {    left: 100%;  }​  to {    left: -200%;  }}

有了这个动画效果，实现弹幕效果非常简单了

效果图：

思路：

1. 在wxml中添加节点

2. 在wxss中添加动画

3. 在js中创建动画对象

4. 将动画对象传递给wxml中的节点

//在wxml中添加节点
<view wx:for="{{danmuList.list}}" wx:key="id" >
  <view class="aon" style="animation: first {{item.time}}s linear forwards;top:{{item.top}}%;color:{{item.color}};">
    <image src="{{item.avatarUrl}}" mode="aspectFit" class="userDanmu_img"></image>
    <view class="userDanmu_list">
      {{item.danmu}}
    </view>
  </view>
</view>
​
//在wxss中添加动画
//注意弹幕必须得是Position：absolute下才能移动
.userDanmu_img {
  display: inline-block;
  vertical-align: top;
  height: 60rpx;
  width: 60rpx;
  border-radius: 30rpx;
}
​
.userDanmu_list {
  display: inline-block;
  vertical-align: top;
  font-size: 30rpx;
  height: 60rpx;
  line-height: 60rpx;
  padding: 0rpx 15rpx;
}
​
.aon {
  position: absolute;
  white-space: nowrap;
  /* 防止向下换行 */
  height: 60rpx;
  line-height: 60rpx;
  border-radius: 30rpx;
  background-color: rgba(0, 0, 0, 0.5);
}
​
/**定义从右边向左边的移动的动画**/
/**注意下面这个to的left，如果你的弹幕非常长，
长到超过屏幕宽度，甚至有好几倍那么长。那么left
的值要设置为-300%甚至-500%，不然会出现弹幕停留在屏幕上的bug，
一般建议弹幕有字数限制**/
@keyframes first {
  from {
    left: 100%;
  }
  to {
    left: -200%;
  }
}
​
//在js中创建动画对象
//利用工厂模式，每次弹幕创建一个对象并添加到list中去，简单高效
function AddNewDanmu(danmu) {
  this.id = wx.getStorageSync('user_openId'),
    this.danmu = danmu,
    this.diplay = true,
    this.top = Math.ceil(Math.random() * 100),
    this.time = 10,
    this.color = com.getColor(),
    this.avatarUrl = wx.getStorageSync('user_avatarUrl')
}
​
function DanMu() {
  this.list = []
}
// 弹幕初始化 ==>在onload中执行
danmuInit() {
  this.setData({
    danmuList: new DanMu()
  })
}
  
 //将动画对象传递给wxml中的节点
 onSubmit(e) {
   // 内容检测 特3456书yuuo莞6543李zxcz蒜7782法fgnv级
if (e.detail.value.user_danmu.length !== 0) {
  wx.cloud.callFunction({
    name: 'setUserText',
    data: {
      content: e.detail.value.user_danmu
    }
  }).then(res => {
    console.log(res)
    if (res.result.errCode === 87014) {
      wx.showModal({
        title: '有违规内容',
        content: '检测到您的内容中有违规内容，请重新编辑',
        success: res => {
          if (res.cancel) {
            this.setData({
              danmu: false
            })
          }
        }
      })
    } else {
      console.log(e.detail.value.user_danmu.length)
      let danmuList = this.data.danmuList
      danmuList.list.push(new AddNewDanmu(e.detail.value.user_danmu))
      this.setData({
        danmuList: danmuList,
        danmu: false
      })
    }
  })
} else {
  this.setData({
    danmu: false
  })
    }
  }