抖音最火弹幕小程序只要100行代码

主要使用的是微信小程序的动画API实现的。代码里都有注释，如何实现的直接看代码吧。

代码不明白的可以留言、或微信我：qicong88

一、体验，微信搜索：“程序盒子Store”

二、源码下载地址：

链接：pan.baidu.com/s/1d-khSY3N…

密码：ugj8

三、新建一个页面（比如dm），将对应源码拷贝覆盖即可！

附代码：

1）表现层：dm.wxml

<!--弹幕文字-->
<view class="barrage-view" catchtouchmove="true" >
  <view animation="{{animationData}}" class="barrage-viewfly" style="color:{{textColor}};">
    <view class='text-item' wx:for="{{textArr}}" wx:key="unique">{{item}}</view>
  </view>
</view>


<!--弹幕输入框-->
<view class="barrage-input-block" >
  <view wx:if="{{showSource}}" class="share-text" style='color:#FFF;'>加微信 <text selectable="true">qicong88</text>，发送"dm"，确认后发源码</view>
  <form bindsubmit="formSubmit" >
    <view class="barrage-input"> <input name="flyText" value="" placeholder="请设置弹幕" maxlength='20'/> </view>
    <view class="barrage-shoot"> 
      <button size="mini" form-type="submit" >设置</button> 
      <button size="mini" type='warn' open-type='share'>分享群，获取源码</button>
    </view>
  </form>
</view>

2）逻辑层：dm.js

/**
 * 抖音弹幕
 */
Page({

  data: {
    flyText: "我是抖音最火弹幕！",
    flyDuration: 10000,
    textColor: "rgb(255,0,155)"
  },

  // 生命周期函数--监听页面加载
  onLoad: function (options) {
    wx.getSystemInfo({
      success: res => {
        this.setData({
          screenHeight: res.screenHeight
        });
      }
    });
    //分享
    wx.showShareMenu({
      withShareTicket: true
    });
  },

  onReady: function () {
    this.initBarrage(this.data.flyText);
  },

  //初始化弹幕
  initBarrage: function (flyText){
    var textArr = flyText.split("");
    var screenHeight = this.data.screenHeight; //rpx计算调整位置
    var transYHeight = screenHeight * textArr.length / 5; //px 计算动画移动Y值
    // console.log(screenHeight);

    this.setData({
      screenHeight: screenHeight,
      transYHeight: transYHeight,
      textArr: textArr,
    });

    //开始循环执行
    this.barrageAnimation();

    //定时执行
    this.inter_id = setInterval(function () {
      this.barrageAnimation();
    }.bind(this), this.data.flyDuration);
  },
  
  //定时器 让弹幕飞起来 
  barrageAnimation: function () {
    //开始弹幕滚动
    if (!this.animation){
      this.animation = wx.createAnimation({
        duration: 0,
        timingFunction: 'linear'
      });
    }

    //动画恢复到原位
    this.animation.translateY(this.data.screenHeight).step();
    this.setData({
      textArr: [], //文字清空的动画效果
      animationData: this.animation.export()
    });

    //延迟0.1s执行
    setTimeout(function(){
      this.animation.translateY(-this.data.transYHeight).step({ duration: this.data.flyDuration });
      this.setData({
        textArr: this.data.flyText.split(""),
        animationData: this.animation.export()
      });  
    }.bind(this), 100);
    
  },

  //设置弹幕
  formSubmit: function (e){
    var flyText = e.detail.value["flyText"];
    if(flyText){
      var textArr = flyText.split("");
      var screenHeight = this.data.screenHeight; //rpx计算调整位置
      var transYHeight = screenHeight * textArr.length / 5; //px 计算动画移动Y值

      this.setData({
        flyText: flyText,
        screenHeight: screenHeight,
        transYHeight: transYHeight,
        textArr: textArr,
      });

    }
  }
  
})

3）样式：dm.wxss

.barrage-view {
	height: 100%;
	width: 100%;
	position: absolute;
  background-color: #000;
}
.barrage-viewfly {
	position: absolute; 
  font-size: 120px;
  left: 35%;
  height: 300rpx;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.text-item{
  margin-bottom: -60rpx;
  transform: rotate(90deg);
}
.barrage-input-block{
  position: fixed;
  bottom: 10px;
}
.barrage-input input{
  background-color: #FFF;
}
.barrage-shoot{
  margin-top: 10rpx;
}
.barrage-shoot button{
  margin-right: 10rpx;
}