微信小程序怎么做字幕

微信小程序做字幕的案例：

在wxml文件中添加以下代碼。

<view style="height: 30px;overflow: hidden;">
  <view animation="{{animationData}}">{{content}}</view>
</view>

在js文件中添加以下代碼。

var that
var animation = wx.createAnimation()
/**
 * 傳入內容，廣播將會以動畫播放這條內容
 */
function update(content)  {    
  // 舊消息向上平移，以低速開始，動畫時間300ms
  animation.translateY(-30).step({duration:300,timingFunction: 'ease-in'})        
  // 為了實現下一條新內容向上平移的效果，必須把內容很快平移到下方，并且不能被用戶看見
  // 實現方法：動畫時間設置為1ms，過渡效果設置為’動畫第一幀就跳至結束狀態直到結束‘
  animation.opacity(0).translateY(30).step({duration:1,timingFunction:'step-start'})
  // 新消息向上平移的同時恢復透明度，以低速結束，動畫時間300ms
  animation.opacity(1).translateY(0).step({duration:300,timingFunction: 'ease-out'})
  that.setData({
    animationData: animation.export()
  })
  // 更新內容的延時必須大于第一步動畫時間
  setTimeout(that.setData.bind(that,{content: content}),300)
}
 
Page({
  data: {
    content: '歡迎回來'
  },
  onLoad: function(){
    that = this
    var generateRandomNumber = () => Math.floor(Math.random() * 1900 + 1) // 生成1到1999的隨機數
    setInterval(()=>{update('你獲得了' + generateRandomNumber() + '個金幣')}, 1000)
  }
})

運行代碼即可實現“滾動文字廣播、動態滾動公告欄”動態字幕效果。