抖音最火彈幕小程式只要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;
}複製程式碼