小程序小记2：抖音最火弹幕小程序只要100行代码？！

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

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

  
    {{item}}
  




  加微信 qicong88，发送"dm"，确认后发源码
  

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,
      });

    }
  }

})

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;
}

图片参考下图，具体效果微信搜索 "程序盒子Store"，即可看到；

https://img1.sycdn.imooc.com/5b86bb7d0001999012422208.jpg